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 96 of 130
Create tooltips with CSS
A tooltip is a small popup that appears when a user hovers over an element, providing additional information or context. CSS tooltips are lightweight, accessible, and don't require JavaScript. Syntax .tooltip { position: relative; } .tooltip .tooltiptext { visibility: hidden; position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } Example: Basic Tooltip The following example creates a simple tooltip that appears on hover − ...
Read MoreSpecify the speed curve of the animation with CSS
The CSS animation-timing-function property specifies the speed curve of an animation, controlling how the animation progresses over time. This property determines whether the animation starts slow and speeds up, starts fast and slows down, or maintains a constant speed. Syntax selector { animation-timing-function: value; } Possible Values ValueDescription easeDefault. Slow start, fast middle, slow end ease-inSlow start, then speeds up ease-outFast start, then slows down ease-in-outSlow start and end, fast middle linearConstant speed throughout Example The following example demonstrates different timing functions applied to animated boxes ...
Read MoreSet a CSS style for the element when the animation is not playing
The CSS animation-fill-mode property controls how an element's styles are applied before and after an animation runs. This property determines which styles are applied when the animation is not playing. Syntax selector { animation-fill-mode: value; } Possible Values ValueDescription noneNo styles are applied before or after animation (default) forwardsKeeps the final keyframe styles after animation ends backwardsApplies the first keyframe styles before animation starts bothApplies both forwards and backwards fill modes Example: Using Backwards Fill Mode The following example demonstrates how animation-fill-mode: backwards applies the starting ...
Read MoreSelects all elements with CSS
To select all elements on a webpage, use the universal selector (*) in CSS. This selector applies styles to every HTML element within the document, making it useful for resetting default styles or applying global formatting. Syntax * { property: value; } Example The following example demonstrates how to apply styles to all elements using the universal selector − * { color: blue; background-color: ...
Read MoreSelect elements whose attribute value begins with a specified value with CSS
The CSS attribute selector [attribute^="value"] is used to select elements whose attribute value begins with a specified value. This selector is particularly useful when you want to target elements with attributes that start with a common prefix. Syntax [attribute^="value"] { /* CSS properties */ } Example: Selecting Images with Alt Text Starting with "Tutor" The following example selects all images whose alt attribute value begins with "Tutor" and applies a blue border − [alt^="Tutor"] { ...
Read MoreSelects the element with id="tutorials" with CSS
The CSS ID selector uses the hash symbol (#) followed by an ID name to select a specific element. Since IDs must be unique within a page, this selector targets exactly one element. Syntax #id-name { property: value; } Example The following example selects the element with id="tutorials" and applies a red border − #tutorials { border: 3px solid red; padding: 15px; ...
Read MoreSet animation with a slow end using CSS
The CSS animation-timing-function property with the ease-out value is used to create animations that start fast and slow down towards the end. This creates a natural deceleration effect, making animations feel more realistic and smooth. Syntax selector { animation-timing-function: ease-out; } Possible Values ValueDescription ease-outAnimation starts fast and slows down at the end ease-inAnimation starts slow and speeds up ease-in-outAnimation starts slow, speeds up, then slows down linearAnimation maintains constant speed Example The following example demonstrates an animation with a slow end using ease-out timing function ...
Read MoreSelects all elements that are placed immediately after elements with CSS
The CSS adjacent sibling selector (element+element) selects elements that are placed immediately after a specified element. This selector only targets the first element that directly follows the specified element at the same level in the DOM hierarchy. Syntax element1 + element2 { /* CSS properties */ } Where element1 is the preceding element and element2 is the element that immediately follows it. Example The following example demonstrates how to style paragraphs that immediately follow div elements − div + ...
Read MoreSet an animation with the same speed from start to end with CSS
The CSS animation-timing-function property with the linear value creates animations that maintain the same speed from start to end, without any acceleration or deceleration. Syntax selector { animation-timing-function: linear; } Example: Linear Animation The following example demonstrates a box moving horizontally with constant speed − .container { position: relative; height: 150px; background-color: #f0f0f0; ...
Read MoreSet a delay for the start of an animation with CSS
The CSS animation-delay property is used to set a delay before an animation starts. This property allows you to control when an animation begins, creating staggered effects or waiting for user interactions. Syntax selector { animation-delay: time; } Possible Values ValueDescription timeSpecifies the delay time in seconds (s) or milliseconds (ms) 0Default value - no delay Negative valuesAnimation starts immediately but partway through the animation cycle Example: Basic Animation Delay The following example demonstrates a 2-second delay before the animation starts − ...
Read More