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 karthikeya Boyini
Page 48 of 142
CSS all Property
The CSS all property is a shorthand property that resets all CSS properties to their initial, inherited, or unset values. It provides a convenient way to clear all styling from an element and start with a clean slate. Syntax selector { all: value; } Possible Values ValueDescription initialResets all properties to their initial values inheritSets all properties to inherit from parent element unsetResets properties to inherit if inheritable, otherwise to initial revertResets properties to browser default values Example: Using all: inherit The following example demonstrates how ...
Read MorePerform Animation on CSS border-bottom-left-radius property
The CSS border-bottom-left-radius property can be animated to create smooth transitions between different radius values. This is useful for creating dynamic corner effects and interactive UI elements. Syntax selector { border-bottom-left-radius: value; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { border-bottom-left-radius: initial-value; } to { border-bottom-left-radius: final-value; } } Example: Animating Border Bottom Left Radius The following example demonstrates how to animate the border-bottom-left-radius property from 150px to 50px and back − ...
Read MoreAnimate box-shadow CSS property
The CSS box-shadow property can be animated to create dynamic shadow effects that enhance the visual appeal of elements. This animation smoothly transitions between different shadow states, creating engaging hover effects, floating animations, or attention-grabbing elements. Syntax selector { box-shadow: h-offset v-offset blur spread color; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { box-shadow: initial-shadow; } to { box-shadow: final-shadow; } } Example: Animated Box Shadow The following example demonstrates animating the box-shadow property ...
Read MoreCSS volume Property
The CSS volume property is part of the speech synthesis specification and controls the median volume of synthesized speech. This property is primarily used for accessibility features and speech-enabled interfaces. Syntax selector { volume: value; } Possible Values ValueDescription numberAny number between 0 and 100. 0 represents minimum audible volume, 100 represents maximum comfortable level percentageValues calculated relative to the inherited value, clipped to range 0% to 100% silentNo sound at all (different from 0) x-softSame as 0 softSame as 25 mediumSame as 50 (default value) loudSame as 75 ...
Read MoreHinge Animation Effect with CSS
The CSS hinge animation effect simulates a door-like swinging motion that ends with the element falling off the screen. This animation is commonly used for exit effects or removing elements with a realistic physics-based movement. Syntax .element { animation-name: hinge; animation-duration: 2s; animation-fill-mode: both; } @keyframes hinge { /* Animation keyframes */ } How Hinge Animation Works The hinge animation consists of three main phases − Swing phase: Element rotates back and forth around its ...
Read MoreWave effect with CSS?
The CSS wave effect is a legacy filter that was used to create sine wave distortions on elements, giving them a wavy appearance. This filter was primarily supported in Internet Explorer and is now obsolete. Modern CSS uses alternative techniques like transforms and animations to achieve wave effects. 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 ...
Read MoreCSS cue property
The CSS cue property is a shorthand for setting cue-before and cue-after properties. It allows you to specify audio cues that play before and after an element's content when using speech synthesis or screen readers. Syntax selector { cue: cue-before cue-after; /* or */ cue: single-value; } Possible Values ValueDescription url()Specifies an audio file to play as a cue noneNo audio cue is played (default) inheritInherits the value from parent element Example: Setting Audio Cues The following example ...
Read MoreCSS 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 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 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 More