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
Articles by AmitDiwan
Page 501 of 840
How to create a fixed/sticky header on scroll with CSS and JavaScript?
A fixed/sticky header remains at the top of the page when users scroll down, providing constant navigation access. This can be achieved using CSS positioning and JavaScript to detect scroll events. CSS Approach The simplest method uses the CSS position: sticky property − .header { position: sticky; top: 0; z-index: 1000; } Example 1: Pure CSS Sticky Header Here's a basic sticky header using only CSS − body { ...
Read MoreHow to create a gradient background color on scroll with CSS?
Creating a gradient background that changes on scroll provides an engaging visual effect. This is achieved by using CSS animations triggered by scroll events, or by using fixed positioning with a gradient that shifts as content moves. Syntax body { height: 100vh; /* or more for scrollable content */ background: linear-gradient(angle, color1, color2, color3, ...); background-attachment: fixed; /* keeps gradient fixed while content scrolls */ } Method 1: Fixed Gradient Background This method creates a gradient that appears to shift as you ...
Read MoreHow 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 More