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 AmitDiwan
Page 498 of 840
How to create CSS3 Transition Effects?
CSS3 transitions allow you to create smooth animations between different property values over a specified duration. The transition property enables gradual changes when elements change state, such as on hover, focus, or through JavaScript. Syntax selector { transition: property duration timing-function delay; } Transition Properties PropertyDescriptionExample Values transition-propertySpecifies which CSS property to animatewidth, height, all transition-durationDefines how long the transition takes2s, 500ms, 0.3s transition-timing-functionControls the speed curveease, linear, ease-in-out transition-delayDelays the start of transition0.5s, 200ms Example: Width Transition on Hover This example demonstrates a smooth width ...
Read MoreWorking with CSS3 3D Transform Functions
CSS3 3D transform functions allow you to move, rotate, and scale elements along the x-axis, y-axis, and z-axis in three-dimensional space. These functions provide powerful capabilities for creating depth and perspective effects on web pages. Syntax selector { transform: transform-function(values); } 3D Transform Functions Function Description matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) Transforms the element using 16 values of 4x4 matrix translate3d(x, y, z) Moves the element along x-axis, y-axis and z-axis ...
Read MoreHow to create Border Images in CSS?
The CSS border-image property allows you to use an image as a border around an element instead of the standard solid, dashed, or dotted borders. This creates visually appealing decorative borders using custom graphics. Syntax border-image: source slice width outset repeat; Border Image Properties The border-image property is a shorthand for the following individual properties − PropertyDescription border-image-sourceThe source of the image to be used as border border-image-sliceHow to slice the border image into sections (corners, edges, middle) border-image-widthThe width of the border image border-image-outsetExtends the border image area beyond the border ...
Read MoreHow to create CSS3 Rounded Corners?
The CSS3 border-radius property allows you to create rounded corners on any element. This property transforms sharp rectangular corners into smooth, curved edges, giving your web designs a more modern and polished appearance. Syntax selector { border-radius: value; } Possible Values ValueDescription lengthSet corner radius in px, em, rem, etc. Default is 0. %Set corner radius as percentage of element's dimensions Example 1: Basic Rounded Corners Here's how to create a container with rounded corners compared to a normal container − ...
Read MorePerforming multiple transitions using CSS3
The CSS3 transition property allows you to create smooth animations between different property values. When you need to animate multiple properties simultaneously, you can specify multiple transitions in a single declaration by separating each transition with commas. Syntax selector { transition: property1 duration1, property2 duration2, property3 duration3; } Example 1: Width and Border-Radius Transition This example demonstrates how to animate both width and border-radius properties simultaneously. When you hover over the element, it transforms from a rectangle to a circle while changing its width − ...
Read MoreHow to create CSS3 Box and Text Shadow Effects?
CSS3 provides powerful shadow effects through the text-shadow and box-shadow properties. These allow you to add depth and visual appeal to text and elements on your web page. Text Shadow The text-shadow property adds shadow effects to text elements. Let us see the syntax − text-shadow: h-shadow v-shadow blur-radius color; The parameters are − h-shadow − Set the horizontal offset of the shadow v-shadow − Set the vertical offset of the shadow blur-radius − Set the blur radius (optional) color − Set the shadow color (optional) Basic Text Shadow ...
Read MoreCSS3 Transparency and Gradients
Linear gradients are used to arrange two or more colors in linear formats like top to bottom, left to right, or diagonally. To add transparency, use the rgba() function and define the color stops. At least two color stops should be mentioned. Syntax selector { background-image: linear-gradient(direction, color-stop1, color-stop2, ...); } The direction can be: to left − Right to Left to right − Left to Right to bottom right − Diagonal (top-left to bottom-right) to bottom − Top to Bottom (default) Example 1: Transparent Gradient (Right to ...
Read MoreSetting Direction of Linear Gradients using Angles in CSS
For more control over the direction of the gradient, define angle under the linear-gradient() method of the background-image property. This gives more control over the gradient direction − Value 0deg is the "to top" direction Value 90deg is the "to right" direction Value 180deg is the "to bottom" direction Value 270deg is the "to left" direction Syntax background-image: linear-gradient(angle, color-stop1, color-stop2); Example: Basic Linear Gradient with Angles The following example demonstrates how to set the direction of linear gradients using angles − ...
Read MoreUsing the CSS3 Linear and Radial Gradients
CSS gradients display smooth transitions between two or more colors. Linear gradients create color transitions along a straight line, while radial gradients radiate outward from a central point in circular or elliptical patterns. Syntax /* Linear Gradient */ background-image: linear-gradient(direction, color1, color2, ...); /* Radial Gradient */ background-image: radial-gradient(shape size at position, color1, color2, ...); Linear Gradients Linear gradients are created using the background-image property with linear-gradient(). You can control the direction using angles or keywords like to right, to bottom. Example: Linear Gradient with Angles The following example demonstrates linear ...
Read MoreStyling Forms with CSS Attribute Selectors
CSS attribute selectors allow you to apply styles to HTML elements based on the presence or value of their attributes. This is particularly useful for styling forms, where you can target specific input types, required fields, or elements with particular attributes. Syntax /* Basic attribute selector */ element[attribute] { property: value; } /* Attribute with specific value */ element[attribute="value"] { property: value; } /* Attribute containing value */ element[attribute*="value"] { property: value; } The [attribute] Selector The [attribute] selector selects elements with a specified attribute, regardless of its value. Here, links with ...
Read More