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 20 of 81
Create 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 MoreSelects every element whose href attribute value contains the substring "java" with CSS
The CSS [attribute*="value"] selector is used to select elements whose attribute value contains a specified substring. This attribute selector is particularly useful when you need to target elements based on partial attribute matches. Syntax [attribute*="value"] { /* CSS properties */ } Where attribute is the HTML attribute name and value is the substring to search for within that attribute's value. Example: Selecting Links Containing "java" The following example demonstrates how to select all anchor elements whose href attribute contains the substring "java" − ...
Read MoreSelect elements whose attribute value contains a specified value with CSS
The CSS [attribute*="value"] selector is used to select elements whose attribute value contains a specified substring. This selector matches any element where the attribute contains the specified value anywhere within it. Syntax [attribute*="value"] { /* CSS properties */ } How It Works The asterisk (*) in the selector means "contains". The selector will match any element where the specified attribute contains the given value as a substring, regardless of its position within the attribute value. Example: Selecting Images by Alt Text The following example selects all images whose ...
Read MoreHow to create a transition effect with CSS?
CSS transitions allow you to smoothly animate changes in CSS properties over a specified duration. They create smooth visual effects when elements change state, such as on hover or focus. Syntax selector { transition: property duration timing-function delay; } Possible Values PropertyDescription propertyCSS property to animate (width, height, color, etc.) durationTime the transition takes (in seconds or milliseconds) timing-functionSpeed curve (ease, linear, ease-in-out, etc.) delayDelay before transition starts (optional) Example: Width Transition on Hover The following example creates a smooth width transition when hovering over a ...
Read MoreAdd a blur effect to the shadow with CSS
The CSS box-shadow property allows you to add shadow effects around an element. When you specify a blur radius value, it creates a soft, blurred shadow instead of a sharp one. Syntax selector { box-shadow: offset-x offset-y blur-radius color; } Parameters ParameterDescription offset-xHorizontal shadow offset (required) offset-yVertical shadow offset (required) blur-radiusAmount of blur applied to shadow (optional) colorShadow color (optional) Example The following example demonstrates how to add a blur effect to a shadow − h2 ...
Read More