Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
CSS Articles
Page 56 of 130
How to create empty circles with CSS?
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 MoreHow to style labels with CSS?
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 MoreHow to create \"notes\" with CSS?
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 MoreHow to create callout messages with CSS?
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 MoreHow to create alert messages with CSS?
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 MoreHow to create a product card with CSS?
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 MoreHow to create a profile card with CSS?
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 MoreHow to create a flip card with CSS?
A flip card with CSS creates an interactive element that rotates to reveal content on the back when hovered. This effect uses CSS transforms and 3D perspective to create a smooth flipping animation. Syntax .flip-container { perspective: 1000px; } .flip-card { transform-style: preserve-3d; transition: transform 0.6s; } .flip-container:hover .flip-card { transform: rotateY(180deg); } .front, .back { backface-visibility: hidden; } .back { transform: rotateY(180deg); } Key Properties ...
Read MoreHow to create a \"card\" with CSS?
CSS cards are containers that hold information in an organized and visually appealing way. You'll commonly see cards used to display user profiles, product listings, or article previews. CSS provides several properties like box-shadow, border-radius, and padding to create professional-looking card components. Syntax .card { box-shadow: horizontal vertical blur spread color; border-radius: value; padding: value; background-color: color; } Basic Card Structure A typical card consists of an image, header, and content text wrapped in a container element − ...
Read MoreHow to create contact chips with CSS?
Contact chips are compact UI elements that display a person's profile image alongside their name in a pill-shaped container. They are commonly used to show team members, contacts, or support staff in a clean, organized manner on web pages. Syntax .chip { display: inline-block; padding: 0 25px; height: 50px; border-radius: 25px; /* other styling properties */ } HTML Structure First, create the HTML structure for contact chips. Each chip contains a profile image and ...
Read More