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 664 of 801
CSS media types
CSS media types allow you to specify how a document should be formatted for different output devices. They enable you to apply different styles for screen displays, printers, handheld devices, and other media types. Syntax @media media-type { /* CSS rules */ } /* Or in link element */ CSS Media Types Media TypeDescription allSuitable for all devices (default) printIntended for printed pages and print preview mode screenIntended primarily for computer screens speechIntended for speech synthesizers (replaces aural) Note: Most media types from CSS2 like ...
Read MoreCSS pitch property
The CSS pitch property specifies the average pitch (frequency) of the speaking voice in speech synthesis. The average pitch varies based on the voice family − for example, a standard male voice averages around 120Hz, while a female voice averages around 210Hz. Syntax selector { pitch: value; } Possible Values ValueDescription frequencySpecifies the average pitch in hertz (Hz) x-lowExtra low pitch relative to voice family lowLow pitch relative to voice family mediumMedium pitch relative to voice family (default) highHigh pitch relative to voice family x-highExtra high pitch relative to ...
Read MoreCSS cue-after Property
The CSS cue-after property specifies a sound to be played after speaking an element's content in speech synthesis. This property is part of CSS Speech Module and is used by screen readers and other assistive technologies to provide audio cues that help separate content elements. Syntax selector { cue-after: value; } Possible Values ValueDescription url()Specifies the URL of a sound file to be played noneNo sound will be played (default value) Example The following example demonstrates how to add audio cues after different elements − ...
Read MoreFade Out Animation Effect with CSS
The CSS fade out animation effect gradually transitions an element from fully visible (opacity: 1) to completely invisible (opacity: 0). This creates a smooth disappearing effect that's commonly used for image galleries, modal closures, and interactive elements. Syntax @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .element { animation-name: fadeOut; animation-duration: time; animation-fill-mode: both; } Example: Basic Fade Out Effect The following example demonstrates a fade out ...
Read MoreFade In Up Big Animation Effect with CSS
The CSS fadeInUpBig animation effect creates a dramatic entrance where an element slides up from far below the viewport while fading in. This animation is perfect for hero sections, large images, or content that needs to make a bold visual impact. Syntax @keyframes fadeInUpBig { 0% { opacity: 0; transform: translateY(2000px); } 100% { opacity: 1; ...
Read MoreFade In Animation Effect with CSS
CSS fade-in animation creates a smooth visual effect where elements gradually transition from transparent to opaque. This effect is commonly used to enhance user interaction by drawing attention to specific elements like buttons, images, or text when users hover over them. Syntax selector { opacity: initial-value; transition: opacity duration; } selector:hover { opacity: final-value; } Key Properties PropertyDescriptionValues opacityControls transparency level0 (transparent) to 1 (opaque) transitionDefines animation duration and timingTime in seconds (s) or milliseconds (ms) Example 1: ...
Read MoreAchieve 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 More