A to-do list allows you to manage your task. It is like a note. When you type what needs to be done, for example, meeting at 4PM, you press Enter. On pressing Enter, the task gets added and a section for another task is visible wherein you can type the next task, example, lunch with a colleague at 7PM, etc. Add an Input Text to Enter a Task To add an input task, use the . A placeholder is also set using the placeholder attribute − Style the Input The input is set with the todoInput class. ... Read More

To create a collapsible section with CSS and JavaScript, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .collapse {       background-color: rgb(83, 186, 255);       color: white;       cursor: pointer;       padding: 18px;       width: 100%;       border: none;       text-align: left;       outline: none;       font-size: 18px;    }    .active, .collapse:hover {       background-color: rgb(34, 85, 160);    } ... Read More

A popup appears on the click of a button. Add any key message in it. To close the popup, set a cross symbol on top-right. However, the popups generally close when the mouse cursor is placed somewhere else on the web page. Set a button to open the popup First, create a button that will be clicked by the user to open the popup − Open Popup Set the container for the popup A div is set for the popup. Withing that, a child container is created for the popup content. Within that, set the close symbol using ... Read More

Use the opacity property with the :hover selector to change the opacity on mouse-over. The following is the code to change image opacity on mouse over. Change the image Opacity The following is the image we need to change the opacity on mouse over. We have used the element to set the image − The image class is set with the opacity property value as 1 initially i.e., the actual image − .transparent{ width:270px; height:200px; opacity: 1; transition: 0.3s; } The opacity ... Read More

To create tooltips with CSS, the code is as follows −Example Live Demo    body {       text-align: center;       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .tooltip {       position: relative;       display: inline-block;       border-bottom: 1px dotted black;       font-size: 20px;       font-weight: bolder;       color: blue;    }    .tooltip .toolText {       visibility: hidden;       width: 120px;       background-color: rgb(89, 166, 255);       color: #fff;       ... Read More

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