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 97 of 130
Style input type button with CSS
The input type button can be a submit button or reset button. With CSS, we can style any button on a web page to enhance its appearance and user experience. Syntax input[type=button] { property: value; } Example 1: Basic Button Styling The following example demonstrates how to style an input type button with background color, padding, and hover effects − input[type=button] { background-color: #ff6600; ...
Read MoreShorthand property to set all the animation properties with CSS
The CSS animation property is a shorthand that allows you to set multiple animation properties in a single declaration. It combines animation duration, name, timing function, delay, iteration count, direction, fill mode, and play state into one convenient property. Syntax selector { animation: duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name; } Possible Values PropertyDescriptionDefault animation-nameSpecifies the name of the @keyframes rulenone animation-durationSpecifies how long the animation takes0s animation-timing-functionSpecifies the speed curveease animation-delaySpecifies when the animation starts0s animation-iteration-countSpecifies how many times to ...
Read MoreCSS animation-timing-function property
The CSS animation-timing-function property specifies the speed curve of an animation. It defines how an animation progresses during its duration, controlling whether the animation starts slow and speeds up, starts fast and slows down, or maintains a constant speed. Syntax animation-timing-function: value; Possible Values ValueDescription easeSlow start, fast middle, slow end (default) ease-inSlow start, then fast ease-outFast start, then slow ease-in-outSlow start, fast middle, slow end linearConstant speed throughout cubic-bezier(x1, y1, x2, y2)Custom timing function Example: Different Timing Functions The following example demonstrates various timing functions applied to animated boxes ...
Read MoreCSS animation-play-state property
The CSS animation-play-state property controls whether an animation is currently running or paused. This property is particularly useful for creating interactive animations that can be controlled dynamically. Syntax selector { animation-play-state: running | paused; } Possible Values ValueDescription runningThe animation is currently running (default value) pausedThe animation is paused Example: Paused Animation The following example shows an animation that is set to paused state − .box { width: ...
Read MoreCSS animation-name property
The CSS animation-name property specifies the name of the @keyframes animation to apply to an element. This property links an element to its corresponding keyframe animation definition. Syntax selector { animation-name: keyframe-name; } Possible Values ValueDescription keyframe-nameName of the @keyframes animation to apply noneNo animation is applied (default) Example: Color Animation The following example demonstrates how to use the animation-name property to apply a color transition animation − div { ...
Read MoreCSS animation-iteration-count property
The CSS animation-iteration-count property specifies the number of times an animation should be played. By default, animations run once, but you can control how many times they repeat. Syntax selector { animation-iteration-count: value; } Possible Values ValueDescription numberSpecifies how many times the animation should be played (e.g., 1, 2, 3) infiniteThe animation will repeat forever Example: Finite Iteration Count The following example shows an animation that runs exactly 3 times − .box { ...
Read MoreCSS border-box Value
The CSS background-origin property with the border-box value specifies that the background image should start from the upper left corner of the border area. This allows the background to extend under the border, creating a unique visual effect where the background is visible through transparent or partially transparent borders. Syntax selector { background-origin: border-box; } Example: Comparing Background Origin Values The following example demonstrates the difference between padding-box, border-box, and content-box values − .demo-box { ...
Read MoreSelects every element whose href attribute value contains the substring "java" with CSS
The CSS [attribute*="value"] selector is used to select elements whose attribute value contains a specified substring. This attribute selector is particularly useful when you need to target elements based on partial attribute matches. Syntax [attribute*="value"] { /* CSS properties */ } Where attribute is the HTML attribute name and value is the substring to search for within that attribute's value. Example: Selecting Links Containing "java" The following example demonstrates how to select all anchor elements whose href attribute contains the substring "java" − ...
Read MoreWith CSS set the element to retain the style values that are set by the last keyframe
The CSS animation-fill-mode property with the forwards value is used to retain the style values that are set by the last keyframe when the animation completes. This prevents the element from reverting to its original state after the animation ends. Syntax selector { animation-fill-mode: forwards; } Example The following example demonstrates how an element retains the final animation state using animation-fill-mode: forwards − .animated-box { ...
Read MoreExtend the animation properties in both directions with CSS
The CSS animation-fill-mode property with the value both extends animation properties in both directions − applying styles from the first keyframe before the animation starts and retaining styles from the last keyframe after the animation completes. Syntax selector { animation-fill-mode: both; } How it Works When animation-fill-mode: both is applied − Before animation: The element adopts styles from the first keyframe (0% or from) After animation: The element retains styles from the last keyframe (100% or to) Example The following example demonstrates extending animation properties ...
Read More