Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Economics & Finance
A responsive knockout text creates a cutout effect where text appears to be carved out of a surface, revealing the background image behind it. The text automatically adjusts to different screen sizes, making it truly responsive. Syntax selector { mix-blend-mode: multiply; background-color: white; font-size: viewport-units; } Key Properties for Knockout Text PropertyPurpose mix-blend-modeCreates the knockout effect by blending text with background background-colorWhite background allows the blend mode to work font-size: vwViewport units make text responsive to screen size transform: translate(-50%, -50%)Centers ... Read More
A list group is a styled version of a basic HTML list that removes bullets and applies consistent borders and spacing to create a clean, card-like appearance. This is commonly used in modern web design for navigation menus, content lists, and UI components. Syntax ul { list-style-type: none; padding: 0; margin: 0; } ul li { border: 1px solid color; padding: value; background-color: color; } Step 1: Create an Unordered ... Read More
We will see how to create a coupon with CSS. For that, we need to set the company name on the top, an image below, followed by the coupon code and text representing when the coupon will expire. Syntax .coupon-container { border: dashed; border-radius: value; width: percentage; margin: auto; } Set the Parent Container for the Coupon We set the parent div here. Within this we will place the divs for the text, image, etc − ... Read More
To create empty circles on a web page, use the border-radius property with a value of 50%. Empty circles are hollow shapes with only a border visible and no filled background. This technique is useful for creating decorative elements, loading indicators, or UI components. Syntax selector { width: value; height: value; border-radius: 50%; border: width style color; background-color: transparent; } Method 1: Using Border Property The most common approach is to create a square ... Read More
The labels on a web page can be used to symbolize danger, warning, information symbols in the form of colors. With Bootstrap, pre-defined classes are available. However, even CSS styles can help us to achieve the same without using Bootstrap. Syntax span.label-class { background-color: color; color: text-color; padding: value; font-weight: value; } Basic Label Structure The element is used to set different labels for information, success, warning and danger. These are the different classes for each label ... Read More
To create a design like notes, we need to style it according with CSS on a web page. Consider the sticky notes provided by Google Keep. It provided different color label options. Let us see how to create some notes. Syntax selector { background-color: color; border-left: width solid color; padding: value; margin: value; } Set Different Divs for Notes Here, we are creating three notes representing danger, success and information. We have set different divs − ... Read More
A callout message is a notification component that appears on a webpage, typically used to display offers, announcements, or important information to users. These messages usually include a close button allowing users to dismiss them when not interested. Syntax .callout { position: fixed; bottom: value; right: value; } Example: Basic Callout Message Here's how to create a complete callout message with HTML and CSS − body { ... Read More
Alert messages are important UI components used to notify users about critical information, confirmations, or warnings. Common examples include "Your order is confirmed", "Your password is about to expire", or "This action cannot be undone". Let's see how to create attractive alert messages using HTML and CSS. Syntax .alert { padding: value; background-color: color; color: text-color; border: border-value; border-radius: radius-value; } Basic Alert Structure First, create a container div for the alert message with ... 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. Syntax .productCard { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); max-width: width-value; margin: auto; text-align: center; ... Read More
A profile card is a common UI component used on team pages or author sections to display employee or author information. These cards typically include a profile image, name, designation, and location. A contact button can also be added to allow users to interact. Let us see how to create a professional-looking profile card with CSS. Syntax .profile-card { max-width: value; box-shadow: shadow-values; text-align: alignment; background-color: color; } HTML Structure First, we create the HTML structure with a ... Read More