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 595 of 801
How to center an element vertically and horizontally with CSS?
To center an element vertically and horizontally with CSS, use the justify-content and align-items properties with flexbox. This is one of the most reliable and modern methods for achieving perfect centering. Syntax selector { display: flex; justify-content: center; align-items: center; } The Justify-content Property In CSS, the justify-content property is used to align flex items horizontally along the main axis. The syntax is as follows − selector { display: flex; justify-content: value; ...
Read MoreHow to zoom/scale an element on hover with CSS?
To zoom/scale an element on hover with CSS, we can use the transform: scale() function or the zoom property. These techniques create smooth hover effects that enhance user interaction by making elements appear larger when the mouse cursor hovers over them. Syntax /* Using transform scale */ selector:hover { transform: scale(value); } /* Using zoom property */ selector:hover { zoom: value; } Method 1: Using transform scale() The transform: scale() function is the recommended approach as it's part of the CSS3 standard and provides better ...
Read MoreHow to create a tree view with CSS and JavaScript?
A tree view is an expandable/collapsible hierarchical structure commonly used to display folder structures or nested data. This interface allows users to click on parent nodes to reveal or hide their children, creating an interactive navigation experience. Syntax /* Basic tree view structure */ .tree-root { cursor: pointer; user-select: none; } .tree-root::before { content: "\25B6"; /* Right arrow */ transform: rotate(0deg); transition: transform 0.3s; } .tree-root.expanded::before { transform: rotate(90deg); /* Down ...
Read MoreHow to switch between dark and light mode with CSS and JavaScript?
To switch between dark and light mode with CSS and JavaScript, you can use CSS classes to define the different themes and JavaScript to toggle between them dynamically. Syntax /* CSS for light mode (default) */ body { background-color: white; color: black; } /* CSS for dark mode */ .dark-mode { background-color: black; color: white; } Example The following example demonstrates how to create a toggle button that switches between light and dark themes − ...
Read MoreHow to create a responsive pricing table with CSS?
Creating a responsive pricing table with CSS allows you to display comparison plans that adapt seamlessly across different devices. These tables are commonly used on web hosting websites and membership platforms to showcase features of various plans like free, business, and enterprise tiers. Syntax .pricing-container { display: flex; flex-wrap: wrap; } @media (max-width: 600px) { .pricing-container { flex-direction: column; } } Example: Responsive Pricing Table The following example creates ...
Read MoreHow 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 More