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 547 of 652
CSS3 Multi-Column rule-color Property
The CSS3 column-rule-color property is used to specify the color of the vertical line (rule) that appears between columns in a multi-column layout. This property works in conjunction with column-rule-style and column-rule-width to create visible separators between columns. Syntax selector { column-rule-color: color-value; } Possible Values ValueDescription color-nameStandard color names like red, blue, green hex-valueHexadecimal color codes like #ff0000, #00ff00 rgb()RGB color values like rgb(255, 0, 0) rgba()RGB with alpha transparency like rgba(255, 0, 0, 0.5) initialSets the property to its default value inheritInherits the value from parent element ...
Read MoreCSS3 Multi-Column column-gap Property
The CSS column-gap property is used to specify the gap (spacing) between columns in a multi-column layout. This property helps control the visual separation between columns, making text more readable and organized. Syntax selector { column-gap: value; } Possible Values ValueDescription normalDefault value (usually 1em) lengthDefines the gap using px, em, rem, etc. %Percentage of the container width Example The following example demonstrates how to use the column-gap property to create a 40px gap between columns − ...
Read MoreCSS3 Multi-Column column-rule Property
The CSS3 column-rule property is used to add a dividing line between columns in multi-column layouts. It acts as a shorthand for setting the width, style, and color of the rule that appears between columns. Syntax selector { column-rule: width style color; } The column-rule property is a shorthand for: column-rule-width − Sets the width of the rule column-rule-style − Sets the style of the rule (solid, dashed, dotted, etc.) column-rule-color − Sets the color of the rule Example: Basic Column Rule The following example creates ...
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 MoreMoving left animation with keyframes using CSS3
CSS keyframes allow you to create smooth animations by defining specific styles at different points during the animation sequence. The following example demonstrates how to create a moving left animation where text slides in from the right side of the screen. Syntax @keyframes animation-name { from { /* starting styles */ } to { /* ending styles */ } } /* Or with percentages */ @keyframes animation-name { 0% { /* starting styles */ } 50% { /* middle styles ...
Read MoreExample of key frames with left animation using CSS3
The CSS @keyframes rule allows you to create smooth animations by defining the intermediate steps between the start and end of an animation. This example demonstrates a left-sliding animation where an element moves from right to left across the screen. Syntax @keyframes animation-name { from { /* starting CSS properties */ } to { /* ending CSS properties */ } } selector { ...
Read MoreDefine skew transforms along with x axis using CSS
The CSS skewX() transform function distorts an element by skewing it along the x-axis (horizontally). This creates a slanted effect where the element appears tilted to the left or right while maintaining its height. Syntax transform: skewX(angle); Where angle is specified in degrees (deg) or radians (rad). Positive values skew the element to the left, while negative values skew it to the right. Example: Skewing Element Along X-Axis The following example demonstrates how to apply a skew transform along the x-axis − div ...
Read MoreRotate the element based on an angle using CSS
The CSS transform: rotate() property is used to rotate an element by a specified angle. The rotation is applied around the element's center point by default. Syntax selector { transform: rotate(angle); } Possible Values ValueDescription degDegrees (0deg to 360deg) radRadians (0rad to 6.28rad) turnTurns (0.5turn = 180deg) Example: Basic Element Rotation The following example demonstrates how to rotate an element by 20 degrees − .box { width: 300px; ...
Read MoreChange the height of element using CSS
The CSS height property is used to set the height of an element. You can also use the scaleY() transform function to scale the height proportionally without changing the actual height value in the document flow. Syntax /* Using height property */ selector { height: value; } /* Using scaleY() transform */ selector { transform: scaleY(factor); } Method 1: Using Height Property The most direct way to change element height is using the height property − ...
Read MoreTransform the element along with x-axis and y-axis with CSS
The CSS translate() function is used to move an element from its current position along the x-axis and y-axis. This transformation does not affect the document flow, meaning other elements remain in their original positions. Syntax transform: translate(x, y); Where: x − a length value representing the horizontal displacement y − a length value representing the vertical displacement (optional, defaults to 0) Example: Moving Element Along Both Axes The following example demonstrates how to translate an element 30px to the right and 20px down − ...
Read More