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 66 of 130
How to create a Hoverable Sidenav with CSS?
A hoverable sidenav is a navigation menu that slides out from the side of the page when hovered. This creates an interactive navigation experience while saving screen space. Syntax selector { position: fixed; left: -width; transition: duration; } selector:hover { left: 0; } Example The following example creates a hoverable side navigation with multiple links that slide out on hover − Hoverable Sidenav nav a ...
Read MoreHow to create a responsive side navigation menu with CSS?
A responsive side navigation menu adapts its layout based on screen size. On larger screens, it appears as a fixed sidebar, while on smaller screens it transforms into a horizontal navigation bar. Syntax /* Fixed sidebar for desktop */ nav { position: fixed; width: fixed-width; height: 100%; } /* Responsive behavior */ @media screen and (max-width: breakpoint) { nav { position: relative; width: 100%; ...
Read MoreHow to create an animated, closable side navigation menu with CSS?
To create an animated, closable side navigation menu, we need to combine CSS transitions with JavaScript event handling. The menu slides in from the left when opened and smoothly slides out when closed using CSS width transitions. Syntax .sideNav { width: 0; transition: width 0.5s; position: fixed; } /* JavaScript to toggle width */ element.style.width = "300px"; /* Open */ element.style.width = "0"; /* Close */ Basic Structure The side navigation consists of three main components − ...
Read MoreHow to add a search box inside a responsive navigation menu?
To add a search box inside a responsive navigation menu, you need to combine navigation links with an input element and use CSS to style and position them appropriately. The search box should adapt to different screen sizes using media queries. Syntax nav { /* Navigation container styles */ } .links { /* Navigation link styles */ } input[type="text"] { /* Search box styles */ } @media screen and (max-width: breakpoint) { /* Responsive styles */ } ...
Read MoreHow to create a responsive navigation menu with icons, using CSS?
A responsive navigation menu with icons adapts to different screen sizes, providing an optimal user experience across devices. This menu displays horizontally on larger screens and stacks vertically on smaller devices. Syntax /* Basic responsive navigation structure */ nav { width: 100%; background-color: color; } .nav-link { display: inline-block; padding: value; text-decoration: none; } @media screen and (max-width: breakpoint) { .nav-link { display: ...
Read MoreHow to create custom checkboxes and radio buttons with CSS?
The default checkboxes and radio buttons can be easily customized with CSS to match your website's design. You can modify their appearance, colors, and behavior for different states like selected, hovered, and focused. Syntax /* Hide default input */ input[type="checkbox"], input[type="radio"] { appearance: none; } /* Create custom styling */ .custom-input { /* Custom styles here */ } Custom Checkbox To create a custom checkbox, we hide the default input and create a custom visual using CSS pseudo-elements. Example: Custom Checkbox ...
Read MoreHow to create a Menu Icon with CSS?
A menu icon, commonly known as a "hamburger menu, " consists of three horizontal lines stacked vertically. This icon is widely used in responsive web design to represent a navigation menu that can be toggled on mobile devices. Syntax .menu-icon { width: value; height: value; background-color: color; margin: value; } Example: Basic Menu Icon The following example creates a simple menu icon using three div elements − ...
Read MoreHow to create Icon Bar with CSS?
To create Icon Bar with CSS, you need to set the icons using Font Awesome or similar icon libraries. An icon bar provides easy navigation with visual icons. Here, we will create both horizontal and vertical icon bars using Font Awesome icons. Syntax .icon-bar { width: value; background-color: color; overflow: auto; /* for horizontal */ } .icon-bar a { display: block; /* for vertical */ float: left; /* for horizontal */ text-align: ...
Read MoreEffect of Color Property on Borders and Outlines in CSS
We can define the border color and outline color for an element. Unlike borders, outline doesn't take up any space. The border-color property is used to set an element's border color and the outline-color property is used to set its outline color. Syntax /* for setting border-color */ selector { border-color: value; } /* for setting outline-color */ selector { outline-color: value; } Possible Values ValueDescription color nameNamed colors like red, blue, green hexHexadecimal values like #FF0000 rgb()RGB values like rgb(255, 0, 0) transparentMakes ...
Read MoreGrouping Selectors in CSS
CSS grouping selectors allow you to apply the same styles to multiple elements at once by separating selectors with commas. This technique reduces code repetition and makes your CSS more maintainable and efficient. Syntax selector1, selector2, selector3 { property: value; } How Grouping Selectors Work When you separate selectors with commas, the CSS rules apply to all the specified elements. You can group any type of selectors including element selectors, class selectors, ID selectors, and attribute selectors. Example 1: Grouping Element Selectors The following example applies the same ...
Read More