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 Samual Sam
Page 2 of 151
Blending mode of each background layer with CSS
The CSS background-blend-mode property sets the blending mode of each background layer. It defines how background images should blend with each other and with the background color. Syntax selector { background-blend-mode: blend-mode-value; } Possible Values ValueDescription normalDefault blending mode, no blending effect multiplyMultiplies colors, resulting in darker images screenInverts, multiplies, and inverts again, resulting in lighter images overlayCombines multiply and screen modes darkenKeeps the darkest color from each layer lightenKeeps the lightest color from each layer differenceSubtracts colors to create high contrast effects Example: Darken Blend Mode ...
Read MoreHow to set a default column size in CSS Grid
The CSS grid-auto-columns property is used to set a default size for columns in a CSS Grid container. This property defines the size of implicitly created grid columns that are not explicitly defined with grid-template-columns. Syntax selector { grid-auto-columns: value; } Possible Values ValueDescription autoDefault value. Column size is determined by content lengthFixed size in px, em, rem, etc. %Percentage of the container width frFractional unit representing a fraction of available space min-contentSize based on the smallest content max-contentSize based on the largest content Example The ...
Read MoreCSS grid-row Property
The CSS grid-row property controls the size and position of grid items along the row axis. It is a shorthand property that combines grid-row-start and grid-row-end to define which grid lines a grid item should span across rows. Syntax selector { grid-row: start-line / end-line; } Possible Values ValueDescription autoDefault value, the item spans one row line-numberSpecifies which line to start/end at (e.g., 1, 2, 3) span nSpans across n number of rows start / endDefines both start and end positions Example: Spanning Multiple Rows The ...
Read MoreSwing Animation Effect with CSS
The swing animation effect creates a pendulum-like motion that moves an element back and forth or from side to side while rotating around a fixed pivot point. This animation simulates the natural swinging motion of an object suspended from above. Syntax @keyframes swing { keyframe% { transform: rotate(angle); } } .element { animation: swing duration timing-function iteration-count; transform-origin: top center; } Example The following example demonstrates a swing animation applied to a colored box that rotates back and forth like a ...
Read MoreFlatten the color depth with CSS
The CSS Xray filter is an Internet Explorer-specific filter that flattens the color depth by creating a grayscale, inverted effect similar to an X-ray image. This filter removes color saturation and inverts the brightness values. Syntax selector { filter: Xray; } Parameter ParameterDescription XrayGrayscales and flattens the color depth, creating an inverted monochrome effect Note: The Xray filter is a legacy Internet Explorer filter and is not supported in modern browsers. Consider using CSS filters like grayscale() and invert() for cross-browser compatibility. Example: Applying ...
Read MoreAural Media CSS Properties
Aural CSS properties control how content is presented through speech synthesis for screen readers and assistive technologies. These properties are primarily used to improve accessibility for visually impaired users by defining spatial audio positioning, timing, voice characteristics, and sound effects. Syntax selector { property-name: value; } Spatial Positioning Properties Azimuth Property The azimuth property sets the horizontal position from where the sound should come − .left-audio { azimuth: left; ...
Read MoreCSS play-during property
The CSS play-during property specifies a sound to be played as a background while an element's content is spoken. This property is part of the CSS Speech Module and is primarily used for screen readers and other assistive technologies. Syntax selector { play-during: value; } Possible Values ValueDescription URIThe sound designated by this is played as a background while the element's content is spoken mixWhen present, this keyword means that the sound inherited from the parent element's play-during property continues to play and the sound designated by the ...
Read MoreFlip Out X Animation Effect with CSS
The CSS Flip Out X animation effect creates a 3D flipping motion where an element rotates around its horizontal (X) axis and fades out simultaneously. This animation is commonly used for exit transitions and interactive UI elements. Syntax @keyframes flipOutX { 0% { transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateX(90deg); ...
Read MoreFlash Animation Effect with CSS
The CSS flash animation effect creates a sudden brief burst of bright light by rapidly alternating an element's opacity between visible and invisible states. This creates a strobe-like flashing effect that draws attention to specific elements. Syntax @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { animation: flash duration timing-function ...
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 More