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 George John
Page 20 of 79
Change CSS filter property with Animation
The CSS filter property can be animated to create smooth visual effects on elements. By combining filter with CSS animations, you can create dynamic transitions between different filter states like brightness, contrast, blur, and more. Syntax selector { filter: filter-function(value); animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { filter: initial-value; } to { filter: final-value; } } Example: Animated Contrast Filter The following example demonstrates animating the contrast filter on an image − ...
Read MoreUsage of cubic-bezier() CSS function
The CSS cubic-bezier() function allows you to define custom timing functions for animations and transitions using cubic Bézier curves. This gives you precise control over the acceleration and deceleration of your animations. Syntax selector { transition-timing-function: cubic-bezier(x1, y1, x2, y2); animation-timing-function: cubic-bezier(x1, y1, x2, y2); } The four parameters define two control points for the curve, where x1, y1 is the first control point and x2, y2 is the second control point. All values must be between 0 and 1. Parameters ParameterDescriptionRange x1X coordinate ...
Read MoreChange column-rule-width property with CSS Animations
The CSS column-rule-width property defines the width of the vertical rule between columns in a multi-column layout. You can animate this property to create dynamic visual effects that change the column separator thickness over time. Syntax selector { column-rule-width: value; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { column-rule-width: initial-value; } to { column-rule-width: final-value; } } Example: Animating Column Rule Width The following example demonstrates how to animate the column-rule-width property from 10px ...
Read MoreCSS nav-left property
The CSS nav-left property defines which element to focus on when the user presses the left arrow key on their keyboard or remote control. This property is primarily designed for TV browsers and devices where navigation is done using directional keys rather than a mouse. Syntax selector { nav-left: target-element; } Possible Values ValueDescription #idID of the element to navigate to when left key is pressed autoBrowser determines the next element automatically Example The following example creates a navigation system where pressing the left arrow key ...
Read MoreUsage of radial-gradient() CSS function
The CSS radial-gradient() function creates a smooth transition between colors radiating from a center point. Unlike linear gradients that flow in a straight line, radial gradients expand outward in a circular or elliptical pattern. Syntax background: 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. Center position like center, top left, or 50% 30% color-stopTwo or more colors with optional stop positions Example: Basic Radial Gradient The following example creates a radial gradient background with three colors − ...
Read MoreDefine colors using the Red-Green-Blue-Alpha model (RGBA) with CSS
CSS provides the RGBA color model to define colors using Red, Green, Blue values along with an Alpha channel for transparency. The rgba() function allows you to specify colors with precise opacity control, making it ideal for creating semi-transparent elements and layered designs. Syntax selector { color: rgba(red, green, blue, alpha); background-color: rgba(red, green, blue, alpha); } Possible Values ParameterRangeDescription red0-255Red color intensity green0-255Green color intensity blue0-255Blue color intensity alpha0-1Opacity level (0 = transparent, 1 = opaque) Example: RGBA Colors with Transparency ...
Read MoreUsage of CSS grid-row-end property
The CSS grid-row-end property defines where a grid item should end within the CSS Grid layout. It specifies the end position of a grid item by referencing specific grid lines or spanning a certain number of rows. Syntax selector { grid-row-end: value; } Possible Values ValueDescription autoDefault value. The item spans one row line-numberSpecifies which row line to end at span nSpecifies how many rows the item should span Example: Using span with grid-row-end The following example demonstrates how grid-row-end: span 2 makes an item span ...
Read MoreUsage of CSS grid property
The CSS grid property is a shorthand property that allows you to set multiple grid-related properties in a single declaration. It can be used to define grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow properties all at once. Syntax selector { grid: / ; /* or */ grid: ; /* or */ grid: / ; } Example: Basic Grid Layout The following example creates a grid with one row of 100px height ...
Read MoreHow to position text to center on an image with CSS
To position text to center on an image, use the transform property in CSS along with absolute positioning. This technique allows you to overlay text perfectly centered on any image. Syntax .container { position: relative; } .centered-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } Example The following example demonstrates how to center text on an image − .container { ...
Read MoreRole of CSS flex-direction property row-reverse value
The CSS flex-direction property with the row-reverse value arranges flex items horizontally from right to left. This is the opposite of the default row behavior, which flows from left to right. Syntax selector { display: flex; flex-direction: row-reverse; } Example The following example demonstrates how flex-direction: row-reverse reverses the horizontal order of flex items − .mycontainer { display: flex; flex-direction: ...
Read More