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
CSS Articles
Page 120 of 130
Bounce 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 MoreAnimation Effects in CSS
The animation is the process of creating motion effects and changing the appearance of elements. CSS supports different animation effects to create smooth transitions and dynamic visual changes on web pages. CSS animations use a concept called keyframes to control the intermediate steps during the animation sequence. Keyframes define what styles the element will have at certain times during the animation. Syntax @keyframes animation-name { from { /* starting styles */ } to { /* ending styles */ } } /* Or with percentages */ @keyframes animation-name ...
Read MoreCSS pause-before property
The CSS pause-before property specifies a pause to be observed before speaking an element's content in speech synthesis. This property is part of the CSS Speech Module and is used to control timing in text-to-speech applications. Syntax selector { pause-before: value; } Possible Values ValueDescription timeExpresses the pause in absolute time units (seconds and milliseconds) percentageRefers to the inverse of the value of the speech-rate property noneNo pause before the element (default) inheritInherits the value from the parent element Example 1: Using Time Values The following ...
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 MoreSet all the background image properties in one section with CSS
The CSS background property is used to set all the background image properties in one section. This shorthand property allows you to define multiple background-related properties simultaneously, including image, position, repeat, and attachment. Syntax selector { background: color image repeat attachment position; } Possible Values PropertyDescription colorBackground color (optional) imageBackground image URL repeatHow the image repeats (repeat, no-repeat, repeat-x, repeat-y) attachmentImage attachment (scroll, fixed) positionImage position (top, center, bottom, left, right) Example The following example demonstrates setting multiple background properties using the shorthand − ...
Read MoreGive the object a sine wave distortion to make it look wave with CSS
The CSS wave effect uses Internet Explorer's proprietary filter to give objects a sine wave distortion, making them appear wavy. This filter was specific to older IE browsers and is not supported in modern web standards. Syntax selector { filter: Wave(Add=value, Freq=value, LightStrength=value, Phase=value, Strength=value); } Parameters ParameterDescription AddA value of 1 adds the original image to the waved image, 0 does not FreqThe number of waves LightStrengthThe strength of the light on the wave (from 0 to 100) PhaseAt what degree the sine wave should start (from 0 ...
Read MoreCSS border-bottom-left-radius property
The CSS border-bottom-left-radius property is used to set the radius of the bottom-left corner of an element's border. This property allows you to create rounded corners specifically for the bottom-left corner while keeping other corners sharp or applying different radii. Syntax selector { border-bottom-left-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 (0) inheritInherits the value from the parent element Example: Setting Bottom-Left Corner Radius ...
Read MoreFade Out Right Animation Effect with CSS
The CSS Fade Out Right Animation Effect creates a smooth transition where an element gradually becomes transparent while moving to the right until it completely disappears. This effect combines opacity changes with horizontal translation using CSS keyframes. Syntax @keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: ...
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 MoreCSS border-top-right-radius property
The CSS border-top-right-radius property is used to set the radius of the top-right corner of an element. This property allows you to create rounded corners specifically for the top-right corner, giving you precise control over individual corner styling. Syntax selector { border-top-right-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 Top-Right Corner Radius The following ...
Read More