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 47 of 151
How to display columns and rows using named CSS grid items
To display columns and rows using named CSS grid items, use the grid-area property in combination with the grid-template-areas property. This approach allows you to create intuitive, readable layouts by assigning names to grid areas. Syntax .container { display: grid; grid-template-areas: "area1 area2 area3" "area4 area5 area6"; } .item { grid-area: area-name; } Example The following example demonstrates how to create a grid layout ...
Read MoreBlending 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 More