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 101 of 130
Display the overflowed content when hovering over the element with CSS
The CSS overflow property controls what happens when content exceeds its container's boundaries. By combining overflow with the :hover pseudo-class, you can reveal hidden content when users hover over an element. Syntax selector { overflow: hidden; /* Hide overflowed content initially */ } selector:hover { overflow: visible; /* Show overflowed content on hover */ } Example: Displaying Hidden Text on Hover The following example demonstrates how to show overflowed text when hovering over a container − ...
Read MoreWhich CSS property is used to run Animation in Reverse Direction?
The CSS animation-direction property is used to run animation in reverse direction. This property controls whether an animation should play forwards, backwards, or alternate back and forth. Syntax selector { animation-direction: value; } Possible Values ValueDescription normalAnimation plays forward (default) reverseAnimation plays in reverse direction alternateAnimation plays forward, then backward alternate-reverseAnimation plays backward, then forward Example: Reverse Animation Direction The following example shows how to run an animation in reverse direction using the reverse value − ...
Read MoreCSS padding-box Value
The CSS background-origin property with the padding-box value positions the background image starting from the upper left corner of the padding area. This means the background extends through the padding but not into the border area. Syntax selector { background-origin: padding-box; } Possible Values ValueDescription padding-boxBackground starts from the padding edge (default value) border-boxBackground starts from the border edge content-boxBackground starts from the content edge Example: Comparing Background Origin Values The following example demonstrates the difference between padding-box, border-box, and content-box values − ...
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 MoreSelects all elements with a lang attribute value starting with "en" with CSS
The CSS [attribute|="value"] selector is used to select elements with a specified attribute value that starts with the given value. This selector is particularly useful for language codes, where you want to select elements with lang attributes starting with "en" (like "en", "en-US", "en-GB", etc.). Syntax [attribute|="value"] { /* CSS properties */ } Example The following example selects all elements with a lang attribute value starting with "en" and applies an orange border ? ...
Read MoreHow to create fading effect with CSS
To create a fading effect with CSS, you can use various techniques including CSS gradients, opacity transitions, and animations. The most common approach is using linear gradients with rgba colors to achieve smooth fading transitions. Syntax selector { background: linear-gradient(direction, color-stop1, color-stop2); /* OR */ opacity: value; transition: opacity duration; } Method 1: Using Linear Gradient The following example creates a horizontal fading effect using a linear gradient from transparent to opaque − ...
Read MoreAdd a background color to the form input with CSS
The CSS background-color property is used to add background color to form input elements. This property allows you to customize the appearance of input fields by setting their background to any color value. Syntax input { background-color: value; } Possible Values ValueDescription color namePredefined color names like red, blue, gray hex codeHexadecimal values like #FF5733, #000000 RGBRGB values like rgb(255, 87, 51) transparentMakes the background transparent Example The following example applies a gray background color to text input fields − ...
Read MoreStyle select options with CSS
The CSS select element can be styled to enhance its appearance and user experience. You can modify properties like width, padding, borders, background colors, and more to customize the dropdown menu. Syntax select { property: value; } Example: Styling Select Element The following example demonstrates how to style a select dropdown with custom padding, borders, and background color − select { width: 100%; padding: ...
Read MoreSet Bordered Form Inputs with CSS
The CSS border property is used to add borders to form input elements. You can customize the border width, style, and color to create visually appealing forms. Syntax input { border: width style color; } Possible Values PropertyValuesDescription border-widthpx, em, thin, medium, thickSets the border thickness border-stylesolid, dashed, dotted, inset, outsetDefines the border appearance border-colorcolor names, hex, rgbSpecifies the border color Example: Inset Border for Text Inputs The following example creates bordered text inputs with an inset style − ...
Read MoreStyle Input Fields of a form with CSS
CSS provides powerful styling capabilities for form input fields, allowing you to customize their appearance, layout, and user interaction states. You can control properties like width, padding, borders, colors, and focus effects to create attractive and user-friendly forms. Syntax input[type="text"] { property: value; } input { property: value; } Example: Basic Input Field Styling The following example demonstrates how to style input fields with width, padding, and borders − input[type="text"] { ...
Read More