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 55 of 130
How to create a smooth scrolling effect with CSS?
The smooth scrolling effect can be created on a web page using the CSS scroll-behavior property. This property controls the scrolling behavior when users click on anchor links, providing a smooth transition instead of an instant jump to the target section. Syntax html { scroll-behavior: smooth; } Possible Values ValueDescription autoDefault instant scrolling behavior smoothSmooth animated scrolling behavior Example: Creating Smooth Scrolling Between Sections The following example demonstrates smooth scrolling between two sections using anchor links − ...
Read MoreHow to create a snackbar / toast with CSS and JavaScript?
If you want to show notifications to the user about any information, such as a coupon for buying the product, you can create a snackbar. Use them as popups to display a message at the bottom of the screen. Generally, the snackbar vanishes after some time with fade-in and fade-out animations. Let us see how to create a snackbar on the click of a button with CSS and JavaScript. Syntax .snackbar { visibility: hidden; position: fixed; bottom: 30px; left: 50%; ...
Read MoreHow to clear floats with the \"clearfix\" hack with CSS?
The clearfix hack in CSS is used to fix the issue where floated elements overflow outside of their container. When an element is floated and is taller than its container, it can break the layout by extending beyond the container's boundaries. Syntax .clearfix { overflow: auto; } Without Clearfix Let us understand the issue by running the following program. The floated image overflows outside its container − body { font-family: "Segoe UI", ...
Read MoreHow 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 More