The transition shorthand property allows us to specify transition-property, transition-duration, transition-timing function and transition-delay as values to transition property in one line − transition-duration − Specifies how many seconds or milliseconds a transition effect takes to complete transition-property − The name of the property the effect is on transition-timing function − The speed curve of the transition transition-delay − Set the delay for the transition effect in seconds Remember, you need to set the CSS property on which the effect is applied and the duration as well. Let’s say we will convert a shape to oval on mouse ... Read More

For multiple transitions, use the CSS3 transition property, which is a shorthand property. It sets the property, duration, timing, and delay of the transition in a single line. Let’s say we changed the width and border-radius for the transition. transition: width 2s, border-radius 2s; Set the container div To begin with, set a parent div − Set the transition The transition is set using the transition property for the width and border-radius properties. The duration set is 2 seconds − .container div { width: 300px; ... Read More

2D transforms are used to re-change the element structure as translate, rotate, scale, and skew. The following are some of the 2D transform functions − Sr.No. Value & Description 1 matrix(n, n, n, n, n, n)Used to defines matrix transforms with six values 2 translate(x, y)Used to transforms the element along with x-axis and y-axis 3 skew()skew an element along the X-axis and Y-axis 4 skewX()Skew an element along the X-axis 5 skewY()Skew an element along the Y-axis 6 scale(x, y)Used to change the width ... Read More

To create CSS3 Box and Text Shadow effects, use the box-shadow and text-shadow property respectively. Let us understand them one by one with examples. Text Shadow To add shadow to text, use the text-shadow property. Let us see the syntax − text-shadow: value The above value can be the following − h-shadow− Set the position of the horizontal shadow. v-shadow− Set the position of the vertical shadow. blur-radius− Set the blur radius. color− Set the shadow color of the shadow. Create a text shadow Let us see an example to create a text shadow − ... Read More

Linear gradients are used to arrange two or more colors in linear formats like top to bottom. To add transparency, use the RGBA() function and define the color stops. At least two color stops should be mentioned. Let us first see the syntax. Syntax The following is the syntax to create Linear Gradients − background-image: linear-gradient(dir, colorStop1, colorStop2, colorStop3, ...); Above, the dir is the direction i.e., from − Left to Right Right to Left Diagonal Top to Bottom Linear Gradient Beginning From Right to Left The following is the code to set transparent linear gradient ... Read More

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 of 180deg is the "to bottom" direction The following is the syntax − background-image: linear-gradient(angle, color-stop1, color-stop2); Set the angle of the linear gradient The following is the code for setting the direction of linear gradients using angles in CSS. .linearGradient { background-image: linear-gradient(90deg, rgb(255, 0, 200), yellow); } ... Read More

Gradients displays the combination of two or more colors. Linear gradients are used to arrange two or more colors in linear formats like top to bottom. Radial gradients appear at center. Linear-Gradient The linear gradient is set using the background-image property. The angle is set as the first parameter. Here is the example − body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div ... Read More

Apply styles to HTML elements with particular attributes using Attribute Selectors in CSS. Let us see which attribute selectors are available with the rules. The [attribute] Selector The [attribute] selector selects elements with a specified attribute. Here, the link with the attribute target is styled − a[target] { background-color: red; color: white; } Example Let us see the example − a[target] { background-color: red; ... Read More

The Fallback color is used to specify the color for a situation when the browser doesn’t support RGBA colors. Some browsers that don’t support fallback colors are Opera. Specify a solid color before a RGBA color so the solid color can still work if the browser doesn’t support the RGBA colors. Set the Fallback Color The following is the code for declaring a fallback color in CSS − background-color: purple; /*fallback color*/ Example Let us see an example − body{ ... Read More

Image sprite is used to reduce the number of http requests that makes our site’s load time faster.Following is the code for creating a navigation menu using CSS image sprite −Example Live Demo body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    margin: 0px; } span {    width: 200px;    height: 300px;    background-color: black; } nav {    background-color: black;    height: 50px;    padding-top: 15px;    padding-left: 10px; } nav a {    font-size: 20px;    color: white;    text-decoration: none;    margin-right: 10px; } .home {    width: 32px;    height: 32px; ... Read More