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 8 of 24
Rotate In Animation Effect with CSS
The CSS rotate in animation effect creates a smooth spinning motion that rotates an element into view from a specified angle. This animation is commonly used for entrance effects where elements appear to spin into position while fading in. Syntax @keyframes rotateIn { 0% { transform: rotate(-200deg); opacity: 0; } 100% { transform: rotate(0deg); ...
Read MoreFade Out Up Big Animation Effect with CSS
The CSS Fade Out Up Big animation creates a dramatic exit effect where an element fades out while moving upward by a large distance. This animation is perfect for removing elements with an impactful visual transition. Syntax @keyframes fadeOutUpBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2000px); ...
Read MoreBounce 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 More