Contact chips can be considered as a small contact card on a web page. If you want to list multiple support staff or team members on a web page, then to align the details properly, use the contact chips. It only includes a small profile image with the name. Let us see how to create contact chips on a web page with HTML and CSS. Create containers For the contact chips, create individual containers. First, include the profile image using the element. Add the image source for the profile image using the src attribute − ... Read More

The overlay effect can be easily created on a web page. Let’s say we have placed the divs together on a web page. To let any of them appear when required is called an overlay effect. The overflow is also closeable with a cross sign on the top-right. Let us see how to create an overlay effect with HTML and CSS. Set the container for overlay A div is set for the overlay with a cross sign to close the overflow and a button for the same purpose − × Script to hide ... Read More

To create a user rating scorecard, first set the exact icon for a star. That would be done using the Font Awesome icons. The individual ratings are displayed as progress bars. Set the Icon for Star Rating The icon for the star rating is set using Font Awesome Icons. We have added the following CDN path for the Font Awesome icons in the beginning to use it on our web page − For rated, use the fa fa-star rated − The above rated class is styled to make the star look appealing − .rated { color: rgb(255, 0, 0); border: 2px ... Read More

To create a simple star rating look with CSS, the code is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;       margin: 30px;    }    .fa {       font-size: 30px;       color: grey;    }    .rated {       color: rgb(255, 0, 0);       border: 2px solid yellow;    } Star Rating Example OutputThe above code will produce the following output −

A preloader as the name suggests loads when the web page is loaded. Consider it as a loading page or a loading screen before the content on the web page is visible. With CSS, we can easily create a preloader and can also style it using the border properties. The animation for the loader is set with keyframes. Style the loader To style the loader, the border properties are used. The height and width are also set − .loader { border: 16px double #ffee00; border-radius: 50%; border-top: 16px solid #7434db; ... Read More

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