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 43 of 143
How to preserve the readability when font fallback occurs with CSS
The CSS font-size-adjust property helps preserve text readability when font fallback occurs. When the preferred font is unavailable and the browser falls back to another font, this property maintains consistent visual sizing by adjusting the font size based on the aspect ratio. Syntax selector { font-size-adjust: value; } Possible Values ValueDescription noneDefault. No adjustment applied numberAspect ratio value (typically 0.4 to 0.7) Example: Font Size Adjustment The following example demonstrates how font-size-adjust maintains consistent visual sizing when fonts change − ...
Read MoreUsage of var() CSS function
The var() function in CSS is used to insert the value of custom properties (CSS variables) into your stylesheet. It provides a way to reuse values throughout your CSS and create more maintainable code. Syntax var(--custom-property-name, fallback-value) Possible Values ParameterDescription --custom-property-nameThe name of the custom property (must start with two dashes) fallback-valueOptional value to use if the custom property is not defined Example: Basic Usage The following example demonstrates how to define custom properties and use them with the var() function − ...
Read MoreCSS 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 More