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
CSS Articles
Page 85 of 130
Perform Animation on CSS border-bottom-right-radius property
The CSS border-bottom-right-radius property creates rounded corners on the bottom-right of an element. You can animate this property to create smooth transitions between different radius values, providing dynamic visual effects. Syntax selector { border-bottom-right-radius: value; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { border-bottom-right-radius: initial-value; } to { border-bottom-right-radius: final-value; } } Example The following example demonstrates how to animate the border-bottom-right-radius property − ...
Read MoreUsage of CSS grid-row-end property
The CSS grid-row-end property defines where a grid item should end within the CSS Grid layout. It specifies the end position of a grid item by referencing specific grid lines or spanning a certain number of rows. Syntax selector { grid-row-end: value; } Possible Values ValueDescription autoDefault value. The item spans one row line-numberSpecifies which row line to end at span nSpecifies how many rows the item should span Example: Using span with grid-row-end The following example demonstrates how grid-row-end: span 2 makes an item span ...
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 CSS border-top-left-radius property
The CSS border-top-left-radius property can be animated to create smooth transitions or dynamic effects. This property controls the rounding of the top-left corner of an element. Syntax @keyframes animationName { from { border-top-left-radius: initial-value; } to { border-top-left-radius: final-value; } } selector { animation: animationName duration timing-function iteration-count; } Example: Animating border-top-left-radius on a Box The following ...
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 MoreDisplay the flex lines in the center of the container with CSS
The CSS align-content property is used to control how flex lines are distributed along the cross-axis in a flex container. When set to center, it positions all flex lines in the center of the container. Syntax selector { align-content: center; } Example The following example demonstrates how to center flex lines within a container − .mycontainer { display: flex; height: 300px; ...
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 MoreUsage of CSS grid property
The CSS grid property is a shorthand property that allows you to set multiple grid-related properties in a single declaration. It can be used to define grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow properties all at once. Syntax selector { grid: / ; /* or */ grid: ; /* or */ grid: / ; } Example: Basic Grid Layout The following example creates a grid with one row of 100px height ...
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 MorePerform Animation on CSS clip property
The CSS clip property can be animated to create dynamic visual effects by changing the visible portion of an absolutely positioned element over time. This allows you to create revealing, masking, or cropping animations. Syntax selector { clip: rect(top, right, bottom, left); animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { percentage { clip: rect(top, right, bottom, left); } } Important Notes The clip property only works on absolutely ...
Read More