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
Articles by Lakshmi Srinivas
Page 9 of 24
Bounce In Left Animation Effect with CSS
The CSS Bounce In Left animation effect creates an element that enters from the left side of the screen with a bouncing motion. This animation starts with the element positioned off-screen to the left, then slides in with a characteristic bounce effect. Syntax @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { opacity: 1; ...
Read MoreBounce Animation Effect with CSS
The CSS bounce animation effect creates a realistic bouncing motion by moving an element up and down with decreasing amplitude, simulating the physics of an object bouncing off a surface. Syntax @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } .element { animation: bounce 1s ease-in-out; } How Bounce Animation Works The bounce effect uses @keyframes to define multiple stages of movement. The ...
Read MoreCSS pause property
The CSS pause property is a shorthand for setting pause-before and pause-after properties in speech synthesis. It defines the pause duration before and after an element when the content is read aloud by screen readers or speech synthesizers. Syntax selector { pause: time; /* or */ pause: pause-before pause-after; } Possible Values ValueDescription timeSpecifies the pause duration in seconds (s) or milliseconds (ms) pause-before pause-afterTwo values: first for pause before, second for pause after Example: Setting Pause Duration ...
Read MoreCSS border-bottom-right-radius property
The CSS border-bottom-right-radius property is used to set the radius of the bottom-right corner of an element. This property allows you to create rounded corners specifically for the bottom-right corner, independent of other corners. Syntax selector { border-bottom-right-radius: value; } Possible Values ValueDescription lengthSpecifies the radius in px, em, rem, etc. %Specifies the radius as a percentage of the element's dimensions initialSets the property to its default value inheritInherits the property from the parent element Example The following example demonstrates how to set a specific radius ...
Read MoreAdd special colored corner to body or text in CSS
CSS rounded corners are used to add special colored corners to body or text by using the border-radius property. This property allows you to create smooth, curved corners instead of the default sharp rectangular edges. Syntax selector { border-radius: value; } Possible Values ValueDescription lengthDefines the radius in px, em, rem, etc. %Defines the radius as a percentage of the element's dimensions initialSets the property to its default value inheritInherits the property from its parent element Example: Basic Rounded Corners The following example creates a colored ...
Read MoreCSS stress property
The CSS stress property is part of CSS Speech Module and controls the stress level in speech synthesis. It specifies the height of "local peaks" in the intonation contour of a voice, affecting how emphasized certain words or syllables sound when content is read aloud by screen readers or speech synthesis engines. Syntax selector { stress: value; } Possible Values ValueDescription numberA value between 0 and 100. Higher values create more stress/emphasis in speech inheritInherits the stress value from parent element Example: Different Stress Levels The ...
Read MoreCSS azimuth Property
The CSS azimuth property is part of the CSS Aural style sheets specification that defines where sound should come from horizontally when content is being read aloud by screen readers or speech synthesizers. Syntax selector { azimuth: value; } Possible Values ValueDescriptionEquivalent Angle anglePosition described in terms of an angle (-360deg to 360deg)Specified angle left-sideSound from left side270deg far-leftSound from far left300deg leftSound from left320deg center-leftSound from center-left340deg centerSound from center (default)0deg center-rightSound from center-right20deg rightSound from right40deg far-rightSound from far right60deg right-sideSound from right side90deg leftwardsMoves sound 20deg ...
Read MorePaged Media in CSS
Paged media differ from continuous media in that the content of the document is split into one or more discrete pages. Paged media includes paper, transparencies, pages that are displayed on computer screens, etc. The CSS2 defines a page box, a box of finite dimensions in which content is rendered. The page box is a rectangular region that contains two areas − The page area − The page area includes the boxes laid out on that page. The edges of the page area act as the initial containing block for a layout that ...
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 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 More