Linear Gradient
Gradients allows you to add a simple and smooth transitions between specified colors (the above example describes you a liner gradient in the form of a rainbow).
Early you have to use images to do so, but now CSS3 let you this very easily.
Using CSS3 gradients, you can reduce you bandwidth usage too. In addition, CSS3 gradients looks better when zoomed out, because gradients are generated by the browser itself.
In CSS3 there are, two types of Gradients:
1. Linear Gradients (from top to bottom / from left to right)
2. Radial Gradients (defined by their center)
Here we will just talk about Linear Gradients. For Radial Gradients, you can reed next post.
CSS3 Linear Gradients
To create a Linear Gradients you must at least define two color stops. Color stops are the colors in which you want to create a transitional look.
Syntax:
CSS3 gradients are being generated using the following syntax:
background: linear-gradient ( direction, color-stop1, color-stop2, ... );
Linear Gradient - Top to Bottom (its default)
This code generates a gradient which starts from and ends at bottom, transitioning between red to blue:
#grad {
background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: linear-gradient(red, blue);
}
Output
Linear Gradients - Left to Right
This is an example of linear gradients that starts from left:
#grad {
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
}
Output
Linear Gradients - Diagonal
CSS3 allows you to create DIAGONAL linear gradients too.
To create a Diagonal Linear Gradient, you have to specify both ending and starting point and two colors.
Below is the example demonstrating a linear gradient:
#grad {
background: -webkit-linear-gradient(left top, blue, yellow);
background: -o-linear-gradient(bottom right, blue, yellow);
background: -moz-linear-gradient(bottom right, blue, yellow);
background: linear-gradient(to bottom right, blue, yellow);
}
Output
Using Angles
We can also specify an angular transition in Linear Gradients. Angles can be used to control the direction of an linear gradient.
Below example demonstrates a gradient which is created by using an angle of 45deg.
#grad {
background: -webkit-linear-gradient(45deg, red, blue);
background: -o-linear-gradient(45deg, red, blue);
background: -moz-linear-gradient(45deg, red, blue);
background: linear-gradient(45deg, red, blue);
}
Output
Using Multiple Color Stops
The CSS3 gradients are not limited to only two colors in a gradients, you can use as many colors as you want.
For this you just need to define all of the colors you want to show in a gradients.
The below code explains how to create a rainbow looking gradient with some text in it:
#grad {
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Output
Using Transparency
Well, to create a nice looking gradient, CSS3 gives you another thing, Transparency.!
You can create a fading effect using transparency.
To add transparency we use rgba() to define color stops. In rgba() the last parameter indicates the transparency. Which can be a value from 0 to 1.
0 indicates full transparency and 1 indicates full color (no transparency).
below example defines a gradient with some transparent effect:
#grad1 {
height: 200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1));
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1));
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
output
Muhammad Arslan Aslam
I am a Full Time Student and occasional blogger. Software Engineering student with wide experience and interest in Front-End Web Development. You can find me on my profiles listed below and can get in touch any time.
Get Free Email Updates to your Inbox!
Post a Comment
Suggestions will be greeted.