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
Web Development Articles
Page 596 of 801
How to create equal height columns with CSS?
Equal height columns are useful for creating uniform layouts where all columns maintain the same height regardless of their content. CSS offers several methods to achieve this, with the table display method being one of the most reliable approaches. Syntax /* Parent container as table */ .container { display: table; width: 100%; } /* Child columns as table cells */ .column { display: table-cell; } Method 1: Using Table Display The table display method creates equal height columns by treating the ...
Read MoreHow to create a sticky element with CSS?
On a web page, we can easily create an element that remains fixed in position when scrolling. This is achieved using the CSS position property with the value sticky. Syntax selector { position: sticky; top: value; } How Sticky Position Works A sticky element toggles between relative and fixed positioning based on the user's scroll position. It sticks to the specified position when the viewport reaches the defined threshold. Example: Creating a Sticky Header The following example creates a sticky navigation header that remains ...
Read MoreHow to Create a Fixed Footer with CSS?
To create a fixed footer with CSS, we will use the CSS position property. A fixed footer means that the footer will remain fixed at the bottom irrespective of page scrolling. We will be discussing two different approaches to achieve this. Syntax selector { position: sticky | fixed; bottom: 0; width: 100%; } Method 1: Using Position Sticky Property The position: sticky property keeps the footer at the bottom of the page when scrolling. The footer will stick to the bottom of ...
Read MoreHow to create a glowing text with CSS?
To create a glowing text with CSS, use the animation property combined with text-shadow. The glowing effect is achieved by animating between different text-shadow values using @keyframes. Syntax .glowing-text { animation: animation-name duration timing-function iteration-count direction; text-shadow: multiple shadow values; } @keyframes animation-name { from { text-shadow: initial values; } to { text-shadow: final values; } } Basic Glowing Text Example Here's a simple example that creates a glowing text effect − ...
Read MoreHow 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 More