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
Front End Technology Articles
Page 492 of 652
How to create a responsive cutout/knockout text with CSS?
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 MoreHow to transform a basic list into a \"list group\" with CSS?
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 MoreHow to create a \"coupon\" with CSS?
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 MoreHow 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 More