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 665 of 801
Achieve 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 MoreMake any particular color transparent with CSS Filters
The CSS chroma filter is a legacy Internet Explorer filter that was used to make a specific color transparent in an element. This filter allows you to specify a color that should become transparent, effectively creating a "color key" effect similar to green screen technology. Syntax selector { filter: Chroma(Color = #colorvalue); } Parameters ParameterDescription ColorThe hexadecimal color value that you want to make transparent Example: Making White Background Transparent The following example demonstrates how to make white color (#FFFFFF) transparent in an image − ...
Read MoreRole of CSS Filters
CSS filters allow you to apply visual effects like blur, brightness, contrast, and more to HTML elements without using external graphics. The filter property provides a powerful way to manipulate the rendering of images, backgrounds, and even text elements. Syntax selector { filter: filter-function(value); } Common Filter Functions Filter FunctionDescriptionValue Range blur()Applies blur effect0px to any px value brightness()Adjusts brightness0% to any percentage contrast()Adjusts contrast0% to any percentage grayscale()Converts to grayscale0% to 100% hue-rotate()Rotates hue colors0deg to 360deg Example: Basic Image Filters The following example demonstrates ...
Read MoreCSS Alpha Channel filter
The CSS Alpha Channel filter is a legacy Internet Explorer filter that alters the opacity of an element, creating transparency effects and gradient blending with the background. While this filter is obsolete in modern web development, it was historically used to create alpha transparency effects. Syntax filter: Alpha(opacity=value, finishopacity=value, style=value, startX=value, startY=value, finishX=value, finishY=value); Parameters Parameter Description Opacity Level of the opacity. 0 is fully transparent, 100 is fully opaque. finishopacity Level of the opacity at the other end of the object. Style The shape of ...
Read MoreHow to import styles from another style sheet in CSS
The CSS @import rule allows you to import styles from another stylesheet into your current CSS file. This rule must be placed at the very beginning of your stylesheet, before any other CSS rules. Syntax @import "stylesheet-url"; @import url("stylesheet-url"); @import url("stylesheet-url") media-query; Basic Import Example Here's how to import an external CSS file into your stylesheet − @import url("https://fonts.googleapis.com/css2?family=Arial:wght@300;700&display=swap"); body { font-family: Arial, sans-serif; ...
Read More