To create keyframe animations in CSS3, define individual keyframe. Keyframes will control the intermediate animation steps in CSS3. Keyframes are the rules for animation on a web page. The animation properties are used with keyframes to control the animation. Let us see the syntax − Syntax @keyframes animationname {selector {styles;}} Above, animationname− The name of the animation. selector− This is the keyframe selector i.e. the animation duration %. styles− These are the CSS style properties Animate a rectangle to a circle Create a rectangle and animate it to a circle. The animation duration is set to ... Read More

A range slider, is an input field in HTML, that accepts the type as a “range”. It is used to select a numeric value within the given specific range, we can pass the range inside the input field as shown below snippet of code As you can see in the above snippet of code, the type is equal to the range and we provide the min = “0” and max = “100” values, which will be the range of the field. The custom range sliders help customize the field range as per the need. In the following article, ... Read More

The opacity property is used to create a transparent textbox. Set an image in the transparent box using the background property. Since, we have set the opacity, it will make the text and image appearing in the text box to be transparent. Create a div container A div container is set − This is some random text inside the transparent box Transparent textbox Within the above parent div, the textbox child div is set − This is ... Read More

If you want to display a skill bar stating the proficiency of a skill, then create a skill bar. Let’s say we are showing programming proficiency that a student is proficient in which programming language. Create a skill bar and display the proficiency in percentage with different colors for different skills. Let us see how to create a skill bar with CSS. Create a container Create a div container for each skill bar. We have shown only a single skill bar below − Python 75% Other skill bars are shown below − ... Read More

Scroll indicator indicates and animates accordingly. When the scroller goes down, the progess bar suggests how many elements are still remaining. When the scroller takes you to the bottom, the scroll indicator i.e., the progress bar also ends. Let us see how to create a scroll indicator with CSS and JavaScript. Fixed header First, set the position of the header to be fixed using the position property with the value fixed. The header will remain fixed even when the web page navigates to the bottom − .header { position: fixed; top: 0; ... Read More

A tooltip is used to set extra information. This is visible on the web page when visitor moves the mouse pointer over an element. The tooltip text can be given directions such as top, bottom, right, and left. Create a Tooltip To create a tooltip, create a Tooltip container and set the text for the Tooltip in it. The Tooltip text is set using the − Hover over me Some toolTip text The Tooltip is positioned using the position property − position: relative; However, the Tooltip text ... Read More

To create a delete confirmation modal with CSS and JavaScript, the code is as follows −Example Live Demo    body {       font-family: Arial, Helvetica, sans-serif;    }    .modal {       text-align: center;       display: none;       position: fixed;       z-index: 1;       padding-top: 100px;       left: 0;       top: 0;       width: 100%;       height: 100%;       background-color: rgba(0, 0, 0, 0.4);    }    .modalContent {       font-size: 20px;   ... Read More

CSS3 provides a layout mode Flexible Box, commonly called as Flexbox. Flexbox (flexible box) is a layout mode of CSS3. Using this mode, you can easily create layouts for complex applications and web pages. It includes the container, flex items, etc. The container has the following properties − flex-direction flex-wrap flex-flow justify-content align-items align-content Here are all the Flexbox examples in a single image. It uses the flex, flex-wrap, justify-content, align-items, etc. − Style the Parent Container We have styled the parent container here. The flex container becomes flexible by setting the display property to flex ... Read More

To create a modal box with CSS and JavaScript, the code is as follows −Example Live Demo    body {       font-family: Arial, Helvetica, sans-serif;    }    .modal {       text-align: center;       display: none;       position: fixed;       z-index: 1;       padding-top: 100px;       left: 0;       top: 0;       width: 100%;       height: 100%;       background-color: rgba(0, 0, 0, 0.4);    }    .modalContent {       font-size: 20px;     ... Read More

The property opacity is the modern solution and works for Firefox, Safari, opera, and every version of chrome. The -moz-opacity property is the opacity property for Firefox while the –khtml-opacity property is for safari. The filter property is to give opacity like effect. Using all these values together as a fallback for modern opacity allows us to use opacity in all browsers. Set the images We will check the cross-browser opacity for the images. The second image above will get opaque on all browsers − Opacity for the 2nd image The opacity for the second image ... Read More