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 658 of 801
Create blurred picture or text with CSS Filters
Users find websites with blurred backgrounds or text visually appealing. CSS filters provide a simple way to create blurred effects on images or text, enhancing visual appeal and achieving specific design aesthetics. The filter property allows you to apply various visual effects including blur, brightness, and contrast adjustments. Syntax /* Basic blur syntax */ filter: blur(radius); /* Text shadow blur syntax */ text-shadow: h-offset v-offset blur-radius color; Method 1: Using CSS Filter Property The filter: blur() function applies a Gaussian blur to any element. The blur radius determines how many pixels blend into ...
Read MoreCSS Chroma Filter
The CSS chroma filter is a legacy Internet Explorer-specific filter that was used to make a particular color transparent. This filter is not supported in modern browsers and has been replaced by CSS3 properties like background-color: transparent and opacity. Syntax filter: chroma(color=colorvalue); Legacy Browser Support Note: The chroma filter only worked in Internet Explorer and is now obsolete. Modern browsers do not support this property. Important: This filter is deprecated and should not be used in modern web development. Use CSS3 alternatives instead. Example: Legacy Chroma Filter (IE Only) ...
Read MoreCSS play-during property
The CSS play-during property specifies a sound to be played as a background while an element's content is spoken. This property is part of the CSS Speech Module and is primarily used for screen readers and other assistive technologies. Syntax selector { play-during: value; } Possible Values ValueDescription URIThe sound designated by this is played as a background while the element's content is spoken mixWhen present, this keyword means that the sound inherited from the parent element's play-during property continues to play and the sound designated by the ...
Read MoreWave effect with CSS?
The CSS wave effect is a legacy filter that was used to create sine wave distortions on elements, giving them a wavy appearance. This filter was primarily supported in Internet Explorer and is now obsolete. Modern CSS uses alternative techniques like transforms and animations to achieve wave effects. Syntax selector { filter: Wave(Add=value, Freq=value, LightStrength=value, Phase=value, Strength=value); } Parameters ParameterDescription AddA value of 1 adds the original image to the waved image, 0 does not FreqThe number of waves LightStrengthThe strength of the light on the wave (from 0 ...
Read MoreSet Invert Effect with CSS
The CSS filter: invert() property is used to map the colors of an element to their opposite values in the color spectrum, creating a negative image effect similar to film negatives. Syntax selector { filter: invert(percentage); } Possible Values Value Description 0% No inversion (default) 100% Complete color inversion 50% Gray appearance Example: Image Invert Effect The following example applies an invert filter to an image − .original ...
Read MoreFlip Out X Animation Effect with CSS
The CSS Flip Out X animation effect creates a 3D flipping motion where an element rotates around its horizontal (X) axis and fades out simultaneously. This animation is commonly used for exit transitions and interactive UI elements. Syntax @keyframes flipOutX { 0% { transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateX(90deg); ...
Read MoreCSS speech-rate property
The CSS speech-rate property controls the speed at which content is spoken by screen readers and other speech synthesis applications. This property is part of the CSS Speech Module and helps create more accessible web content. Syntax selector { speech-rate: value; } Possible Values ValueDescription numberSpecifies the speaking rate in words per minute x-slowSame as 80 words per minute slowSame as 120 words per minute mediumSame as 180-200 words per minute (default) fastSame as 300 words per minute x-fastSame as 500 words per minute fasterAdds 40 words per minute ...
Read MoreFlip In X Animation Effect with CSS
The CSS Flip In X animation effect creates a 3D flipping motion where an element rotates along the X-axis while appearing on the page. This animation starts with the element rotated 90 degrees and invisible, then flips into view with a bouncing effect. Syntax @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { ...
Read MoreCSS cue property
The CSS cue property is a shorthand for setting cue-before and cue-after properties. It allows you to specify audio cues that play before and after an element's content when using speech synthesis or screen readers. Syntax selector { cue: cue-before cue-after; /* or */ cue: single-value; } Possible Values ValueDescription url()Specifies an audio file to play as a cue noneNo audio cue is played (default) inheritInherits the value from parent element Example: Setting Audio Cues The following example ...
Read MoreCSS cue-before Property
The CSS cue-before property specifies a sound to be played before speaking an element's content in speech synthesis applications. This property is primarily used for audio cues in screen readers and voice browsers. Syntax selector { cue-before: value; } Possible Values ValueDescription url()Specifies the URL of a sound file to be played noneNo sound is played (default value) Example The following example demonstrates how to use the cue-before property to add audio cues − h1 { ...
Read More