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 124 of 130
Achieve X-Ray effect with CSS
The X-Ray effect in CSS is an Internet Explorer specific filter that converts colors to grayscale and flattens the color depth, creating a distinctive visual appearance similar to an X-ray image. Syntax selector { filter: Xray; } Parameters Parameter Description Xray Grayscales and flattens the color depth of the element Example The following example demonstrates how to apply the X-Ray filter effect to both images and text − .xray-image { ...
Read MoreFade In Right Animation Effect with CSS
The CSS Fade In Right animation effect creates a smooth transition where an element starts invisible and positioned to the right, then gradually fades in while moving to its final position. This effect is commonly used for creating engaging entrance animations. Syntax @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(distance); } 100% { opacity: 1; ...
Read MoreFade In Right Big Animation Effect with CSS
The CSS Fade In Right Big animation effect creates a dramatic entrance where elements start completely transparent and positioned far off-screen to the right, then smoothly animate to full opacity while sliding into their final position. Syntax @keyframes fadeInRightBig { 0% { opacity: 0; transform: translateX(2000px); } 100% { opacity: 1; transform: translateX(0); ...
Read MoreSet Mask Effect with CSS
The CSS mask effect is used to selectively hide parts of an element or apply visual effects by overlaying a mask layer. Modern CSS provides the mask property to create sophisticated masking effects using images, gradients, or shapes. Syntax selector { mask: mask-image mask-mode mask-repeat mask-position / mask-size; } Common Mask Properties PropertyDescription mask-imageSpecifies the image to use as a mask mask-modeSets how the mask layer image is interpreted (alpha, luminance, match-source) mask-repeatControls how the mask image is repeated mask-positionSets the position of the mask layer mask-sizeSpecifies the size ...
Read MoreAchieve Glow Effect with CSS Filters
The CSS glow effect is a visual technique used to create a luminous halo around elements. This effect makes objects appear to emit light and can be achieved using the drop-shadow filter or box-shadow properties. Syntax /* Using drop-shadow filter */ selector { filter: drop-shadow(0 0 blur-radius color); } /* Using box-shadow */ selector { box-shadow: 0 0 blur-radius color; } Parameters ParameterDescription blur-radiusThe amount of blur for the glow effect (in px) colorThe color of the glow (hex, rgb, or named colors) spread-radiusOptional: ...
Read MoreShadow Filter with CSS
The CSS shadow filter is used to create drop shadows for elements. This filter applies an attenuated shadow in the specified direction and color, giving a 3D appearance to text and images. Syntax selector { filter: drop-shadow(offset-x offset-y blur-radius color); } Parameters Parameter Description offset-x Horizontal offset of the shadow (positive = right, negative = left) offset-y Vertical offset of the shadow (positive = down, negative = up) blur-radius The blur effect applied to the shadow (optional, default is 0) ...
Read MoreConvert the colors of the object to 256 shades of gray with CSS
The CSS grayscale() filter is used to convert the colors of an element to 256 shades of gray. This filter is part of the CSS filter property and allows you to remove color saturation from images, text, and other elements. Syntax selector { filter: grayscale(value); } Possible Values ValueDescription 0 or 0%No grayscale effect (original colors) 1 or 100%Completely grayscale (no color) 0.5 or 50%50% grayscale effect Example: Grayscale Effect on Image and Text The following example applies a grayscale filter to both an image and ...
Read MoreFade In Up Animation Effect with CSS
The CSS fade in up animation effect creates a smooth transition where an element starts invisible and positioned below its final location, then gradually appears while moving upward to its intended position. This creates an elegant entrance animation commonly used in modern web design. Syntax @keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 100%, 0); } 100% { opacity: 1; ...
Read MoreCreate a mirror image with CSS
The CSS mirror effect can be created using the transform property with scale() function. By applying negative values to the scale function, you can flip elements horizontally or vertically to create mirror images. Syntax /* Horizontal mirror (flip left-right) */ transform: scaleX(-1); /* Vertical mirror (flip top-bottom) */ transform: scaleY(-1); /* Both horizontal and vertical mirror */ transform: scale(-1, -1); Possible Values FunctionDescription scaleX(-1)Creates a horizontal mirror image (flips left to right) scaleY(-1)Creates a vertical mirror image (flips top to bottom) scale(-1, -1)Creates both horizontal and vertical mirror image ...
Read MoreFade Out Down Animation Effect with CSS
The fade out down animation effect makes an element gradually disappear while moving downward. This creates a smooth exit animation that combines opacity reduction with downward translation. Syntax @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(distance); } } .element { ...
Read More