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
Web Development Articles
Page 636 of 801
Create rounded image with CSS
Creating rounded images in CSS is achieved using the border-radius property. This property allows you to round the corners of any element, including images, making them appear circular or with softly rounded edges. This technique is commonly used for profile pictures, thumbnails, and decorative elements. Syntax img { border-radius: value; } Possible Values ValueDescription 50%Creates a perfect circle (most common for rounded images) lengthSpecific radius in px, em, rem, etc. %Percentage of the element's dimensions Example 1: Circular Image The following example creates a perfectly circular ...
Read MoreHow to select elements with an attribute value containing a specified word with CSS?
The CSS [attribute~="value"] selector allows you to select elements where a specific attribute contains a particular word as part of a space-separated list of values. This is particularly useful when dealing with attributes like class, alt, or custom data attributes that may contain multiple words. Syntax [attribute~="word"] { property: value; } How It Works The ~= operator matches elements where the specified attribute contains the exact word as a complete, space-separated token. For example, if an element has alt="Online Tutorials Library", it will match [alt~="Tutorials"] but not [alt~="Tutorial"]. Example ...
Read MoreCSS animation-direction property
The CSS animation-direction property is used to set whether an animation should be played forwards, backwards, or in alternate cycles. This property allows you to control the playback direction of keyframe animations. Syntax selector { animation-direction: value; } Possible Values ValueDescription normalAnimation plays forward (default) reverseAnimation plays backward alternateAnimation plays forward, then backward alternate-reverseAnimation plays backward, then forward Example: Reverse Animation The following example demonstrates the reverse value, which plays the animation backward − div { ...
Read MoreSet top tooltip with CSS
To set a top tooltip with CSS, you position the tooltip above the element using the bottom property along with position: absolute. The tooltip appears above the trigger element when hovered. Syntax .tooltip .tooltip-text { position: absolute; bottom: 100%; visibility: hidden; } .tooltip:hover .tooltip-text { visibility: visible; } Example The following example creates a tooltip that appears at the top when you hover over the text − ...
Read MoreUsage of CSS transition-timing-function property
The CSS transition-timing-function property controls the speed curve of a transition effect. It determines how the transition progresses over time, allowing you to create smooth, natural-looking animations or more dramatic effects. Syntax selector { transition-timing-function: value; } Possible Values ValueDescription linearConstant speed throughout the transition easeDefault. Slow start, fast middle, slow end ease-inSlow start, gradually speeds up ease-outFast start, gradually slows down ease-in-outSlow start and end, fast middle cubic-bezier()Custom timing function using cubic bezier curve Example: Comparing Timing Functions The following example demonstrates different timing functions ...
Read MoreSet right tooltip with CSS
To create a right tooltip in CSS, you position the tooltip to appear on the right side of an element. The key is using the left property with a value of 100% to push the tooltip completely to the right of its parent element. Syntax .tooltip .tooltiptext { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); } Example The following example creates a tooltip that appears on the right side when you hover over the text − ...
Read MoreHow to position tooltips correctly with CSS
CSS tooltip positioning allows you to control exactly where tooltips appear relative to their trigger elements. By using positioning properties like top, right, bottom, and left, you can create tooltips that display in any direction. Syntax .tooltip { position: relative; } .tooltip .tooltip-text { position: absolute; top: value; left: value; right: value; bottom: value; } Method 1: Right-Positioned Tooltip The following example positions the tooltip to the right of ...
Read MoreCreate 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 More