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 555 of 652
CSS elevation Property
The elevation property in CSS sets the vertical position of a sound source in 3D audio space. This property is part of the aural stylesheet properties designed for speech synthesizers and audio browsers. Syntax selector { elevation: value; } Possible Values ValueDescription angleSpecifies elevation as an angle between -90deg and 90deg belowSame as -90deg (directly below the listener) levelSame as 0deg (on the forward horizon) aboveSame as 90deg (directly overhead) higherAdds 10 degrees to the current elevation lowerSubtracts 10 degrees from the current elevation Example The ...
Read MoreCSS speak property
The CSS speak property controls how text content is rendered by screen readers and other assistive technologies. It determines whether text should be spoken aloud and how it should be pronounced when read by speech synthesis software. Syntax selector { speak: value; } Possible Values ValueDescription noneSuppresses aural rendering so that the element requires no time to render normalUses language-dependent pronunciation rules for rendering an element and its children spell-outSpells the text one letter at a time Example: Different Speak Values The following example demonstrates different ...
Read MoreFade Out Right Big Animation Effect with CSS
Animations never fail to attract people. When you present them with a painting and a video, they will always focus on the moving image since it is more visually appealing. The fade out right big animation creates a dramatic exit effect where elements fade away while sliding to the right with increased scale, adding visual impact to your web interfaces. Syntax @keyframes fadeOutRightBig { from { opacity: 1; transform: translateX(0); } ...
Read MoreFade Down Big Animation Effect with CSS
The CSS Fade Down Big animation effect creates a dramatic exit animation where an element fades out while moving downward by a large distance. This animation is commonly used for dramatic page transitions or removing elements from view. Syntax @keyframes fadeOutDownBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; ...
Read MoreBounce Out Right Animation Effect with CSS
The CSS Bounce Out Right animation effect creates a bouncing motion where an element slides to the right while fading out. The animation starts with a slight leftward movement before bouncing out to the right side of the screen. Syntax @keyframes bounceOutRight { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(-20px); } 100% { opacity: 0; transform: translateX(2000px); } } .element { animation: bounceOutRight duration timing-function; } Example The following example demonstrates the bounce ...
Read MoreCSS background-clip property
The CSS background-clip property is used to define the painting area of the background. It controls how far the background extends within an element. Syntax selector { background-clip: value; } Possible Values ValueDescription border-boxBackground extends to the outer edge of the border (default) padding-boxBackground extends to the outer edge of the padding content-boxBackground extends only to the edge of the content area Example 1: Using padding-box The following example demonstrates background-clip: padding-box where the background does not extend under the border − ...
Read MoreBounce Out Left Animation Effect with CSS
The CSS bounce out left animation effect makes an element bounce slightly to the right before sliding out to the left and fading away. This animation creates a dynamic exit effect that's commonly used for removing items or transitioning elements off-screen. Syntax selector { animation-name: bounceOutLeft; animation-duration: duration; animation-fill-mode: both; } @keyframes bounceOutLeft { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(20px); } 100% { opacity: 0; transform: translateX(-2000px); ...
Read MoreBounce In Right Animation Effect with CSS
The CSS Bounce In Right animation effect creates an element that slides in from the right side of the screen with a bouncing motion. This animation starts with the element positioned far to the right and invisible, then bounces it into its final position. Syntax .element { animation-name: bounceInRight; animation-duration: duration; animation-fill-mode: both; } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); ...
Read MoreCSS background-origin property
The CSS background-origin property specifies the positioning area of background images. It determines whether the background image starts from the border box, padding box, or content box of an element. Syntax selector { background-origin: value; } Possible Values ValueDescription padding-boxBackground starts from the padding edge (default) border-boxBackground starts from the border edge content-boxBackground starts from the content edge Example: Content Box Origin The following example demonstrates the background-origin: content-box property − .demo { ...
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 More