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
Web Development Articles
Page 635 of 801
Add 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 MoreSelects all elements inside elements with CSS
The descendant selector (space-separated) in CSS allows you to select all elements of a specific type that are nested inside another element, regardless of how deeply nested they are. Syntax ancestor descendant { property: value; } Where ancestor is the parent element and descendant is the child element you want to style. Example The following example demonstrates how to style all elements that are inside elements − div p { ...
Read MoreSelects all elements and all elements with CSS
The CSS comma selector allows you to apply the same styles to multiple elements by separating them with commas. This is useful when you want different element types to share the same styling rules. Syntax selector1, selector2, selector3 { property: value; } Example: Styling Multiple Elements The following example applies the same color and background styling to both and elements − div, p { color: blue; ...
Read MoreArrow to the left of the tooltip with CSS
Creating an arrow pointing to the left of a tooltip helps users understand that the tooltip relates to the element they're hovering over. This arrow is created using CSS pseudo-elements and border properties to form a triangular shape. Syntax .tooltip .tooltip-text::after { content: ""; position: absolute; border-width: size; border-style: solid; border-color: transparent color transparent transparent; } Example The following example creates a tooltip with an arrow pointing to the left − ...
Read More