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 Chandu yadav
Page 22 of 81
Create a Vertical Button Group with CSS
The vertical button group in CSS allows you to stack buttons one below the other, creating a clean and organized navigation or action menu. This layout is useful for sidebars, navigation panels, or any interface where you need buttons arranged vertically. Syntax .button-group .button { display: block; width: 100%; } Example The following example creates a vertical button group with styled buttons ? .mybtn .button { background-color: orange; ...
Read MoreHow to specify the number of columns an element should be divided into with CSS
The CSS column-count property is used to specify the number of columns an element should be divided into. This property enables you to create newspaper-style multi-column layouts for text content. Syntax selector { column-count: value; } Possible Values ValueDescription autoDefault value. Number of columns determined by other properties numberPositive integer specifying the number of columns Example: Creating 4 Columns The following example demonstrates how to divide text content into 4 columns − .demo { ...
Read MoreUsage of CSS grid-column-gap property
The CSS grid-column-gap property is used to set the gap between columns in a CSS Grid layout. This property allows you to create space between grid columns without affecting the padding or margins of individual grid items. Syntax selector { grid-column-gap: value; } Possible Values ValueDescription lengthDefines the gap in px, em, rem, etc. %Defines the gap as a percentage of the container width normalDefault value, typically 0 Example The following example demonstrates how to create a 20px gap between grid columns − ...
Read MoreCreate a responsive pagination with CSS
Responsive pagination is a navigation component that adapts to different screen sizes while maintaining usability. This technique uses CSS to create pagination links that automatically adjust their layout and appearance across devices. Syntax .pagination { display: flex; justify-content: center; flex-wrap: wrap; } .pagination a { padding: value; margin: value; text-decoration: none; border: value; } @media (max-width: breakpoint) { /* Responsive styles */ } ...
Read MoreCreate a Bordered Button Group with CSS
The CSS border property allows you to create visually appealing button groups with defined borders around each button. This technique is useful for creating navigation menus, toolbars, or any grouped interactive elements. Syntax .button-group { /* Container styles */ } .button-group button { border: width style color; /* Additional button styles */ } Example: Basic Bordered Button Group The following example creates a horizontal button group with blue borders − .btn-group ...
Read MoreChange the background color of a button with CSS
To change the background color of a button, use the background-color property in CSS. This property allows you to set any color value to customize the button's appearance. Syntax button { background-color: value; } Possible Values ValueDescription Color namePredefined color names like red, blue, yellow Hex codeHexadecimal values like #FF0000, #00FF00 RGBRGB values like rgb(255, 0, 0) HSLHSL values like hsl(120, 100%, 50%) Example: Yellow Background Button The following example demonstrates how to change a button's background color to yellow − ...
Read MoreDisplay a blue shadow on image hover with CSS
To display a blue shadow on image hover, use the CSS box-shadow property with the :hover pseudo-class. This creates an interactive effect that enhances user experience by providing visual feedback when users hover over images. Syntax selector:hover { box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color; } Example: Blue Shadow on Image Hover The following example displays a blue shadow when you hover over the image − img { width: 250px; ...
Read MoreHow to apply a 2D or 3D transformation to an element with CSS
The CSS transform property allows you to apply 2D or 3D transformations to elements. You can rotate, scale, translate, or skew elements to create dynamic visual effects. Syntax selector { transform: transform-function(value); } Common Transform Functions FunctionDescriptionExample rotate()Rotates the element by specified degreesrotate(45deg) scale()Scales the element sizescale(1.5) translate()Moves the element from its current positiontranslate(50px, 100px) skew()Skews the element along X and Y axesskew(20deg, 10deg) Example: 2D Rotation The following example demonstrates how to rotate an element by 15 degrees − ...
Read MoreSelects all elements with CSS
To select all elements on a webpage, use the universal selector (*) in CSS. This selector applies styles to every HTML element within the document, making it useful for resetting default styles or applying global formatting. Syntax * { property: value; } Example The following example demonstrates how to apply styles to all elements using the universal selector − * { color: blue; background-color: ...
Read MoreSet animation with a slow end using CSS
The CSS animation-timing-function property with the ease-out value is used to create animations that start fast and slow down towards the end. This creates a natural deceleration effect, making animations feel more realistic and smooth. Syntax selector { animation-timing-function: ease-out; } Possible Values ValueDescription ease-outAnimation starts fast and slows down at the end ease-inAnimation starts slow and speeds up ease-in-outAnimation starts slow, speeds up, then slows down linearAnimation maintains constant speed Example The following example demonstrates an animation with a slow end using ease-out timing function ...
Read More