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 94 of 130
Center an image with CSS
Centering an image in CSS can be accomplished using the display: block property combined with margin: 0 auto. This technique works by making the image a block-level element and then applying automatic left and right margins. Syntax img { display: block; margin: 0 auto; } Method 1: Using Block Display and Auto Margins The most common method to center an image horizontally is to set display: block and use margin: 0 auto − .centered-image { ...
Read MoreHow to scale down an image with CSS to make it responsive
The CSS max-width and height properties can be used to make images responsive, allowing them to scale down automatically based on the container size while maintaining their aspect ratio. Syntax img { max-width: 100%; height: auto; } Key Properties PropertyValueDescription max-width100%Ensures image never exceeds container width heightautoMaintains aspect ratio automatically Example: Basic Responsive Image The following example demonstrates how to make an image scale down responsively − .container { ...
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 MoreAdd more than one shadow to a text with CSS
Whether in graphic design, photography, or even on a web page, adding shadows is a powerful technique to create depth and visual interest. You can apply multiple shadows to text using CSS without needing external image editing software. CSS provides two main properties for creating shadow effects − text-shadow - for adding shadows directly to text box-shadow - for adding shadows to elements containing text To add multiple shadows with CSS, use a comma-separated list of shadow values. Syntax /* Multiple text shadows */ text-shadow: shadow1, shadow2, shadow3; /* Multiple box shadows ...
Read MoreCreate red neon glow shadow using CSS
The CSS text-shadow property can be used to create a red neon glow effect on text. This technique applies multiple shadow layers with red colors to simulate the bright, glowing appearance of neon signs. Syntax selector { text-shadow: h-offset v-offset blur-radius color; } Example: Basic Red Neon Glow The following example creates a simple red neon glow effect using a single shadow − body { background-color: #000; ...
Read MoreCreate white text with black shadow using CSS
The CSS text-shadow property is used to create a shadow effect behind text. To create white text with a black shadow, you need to set the text color to white and define the shadow parameters including color, offset, and blur radius. Syntax selector { text-shadow: horizontal-offset vertical-offset blur-radius color; } Example The following example creates white text with a black shadow using the text-shadow property − body { background-color: #f0f0f0; ...
Read MoreFade In Tooltip with CSS Animation
CSS tooltip animations provide a smooth visual experience when displaying helpful information. A fade-in effect creates an elegant transition as the tooltip becomes visible on hover. This technique combines CSS transitions with hover states to create professional-looking tooltips. Syntax .tooltip .tooltip-text { opacity: 0; transition: opacity duration; } .tooltip:hover .tooltip-text { opacity: 1; } Example The following example creates a fade-in tooltip that appears when you hover over the text − ...
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 MoreUsage of transform property with CSS
The CSS transform property is used to apply 2D or 3D transformations to an element. This property allows you to rotate, scale, translate (move), or skew elements without affecting the document flow. Syntax selector { transform: transform-function(value); } Common Transform Functions FunctionDescriptionExample rotate()Rotates element by specified anglerotate(45deg) scale()Scales element sizescale(1.5) translate()Moves element from its positiontranslate(50px, 100px) skew()Skews element along X and Y axesskew(20deg, 10deg) Example 1: Rotation Transform The following example demonstrates how to rotate an element by 10 degrees − ...
Read MoreSelects every element that are preceded by a element with CSS
The CSS general sibling selector (~) selects elements that are siblings and come after a specified element. The syntax element1 ~ element2 targets all element2 elements that are preceded by element1 at the same level in the HTML structure. Syntax element1 ~ element2 { /* CSS properties */ } Example: Selecting Lists After Paragraphs The following example selects all elements that are preceded by a element − p ~ ul ...
Read More