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 Arjun Thakur
Page 22 of 75
Perform Animation on CSS perspective property
The CSS perspective property defines how far an element is placed from the view, giving it a 3D effect. When animated, it creates dynamic depth changes that make 3D transformations more or less pronounced over time. Syntax selector { perspective: value; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { perspective: initial-value; } to { perspective: final-value; } } Example The following example animates the perspective property to create a dynamic 3D effect on a ...
Read MorePerform Animation on CSS margin-top
CSS margin-top animations allow you to create smooth transitions by changing an element's top margin over time. This is commonly used for creating sliding effects and dynamic spacing animations. Syntax @keyframes animation-name { from { margin-top: initial-value; } to { margin-top: final-value; } } selector { animation: animation-name duration timing-function iteration-count; } Example: Basic Margin-Top Animation The following example demonstrates a smooth margin-top animation that moves an element down and back up − ...
Read MoreCSS rest-before Speech Media property
The CSS rest-before property is used in speech media to set a pause or rest period before speaking the content of an element. This property is part of the CSS Speech Module and helps control the timing and flow of synthesized speech. Syntax selector { rest-before: value; } Possible Values ValueDescription timeSpecifies the pause duration in seconds (s) or milliseconds (ms) noneNo pause before the element (default) x-weakVery short pause weakShort pause mediumMedium pause strongLong pause x-strongVery long pause Example: Setting Rest Before Elements The following ...
Read MorePerform Animation on CSS max-width
The CSS max-width property can be animated to create dynamic width transitions. This is particularly useful for creating responsive layouts, expandable containers, or smooth resizing effects. Syntax selector { max-width: value; animation: animation-name duration; } @keyframes animation-name { percentage { max-width: value; } } Example: Basic max-width Animation The following example demonstrates a smooth transition of the max-width property from its initial state to 250px − ...
Read MoreUsage of CSS grid-auto-columns property
The CSS grid-auto-columns property sets the default size for columns that are created implicitly in a grid container. This property is useful when grid items are placed outside the explicitly defined grid tracks. Syntax .container { grid-auto-columns: value; } Possible Values ValueDescription lengthFixed size using px, em, rem, etc. %Percentage of the container width frFractional unit for flexible sizing autoSize based on content (default) min-contentMinimum size needed for content max-contentMaximum size needed for content Example: Fixed Column Size The following example demonstrates grid-auto-columns with a fixed ...
Read MoreAlign flex items at the beginning of the container with CSS
The CSS justify-content property with the flex-start value is used to align flex items at the beginning of the flex container along the main axis. This is the default behavior for flex containers, positioning items at the start of the container. Syntax .container { display: flex; justify-content: flex-start; } Example The following example demonstrates how to align flex items at the beginning of the container using justify-content: flex-start − .mycontainer { ...
Read MoreAnimate border-left property with CSS
The CSS border-left property can be animated to create smooth transitions between different border styles, widths, and colors. This animation technique is useful for creating interactive hover effects or drawing attention to specific elements. Syntax @keyframes animationName { from { border-left: initial-value; } to { border-left: final-value; } } selector { animation: animationName duration timing-function iteration-count; } Example: Animating Border Left Width and Color The following example demonstrates how to animate the border-left property by changing its width and color − ...
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 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 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