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 varun
Page 3 of 7
What are CSS Transitions?
CSS transitions allow you to smoothly animate changes to CSS properties over a specified duration. Instead of property changes happening instantly, transitions create a gradual change effect that enhances user experience. Syntax selector { transition: property duration timing-function delay; } Transition Properties PropertyDescriptionExample Value transition-propertySpecifies which CSS property to animatewidth, height, all transition-durationSets how long the transition takes2s, 500ms transition-timing-functionControls the speed curveease, linear transition-delayDelays the start of transition1s, 200ms Example: Height Transition The following example demonstrates a smooth height transition when hovering over an element ...
Read MoreChange the position on transformed elements with CSS
The CSS transform-origin property is used to change the position (origin point) from which transformations are applied to elements. By default, transformations like rotation, scaling, and skewing occur from the center of the element, but transform-origin allows you to specify a different reference point. Syntax selector { transform-origin: x-axis y-axis z-axis; } Possible Values ValueDescription x-axisDefines the position on the x-axis (left, center, right, %, px) y-axisDefines the position on the y-axis (top, center, bottom, %, px) z-axisDefines the position on the z-axis for 3D transformations (px) ...
Read MoreSet the navigation bar to stay at the bottom of the web pagenwith CSS
To set the navigation bar at the bottom of the web page, use the position: fixed property combined with bottom: 0. This creates a sticky navigation bar that remains visible at the bottom of the viewport even when the user scrolls through the page content. Syntax nav { position: fixed; bottom: 0; width: 100%; } Example The following example demonstrates how to create a fixed bottom navigation bar − ul { ...
Read MoreSet all the top border properties in one declaration using CSS
The CSS border-top property is used to set all the top border properties in one declaration. This shorthand property combines border-top-width, border-top-style, and border-top-color into a single property. Syntax selector { border-top: width style color; } Possible Values ValueDescription widthSets the width of the top border (thin, medium, thick, or length units) styleSets the style of the top border (solid, dashed, dotted, etc.) colorSets the color of the top border (color name, hex, rgb, etc.) Example: Basic Border Top Declaration The following example demonstrates how to ...
Read MoreSet the opacity for the background color with CSS
To set the opacity for the background color, use the RGBA color values or the opacity property. RGBA allows you to control the transparency of just the background, while the opacity property affects the entire element including text and child elements. Syntax /* Using RGBA for background opacity */ selector { background-color: rgba(red, green, blue, alpha); } /* Using opacity property */ selector { opacity: value; } Method 1: Using RGBA Values The RGBA color model allows you to specify opacity only for the background ...
Read MoreCSS Descendant Selector
The descendant selector in CSS is used to match all elements that are descendants of a specified element. It allows you to apply styles to nested elements without affecting elements outside the parent container. Syntax ancestor descendant { property: value; } The descendant selector uses a space between the ancestor and descendant elements. It selects all descendant elements, regardless of how deeply nested they are within the ancestor. Example You can try to run the following code to implement CSS Descendant Selector − ...
Read MoreList with a blue left border using CSS
To add a blue left border to a list in CSS, you can use the border-left property. This creates a visual accent that helps distinguish the list from other content on the page. Syntax selector { border-left: width style color; } Example The following example demonstrates how to add a blue left border to an unordered list − ul { border-left: 3px solid blue; ...
Read MoreCSS text-emphasis property
The CSS text-emphasis property is used to apply emphasis marks to text elements. It allows you to add decorative marks above or below text while also controlling their color and style. Syntax selector { text-emphasis: text-emphasis-style text-emphasis-color; } Property Values PropertyDescription text-emphasis-styleDefines the type of emphasis marks (filled, open, dot, circle, etc.) text-emphasis-colorSets the foreground color of the emphasis marks Example: Basic Text Emphasis The following example demonstrates how to apply emphasis marks to text − ...
Read MoreCSS3 Repeat Radial Gradients
The CSS repeating-radial-gradient() function creates a radial gradient that repeats in a circular pattern. Unlike regular radial gradients, the pattern repeats continuously from the center outward, creating concentric rings of color transitions. Syntax selector { background: repeating-radial-gradient(shape size at position, color-stop1, color-stop2, ...); } Possible Values ParameterDescription shapeOptional. circle or ellipse (default) sizeOptional. closest-side, farthest-side, closest-corner, farthest-corner positionOptional. Position of the center (e.g., center, top left) color-stopColor followed by optional position percentage or length Example: Basic Repeating Radial Gradient The following example creates a repeating radial ...
Read MoreCSS3 font combinations
CSS3 font combinations allow you to specify multiple fonts in order of preference. If the browser cannot load the first font, it automatically tries the next font in the list, ensuring your text always displays properly. Syntax selector { font-family: "first-choice", "second-choice", generic-family; } Font Family Categories CategoryDescriptionExamples serifFonts with decorative strokesTimes, Georgia sans-serifFonts without decorative strokesArial, Helvetica monospaceFixed-width fontsCourier, Monaco cursiveScript-like fontsBrush Script fantasyDecorative fontsImpact, Papyrus Example: Sans-Serif Font Combination The following example demonstrates a typical sans-serif font stack − ...
Read More