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
Front End Technology Articles
Page 531 of 652
Usage of transform property with CSS
The CSS transform property is used to apply 2D or 3D transformations to an element. This property allows you to rotate, scale, translate (move), or skew elements without affecting the document flow. Syntax selector { transform: transform-function(value); } Common Transform Functions FunctionDescriptionExample rotate()Rotates element by specified anglerotate(45deg) scale()Scales element sizescale(1.5) translate()Moves element from its positiontranslate(50px, 100px) skew()Skews element along X and Y axesskew(20deg, 10deg) Example 1: Rotation Transform The following example demonstrates how to rotate an element by 10 degrees − ...
Read MoreSelects every element that are preceded by a element with CSS
The CSS general sibling selector (~) selects elements that are siblings and come after a specified element. The syntax element1 ~ element2 targets all element2 elements that are preceded by element1 at the same level in the HTML structure. Syntax element1 ~ element2 { /* CSS properties */ } Example: Selecting Lists After Paragraphs The following example selects all elements that are preceded by a element − p ~ ul ...
Read MoreSelects all elements inside elements with CSS
The descendant selector (space-separated) in CSS allows you to select all elements of a specific type that are nested inside another element, regardless of how deeply nested they are. Syntax ancestor descendant { property: value; } Where ancestor is the parent element and descendant is the child element you want to style. Example The following example demonstrates how to style all elements that are inside elements − div p { ...
Read MoreSelects all elements and all elements with CSS
The CSS comma selector allows you to apply the same styles to multiple elements by separating them with commas. This is useful when you want different element types to share the same styling rules. Syntax selector1, selector2, selector3 { property: value; } Example: Styling Multiple Elements The following example applies the same color and background styling to both and elements − div, p { color: blue; ...
Read MoreArrow to the left of the tooltip with CSS
Creating an arrow pointing to the left of a tooltip helps users understand that the tooltip relates to the element they're hovering over. This arrow is created using CSS pseudo-elements and border properties to form a triangular shape. Syntax .tooltip .tooltip-text::after { content: ""; position: absolute; border-width: size; border-style: solid; border-color: transparent color transparent transparent; } Example The following example creates a tooltip with an arrow pointing to the left − ...
Read MoreCreate 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 More