Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Front End Technology Articles
Page 221 of 652
How to apply two CSS classes to a single element?
We can apply multiple CSS classes to a single element by using the class attribute and separating each class with a space. There are two ways to apply two CSS classes to a single element − Apply two Classes Using the Class Attribute The class attribute that is used to set a single class can also be used to set multiple classes − This element has two CSS classes applied to it Example Let us see the example − Multiple Classes .one { color: red; ...
Read MoreHow to animate buttons using CSS?
To animate buttons on a web page, use the transition property. Set the transition duration as well. Using the :after selector on a button, set how the look of the button animates after it is clicked. Create a Button Let us first create a button using the element − Click Here Style the Button The button is styled here. The position is set to relative, the cursor is set to pointer. With that, the width is also set − button { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; position: relative; background-color: rgb(100, 0, 84); border: none; ...
Read MoreHow to Animate Bullets in Lists using CSS?
To style bullets in an unordered list, we can use the list-style property. We will see examples to animate ordered and unordered lists. Syntax The syntax of CSS li-style property as follows − li { list-style: /*value*/ } Style and Animate Unordered List The following example illustrate CSS list-style property to style the list items in an unordered list i.e. . To animate it, we have set styles on hover using the :hover selector − li:hover { box-shadow: -10px 2px 4px 0 blue!important; font-size } Example Let us see an example to style and animate an unordered list on a web page − ...
Read MoreHow to create a glowing text with CSS?
To create a glowing text with CSS, use the animation property. For animations, we use @keyframes. The @keyframes is a rule wherein you need to specify the CSS styles. Bind the animation to an element for it to work successfully. The animation-name property is used to set the name of the @keyframes animation. The duration of the animation is set using the animation-duration property. In the same way, we have the following properties that allows animations on a web page − animation animation-name animation-duration animation-delay animation-iteration-count animation-direction animation-timing-function animation-fill-mode However, in this example, we have used the shorthand animation property to create a glowing text. We have set the following ...
Read MoreHow to align images side by side with CSS?
To align images side by side, we can use the float property in CSS. With that, flex also allows us to align images. Let us understand them one by one with examples beginning with aligning images side by side with the float property. Align Images Side by Side With Float We can float elements like images with CSS float property to either the left or right of the containing parent element. Other elements are placed around the floated content. Multiple elements with same value of float property enabled are all placed adjacently. In this example, the image is placed on the left using ...
Read MoreHow to add visual effects to images with CSS?
The filter property is used to set visual effects, such as drop shadow, contrast, brightness, saturation, shadow to images in CSS. The following is the syntax − Syntax The following is the syntax − filter: none | drop-shadow() | blur() | brightness() | contrast() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); As you can see above, with the filter property, we can set the following effects: contrast, drop shadow, blur, brightness, grayscale, hue-rotate, invert, opacity, saturate, sepia, url. The following are the example codes to add visual effects to images with CSS − Add a Visual Effect to ...
Read MoreHow to add transition on hover with CSS?
To add a transition with hover on CSS, first, use the :hover selector. Under this, use the transform property and scale the element. For the transition, use the transition property. The transition shorthand property allows us to specify transition-property, transition-duration, transition-timing function and transition-delay as values to transition property in one line − transition-duration − Specifies how many seconds or milliseconds a transition effect takes to complete transition-property − The name of the property the effect is on transition-timing function − The speed curve of the transition transition-delay − Set the delay for the transition effect in seconds Remember, you need to set the CSS ...
Read MoreHow to add Google Charts to your web page?
We will include a Google Chart to the web page using the google.charts.load(). The draw() method is used to draw the chart. To display, use the BarChart class. First, the chart data is configured. The data of the chart is in a table. Configure the Chart Data Let us first create a function of the chart data. Configure the data to be displayed on the chart. DataTable is a special table structured collection which contains the data of the chart. function drawChart() { var data = google.visualization.arrayToDataTable([ ["Year", "India"], ["2019", 500], ...
Read MoreHow to Add CSS Rules to a Stylesheet with JavaScript?
The insertRule() helps us add a rule at a defined position in the stylesheet while deleteRule() deletes a specific style on a web page. The following examples illustrate CSS rules that can be added to a stylesheet using JavaScript. Insert a Rule To insert a rule at a defined position, use the insertRule() method. The margin, padding, and box-shadow is also set. First, the custom id is set using the getElementById() − let newSheet = document.getElementById('custom').sheet let cs = 'p {'; cs += 'margin: 4%;'; cs += 'padding: 2%;'; cs += 'font-size: 22px;'; cs += 'box-shadow: ...
Read MoreHow to add a search box inside a responsive navigation menu?
To add a search box, use the input type text on a web page. Set the search box inside the navigation menu. Let us first set how to create a responsive navigation menu and place the search box. Set the Navigation Menu and Search box in it To begin with, use the to create a navigation menu. The links are set using the element. Set input type="text" for the search box. This adds the search box inside the navigation menu − Home ...
Read More