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
Front End Technology Articles
Page 559 of 652
Fade In Left Animation Effect with CSS
The CSS Fade In Left animation effect creates a smooth transition where an element slides in from the left while gradually becoming visible. This animation combines opacity changes with horizontal movement to create an elegant entrance effect. Syntax @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: ...
Read MoreWhat is a page box in CSS?
A page box in CSS is a rectangular area that defines the printable region of a page when creating print stylesheets. It consists of the page area (where content appears) and the margin area around it. Page boxes are defined using the @page rule and allow you to control page dimensions, orientation, margins, and printing marks. Syntax @page { size: width height; margin: value; marks: crop | cross | none; } Page Box Properties PropertyDescription sizeSets the page box dimensions and ...
Read MoreRole of media attribute on the LINK element
The media attribute on the LINK element specifies the target media or device type for which an external style sheet is intended. This allows you to apply different styles for different output devices like screens, printers, or mobile devices. Syntax Possible Values Media TypeDescription allSuitable for all devices (default) printIntended for printed material screenIntended for computer screens handheldIntended for handheld devices Example: Print-Specific Styles The following example links a CSS file specifically for print media − Media Attribute Example ...
Read MoreHow to specify the target media within the document language with CSS
CSS media attributes allow you to specify which devices or media types should apply specific styles. This helps create responsive designs that work across different platforms like screens, printers, and handheld devices. Syntax /* In CSS */ @media media-type { /* CSS rules */ } /* In HTML link tag */ Common Media Types Media TypeDescription screenComputer screens, tablets, phones printPrinters and print preview allAll media types (default) speechScreen readers and speech synthesizers Example: Using Media Attribute in HTML The following example shows how ...
Read MoreHow to specify the target media types of a set of CSS rules
The media attribute on CSS elements and @media rules allows you to specify which types of devices or media should apply specific CSS styles. This enables responsive design and device-specific styling. Syntax /* Using @media rule */ @media media-type { /* CSS rules */ } /* Using link element */ Common Media Types Media TypeDescription allSuitable for all devices (default) printIntended for printed documents screenIntended for computer screens speechIntended for speech synthesizers Example: Using Link Element with Media Attribute The following example shows ...
Read MoreCSS 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 More