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 654 of 801
CSS3 Radial Gradients
CSS3 radial gradients create smooth color transitions that emanate outward from a center point, forming circular or elliptical patterns. Unlike linear gradients that flow in straight lines, radial gradients spread from the center to the edges. Syntax selector { background: radial-gradient(shape size at position, color-stop1, color-stop2, ...); } Possible Values ParameterDescription shapecircle or ellipse (default: ellipse) sizeclosest-side, farthest-side, closest-corner, farthest-corner positioncenter, top, bottom, left, right, or specific coordinates color-stopColor and optional position (percentage or length) Example: Basic Radial Gradient The following example creates a simple radial ...
Read MoreCSS3 Linear gradients
CSS3 linear gradients allow you to create smooth transitions between two or more colors in a linear direction. Instead of using solid background colors, you can create beautiful gradients that transition from one color to another along a straight line. Syntax selector { background: linear-gradient(direction, color1, color2, ...); } Possible Values ParameterDescription directionOptional. Defines the direction (to top, to right, 45deg, etc.) color1, color2, ...Two or more colors for the gradient transition Example: Basic Linear Gradient The following example creates a linear gradient from pink to ...
Read MoreCSS3 Opacity property
The CSS3 opacity property controls the transparency level of an element. It allows you to make elements partially or completely transparent, where a value of 1 means completely opaque and 0 means completely transparent. Syntax selector { opacity: value; } Possible Values ValueDescription 0.0Completely transparent (invisible) 0.550% transparent 1.0Completely opaque (default) Example: Different Opacity Levels The following example demonstrates different opacity values applied to colored elements − .box { ...
Read MoreRotate transform the element by using x-axis with CSS3
The CSS rotateX() transform function rotates an element around its X-axis in 3D space. This creates a perspective effect where the element appears to flip forward or backward. Syntax transform: rotateX(angle); Where angle can be specified in degrees (deg), radians (rad), or turns. Example: Basic X-Axis Rotation The following example demonstrates how to rotate an element 45 degrees around the X-axis − .container { perspective: 1000px; margin: ...
Read MoreRotate div with skew x-axis using CSS
The CSS transform: skewX() property allows you to skew an element along the x-axis, creating a slanted or tilted effect. This transformation distorts the element horizontally while keeping the y-axis unchanged. Syntax selector { transform: skewX(angle); } Possible Values ValueDescription degAngle in degrees (positive values skew left, negative values skew right) radAngle in radians turnAngle in turns (1 turn = 360 degrees) Example The following example demonstrates how to apply skew transformation to a div element along the x-axis − ...
Read MoreA scale transform the element by using y-axis with CSS3
The scaleY() CSS function is used to scale an element along the y-axis (vertically). This transform function stretches or compresses the element's height while keeping its width unchanged. Syntax transform: scaleY(y); Here, y is a number representing the scaling factor to apply on the vertical axis of the element. Possible Values ValueDescription 1No scaling (original size) > 1Stretches the element vertically 0 to 1Compresses the element vertically 0Completely flattens the element negativeFlips and scales the element Example: Vertical Scaling The following example demonstrates how to scale elements along the ...
Read MoreRotate Out Up Right Animation Effect with CSS
The CSS rotate out up right animation creates a rotation effect where an element rotates 90 degrees clockwise around its bottom-right corner while fading out, simulating an exit animation. Syntax @keyframes rotateOutUpRight { 0% { transform-origin: right bottom; transform: rotate(0deg); opacity: 1; } 100% { transform-origin: right bottom; ...
Read MoreRotate Out Up Left Animation Effect with CSS
The CSS rotate out up left animation creates a rotating exit effect where an element spins counterclockwise while moving up and left, eventually disappearing from view. This animation is commonly used for exit transitions and attention-grabbing effects. Syntax @keyframes rotateOutUpLeft { 0% { transform-origin: left bottom; transform: rotate(0deg); opacity: 1; } 100% { ...
Read MoreRotate Out Down Right Animation Effect with CSS
The CSS rotate out down right animation effect rotates an element clockwise while fading it out, with the rotation anchored at the bottom-right corner. This creates a smooth exit animation where the element appears to spin away downward and to the right. Syntax @keyframes rotateOutDownRight { 0% { transform-origin: right bottom; transform: rotate(0deg); opacity: 1; } 100% { ...
Read MoreCSS border-image-source
The CSS border-image-source property is used to specify the path of an image to be used as a border. This property defines the source image that will be sliced and used to create decorative borders around elements. Syntax selector { border-image-source: value; } Possible Values ValueDescription url()Specifies the path to an image file noneNo image is used (default value) linear-gradient()Uses a gradient as the border image source Example The following example demonstrates how to use an image as a border source − ...
Read More