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 radhakrishna
Page 3 of 7
CSS 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 MoreRun Animation backward first and then forwards with CSS
The CSS animation-direction property controls the direction of animation playback. Using the alternate-reverse value, you can run an animation backwards first, then forwards, creating a smooth back-and-forth effect. Syntax selector { animation-direction: alternate-reverse; } Possible Values ValueDescription normalAnimation plays forward (default) reverseAnimation plays backward alternateAnimation alternates between forward and backward alternate-reverseAnimation starts backward, then alternates Example The following example demonstrates an animation that runs backward first, then forwards using alternate-reverse − .animated-box { ...
Read MoreUsage of CSS perspective property
The CSS perspective property defines the distance between the user and the z-axis of an element, creating a 3D perspective effect. It controls how 3D transformed elements appear by setting the viewing distance for the transformation. Syntax selector { perspective: value; } Possible Values ValueDescription lengthDistance in px, em, rem, etc. Lower values create more dramatic perspective noneNo perspective applied (default) Example: Comparing Different Perspective Values The following example demonstrates how different perspective values affect 3D rotated elements − ...
Read MoreHow to create fading effect with CSS
To create a fading effect with CSS, you can use various techniques including CSS gradients, opacity transitions, and animations. The most common approach is using linear gradients with rgba colors to achieve smooth fading transitions. Syntax selector { background: linear-gradient(direction, color-stop1, color-stop2); /* OR */ opacity: value; transition: opacity duration; } Method 1: Using Linear Gradient The following example creates a horizontal fading effect using a linear gradient from transparent to opaque − ...
Read MoreRole of CSS :optional Selector
The CSS :optional pseudo-class selector is used to target form elements that do not have the required attribute. This selector is particularly useful for styling optional form fields differently from required ones. Syntax :optional { /* CSS properties */ } /* Target specific optional elements */ input:optional { /* CSS properties */ } Example: Styling Optional Form Fields The following example demonstrates how to style optional input fields with a light blue background while required fields remain with default styling − ...
Read MoreStyle all elements with an invalid value with CSS
To style all elements with an invalid value, use the CSS :invalid pseudo-class selector. This selector targets form elements that contain invalid data based on their type, pattern, or required attributes. Syntax selector:invalid { property: value; } How It Works The :invalid pseudo-class automatically applies styles to form elements when their values don't meet validation criteria. This includes invalid email formats, numbers outside specified ranges, or empty required fields. Example: Invalid Email Input The following example styles an email input with a red background when the email format ...
Read MoreRole of CSS :checked Selector
The CSS :checked pseudo-class selector targets and styles input elements of type checkbox or radio button that are currently checked or selected. This selector allows you to apply specific styles to form controls based on their state. Syntax input:checked { /* CSS properties */ } Example 1: Styling Checked Checkboxes The following example demonstrates how to style checked checkboxes with enhanced size and background color − input[type="checkbox"]:checked { width: 25px; ...
Read MoreSet the height and width of an image using percent with CSS
To set the height and width of an image using percentage values, you can apply CSS properties that make the image responsive to its container's dimensions. This approach is useful for creating flexible layouts that adapt to different screen sizes. Syntax img { width: percentage; height: percentage; } Example The following example demonstrates how to set an image's dimensions using percentage values − .container { width: 400px; ...
Read MoreSet Responsive Font Size using CSS
Setting responsive font size in CSS ensures text adapts to different screen sizes automatically. The vw (viewport width) unit is the most common approach, making text scale proportionally with the browser width. Syntax selector { font-size: value vw; } Viewport Units for Responsive Font Size UnitDescription vw1% of viewport width vh1% of viewport height vmin1% of smaller viewport dimension vmax1% of larger viewport dimension Example: Basic Viewport Width Font Size The following example demonstrates responsive font sizing using the vw unit − ...
Read MoreCSS3 Multi-Column Property
CSS3 multi-column properties allow you to arrange text in a newspaper-style layout with multiple columns. This feature is useful for creating magazine-style layouts and improving text readability in wide containers. Syntax selector { column-count: number; column-gap: length; column-rule: width style color; column-span: value; } Multi-Column Properties PropertyDescription column-countSpecifies the number of columns to divide content into column-gapSets the gap between columns column-ruleShorthand for setting column rule width, style, and color column-rule-widthSpecifies the width of the rule between ...
Read More