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 54 of 130
How to create arrows with CSS?
With CSS, we can easily design arrows on a web page. This includes the top, bottom, left, and right arrows. Arrow is created using the border properties and then rotated to form an arrow. The rotation is performed using the rotate() method of the transform property. Syntax .arrow { border: solid color; border-width: 0 width width 0; display: inline-block; padding: size; transform: rotate(angle); } Basic Arrow Structure The foundation of CSS arrows uses border ...
Read MoreHow to add transition on hover with CSS?
The CSS transition property allows you to create smooth animations when an element's properties change, such as on hover. Transitions provide a way to control the speed and timing of these changes, making your website more interactive and visually appealing. Syntax selector { transition: property duration timing-function delay; } selector:hover { /* Properties to change */ } Transition Properties PropertyDescription transition-propertyThe CSS property to which the transition is applied transition-durationHow long the transition takes to complete (in seconds or milliseconds) transition-timing-functionThe speed curve of ...
Read MoreHow to center a button element vertically and horizontally with CSS?
To center a button vertically and horizontally with CSS, use the justify-content and align-items properties with flexbox. This creates perfect centering for button elements within their container. Syntax .container { display: flex; justify-content: center; align-items: center; height: value; } The Justify-content Property In CSS, the justify-content property is used to align the items horizontally. The syntax of CSS justify-content property is as follows − Selector { display: flex; ...
Read MoreHow 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 More