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
Front End Technology Articles
Page 520 of 652
Animate CSS border-top property
The CSS border-top property can be animated to create dynamic visual effects. You can animate the border width, color, and style using CSS animations and transitions. Syntax selector { border-top: width style color; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { border-top: initial-value; } to { border-top: final-value; } } Example: Animating Border Top Width and Color The following example demonstrates how to animate the border-top property by changing its width and color − ...
Read MoreDefine colors using the Red-Green-Blue-Alpha model (RGBA) with CSS
CSS provides the RGBA color model to define colors using Red, Green, Blue values along with an Alpha channel for transparency. The rgba() function allows you to specify colors with precise opacity control, making it ideal for creating semi-transparent elements and layered designs. Syntax selector { color: rgba(red, green, blue, alpha); background-color: rgba(red, green, blue, alpha); } Possible Values ParameterRangeDescription red0-255Red color intensity green0-255Green color intensity blue0-255Blue color intensity alpha0-1Opacity level (0 = transparent, 1 = opaque) Example: RGBA Colors with Transparency ...
Read MoreReturn the value of an attribute of the selected element using CSS
The attr() CSS function returns the value of an attribute of the selected element and is commonly used with the content property in pseudo-elements to display attribute values as text content. Syntax selector::before, selector::after { content: attr(attribute-name); } Example: Displaying Link URLs The following example uses the attr() function to display the URL of a link after the link text − a::after { content: " (" attr(href) ")"; ...
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 MorePerform Animation on CSS font-size property
The CSS font-size property can be animated to create text that grows or shrinks smoothly over time. This creates engaging visual effects for headings, hover states, or attention-grabbing elements. Syntax @keyframes animation-name { keyframe-selector { font-size: value; } } selector { animation: animation-name duration timing-function iteration-count; } Example: Basic Font Size Animation The following example demonstrates animating the font-size property from its default size to 30px − ...
Read MoreUsage of attr() CSS function
The attr() CSS function returns the value of an attribute of the selected element. It's commonly used with the content property in ::before and ::after pseudo-elements to display attribute values dynamically. Syntax attr(attribute-name) Parameters ParameterDescription attribute-nameThe name of the HTML attribute whose value you want to retrieve Example 1: Displaying href Attribute The following example displays the URL next to each link using the attr() function − a::before { content: " (" ...
Read MoreHow 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 MoreAnimate bottom CSS property
The CSS bottom property can be animated to create smooth transitions when changing an element's position from the bottom edge of its containing block. This is particularly useful for creating sliding effects and dynamic positioning animations. Syntax selector { animation: animation-name duration timing-function iteration-count; bottom: initial-value; position: absolute | relative | fixed; } @keyframes animation-name { percentage { bottom: target-value; } } Example: Animating Bottom Property ...
Read MoreHow to specify the size of the gap between rows in CSS Grid
Use the grid-row-gap property to set the size of the gap between rows in CSS Grid. This property controls the vertical spacing between grid items, making your layouts more visually appealing and well-structured. Syntax selector { grid-row-gap: value; } Possible Values ValueDescription lengthDefines the gap size in px, em, rem, etc. %Defines the gap as a percentage of the container normalDefault value, typically 0 Example The following example demonstrates a CSS Grid layout with a 50px gap between rows − ...
Read MoreSet how auto-placed items are inserted in the CSS grid
The CSS grid-auto-flow property controls how auto-placed grid items are inserted in the grid container. It determines whether items flow into rows or columns and how they fill available spaces. Syntax selector { grid-auto-flow: value; } Possible Values ValueDescription rowItems are placed by filling each row (default) columnItems are placed by filling each column denseItems fill holes earlier in the grid row denseCombines row flow with dense packing column denseCombines column flow with dense packing Example: Column Flow The following example demonstrates items flowing into columns ...
Read More