The alert message can be seen on web pages. As an example, we can consider a message while deleted an account on a social media website. Even coupons are provided in the form of alert message on some websites. Other examples can be “Your order is confirmed” or even ““Your password is about to expire. Please update it now.” Let us see how to create alert messages with HTML and CSS. Create a container for the alerts A div is set for the alter message. Within that the alert message is set with the close button symbol − ... Read More

On an E-commerce website, you must have seen product cards for specific products. It includes the product name, image, price, any discount, etc. On a web page, we can easily create a product card with CSS. With that, the Buy Now or Add to Cart button is also placed on this card so it’s easier for users to directly buy. Set the div for the card Under the div for the product card, set the product image and the product name as a heading. Rest, place the product details and price in the . Also, the buy button is set ... Read More

Under the Team page, or authors page, you must have seen the profile card of employees or authors. Such profile cards include the profile image, name, and profile. A button can also be created to allow users to contact. In most cases, such buttons are optional. Let us see how to create a profile card with CSS. Set a div for the profile card A parent div is set for the card. First, set the profile image, then the name, designation and location. At the end, set a button using the element − ... Read More

To create a flip card with CSS, the code is as follows −Example Live Demo    body {       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;       margin:20px;    }    .flipCard {       background-color: transparent;       width: 300px;       height: 300px;       perspective: 1000px;    }    .innerCard {       position: relative;       width: 100%;       height: 100%;       text-align: center;       transition: transform 0.6s;       transform-style: preserve-3d;       box-shadow: ... Read More

On a web page, we can easily create a card like you must have seen on a Team’s page. The employee name, and designation is visible with a thumbnail image. With CSS, we can easily a card and also set the hover style using the :hover selector. Set the Card Image The element is used to set the image for the card. Place it inside a div − Amit Diwan Founder ... Read More

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