by
Join the DZone community and get the full member experience.
Join For FreeOne of the features in CSS 3 that I find to be the most intriguing is the application of gradients via simple css rules. The reason why I find it so awesome is because while designing pages, I have usually had to insert dummy placeholder images in the background, or leave the backgrounds as colorless while writing the html and css. So, even when I am almost done with the design, I always have a second task to open up an image editing software, most likely GIMP, and the create the images as per the sizes of my html elements.
Interesting as it may seem, the
main problem arises is when I dont like what I see. When you amalgamate
all the colors on a website, its highly possible that you dont like the
color scheme. This then inevitably brings you back to your image
editing software to tweak with the colors to get it right. And this can
happen several times, especially when you are prototyping to give a
client a demo of what you want things to look like. You will find
yourself switching several times between your html editor and your
image editor. This is exactly where CSS 3 gradients fit into the
picture like cheese fits into a burger. It was just the missing
ingredient. So, in this blog post, I am going to cover the following
topics that will help you get a better understanding of CSS 3 gradients.
In this two part series, I will be covering all the essentials to get you up and running with CSS 3 gradients.
In this first part of the series, we will try to answer the following questions.
- What are CSS 3 gradients? - the basic concepts
- What are the types of CSS 3 gradients?
- How to use CSS 3 gradients? - elements of design
In the second part of this series, we shall see a bit more advanced usage of CSS 3 gradients and try to answer questions, such as
- How to use multiple CSS 3 gradients?
- How to use CSS 3 gradients with other CSS 3 properties?
- How to use CSS 3 gradients to create Patterns?
- Browser issues when using CSS 3 gradients.
- Where to find resources that smartly generate cross browser CSS 3 gradients for you?
So, lets get started :)
1) What are CSS 3 gradients? - the basic concepts
If you are graphic designer at
any level, I am sure that you are aware of what gradients are. Making
gradients in graphic tools like GIMP or Photoshop are pretty easy. But
now, using CSS 3, you can create gradients with almost the same ease.
The most important thing to
note about CSS 3 gradients is that they are applied as part of the
'background-image' css property.i.e. CSS 3 gradients does not require a
new css property, it just adds a new function that can be added to the
already existing 'background-image' property. It makes quite a lot of
sense to add a css gradient as a part of the background, because that
is exactly the way images are used - to lie in the background of an
html element.
The next important thing to
note is that you can add multiple background gradients, using a comma
separated list of gradient functions on the same background css
property.
Now lets move on to the next section and learn about the various types of CSS 3 gradients.
2) What are the types of CSS 3 gradients?
There are two types of CSS 3 gradients.
- Linear Gradients
- Radial Gradients
Linear Gradients :
Linear gradients are the simplest and the most common of all. Let us see the syntax and then see how it works.
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )I just have to say this right now. Linear gradients are HOT!
I totally love them. Instead of
breaking down the syntax and explaining the various terms, lets me try
to explain the concept of gradients in a way that I see it.
Let us assume that you want to
create a linear gradient. What that means is that you want to move from
one shade of color to another in a linear fashion. Now lets try to
break down our own thought process when we visualize gradients.
Q :What do we need to create a simple linear gradient??
A : At least 2 colors. (ya, i know that was simple).
Q : How do you know what the 2 colors are used for?
A
: You define one of the colors as the start of the gradient, and the
other color as the end of the gradient. These are called as you color
stops. Since(for now) you have just 2 colors, you have 2 color stops.
Q
: What is the direction of the gradient?? Is it a horizontal gradient?
Is it a vertical gradient? Or is it at a certain angle??
A
: We need a direction for our gradient. Mathematically, directions are
defined by drawing a vector, from one start point to the other point,
with an arrowhead indicating the direction of the vector. So when you
draw any such line on a sheet of paper, you obviously will be drawing a
line such that it makes an angle with the horizontal axis of the sheet
of paper. This angle is the measure of the direction of the vector.
Hence, we need a way to specify an angle when specifying a gradient in
CSS 3.
- A start color.
- An end color.
- An angle.
Lets put these three together in the gradient syntax.
linear-gradient( angle, start-color, end-color);
Now it looks pretty simple, doesn't it?
Although there is another
syntax, I feel that this syntax is not only easily readable, but also
gives you an immense amount of flexibility in defining the options. In
the sections that follow, we will use colors and create a few linear
gradients to see this form of defining gradients.
Radial Gradients :
The other type of gradient is
radial gradients. Now radial gradients are quite similar to linear
gradients. You have almost the same three main ingredients.
radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )
This looks pretty scary, doesn't it?
Well it does to me. So, lets try to break it down in the same way that
we broke down the syntax for linear gradient.
Apart from the three important
ingredients, the new important ingredient in the radial gradient is the
'shape' of the gradient. We know that a radial is something like a
circle. In CSS 3, you can define the radial to be one of two shapes -
circle, ellipse.
While using the radial
gradient, there is one property that is somehow more interesting than
the angle. And that is, the coordinates of the center of the radial
(circle or ellipse).
The radial gradient has many
more options as compared to the linear gradient and therefore we can
have several more permutations and combinations of the syntax, which
thereby makes it completely impossible for me to cover radial gradients
in this blog post. So we will only see the basics and then you can
explore the various other options at your own leisure once you have a
better understanding of the underlying concepts.
To capitulate, the important ingredients of a radial gradient are
- The coordinates of the center of the radial.
- The shape of the radial
- A start color (which becomes the color of the center).
- An end color (which becomes the color of the outer edge of the radial).
Lets put these three together in the gradient syntax.
radial-gradient( center-coordinates, shape , start-color, end-color);
This syntax can be used to define the
most basic form of a radial gradient. And we shall see in the upcoming
examples, how they can be applied to style the background of an html
element.
So far, we have seen what CSS 3
gradients are. And we also learnt the most basic form of their syntax.
Now comes the most interesting part of this post and that is, the part
where we demo the various CSS 3 gradients in use.
For the purpose of our demo, I
will be making use of an HTML div element having dimensions 200px X
200px and apply the various gradients to it.
Linear gradients
Sample 1:
This one shows a simple gradient from black to white.
Css Code
background-image:linear-gradient(0deg, black, white);
The css code is very simple. You want
a horizontal gradient (hence the 0 degrees), the starting color is
black, the ending color is white and the gradient effect spreads across
the dimention of the entire html element.
Sample 2:
Css Code
In this example, we have simply
rotated the axis by 45 degrees. As you might have noticed, the axis
rotates about the center of the html element. So when you rotate the
axis by 45 degrees anticlockwise, the start color automatically starts
at the left bottom and the end color ends at the right top, thereby
giving you a gradient of 45 degrees about the center of the html
element. This is a very important point to note about linear gradients.
The following image (that I created using Inkscape, not CSS 3) should
be able to give you a better idea of the angle calculation.
The axis/vector representing
the direction of the gradient rotates about the center of the html
element to which the gradient it applied.
The next example demonstrates using
three colors in a gradient. It is similar to the previous two examples,
the only difference being the additional parameter that describes the
third color.
Sample 3
Css Code
In this example you see that the
gradient started normally from the lower left corner, then it gradually
changed to white when it reached the middle and then it gradually
changed to green when it reached the upper right corner. This means
that the gradient rendering algorithm tried to evenly distribute the
area over which the gradient was to be rendered between the three
colors that we specified.
In the next example, we will try a tiny variation of the above
Sample 4
Css Code
As you
see in the above code, this is a slight variation of the previous
example. I have specified percentage values along with the color. To
understand what this percentage means, you need to keep one thing in
mind - the direction vector of the gradient. As you move along the direction vector of
the gradient, the start of the vector is 0 percent. The end of the
vector is 100%. So, when you specify the a percentage along with a
color stop when using gradients, you are actually saying that at a
given percent distance along the vector, I want my color to be
#some-color. i.e. you are defining the position of the color stop along
the direction vector. In the above example, I declare black to be the color at 20 percent distance from the start of the direction vector, white to be the color at 50 percent distance from the gradient direction vector, and green to be the color at 80 percent of the distance from the gradient direction vector.
Since before 20%, no color is specified, hence the origin color(i.e.
black in our case) is used from 0 t 20 percent. And since no color is
specified after 80%, hence green is used as the color after 80 percent.
So, we see that our gradients in this background are between 20 percent
and 80 percent. The remaining parts are fixed colors.
Radial Gradients
In this section we will see a few examples that make use of the simplest form of radial gradients.
Sample 1
Css Code
background-image: radial-gradient(50% 50%, circle , #000000,#ffffff );
In the above example, you can see
that the first parameter is used to set the x and y coordinates of the
center of the radial. And I have set i to be 50% from the left and 50%
from the top. The next parameter specifies the shape of the radial,
which in our case is 'circle'. The next parameter gives the start color
of the circle from the center. The fourth parameter is used to specify
the end color of the radial, which in our case happens to be white. So,
we have a simple gradient, starting from black at the center to white
at the edges of the element.
Now this may not seem so
interesting at first. But when you perform a few tweaks on the
parameters, you can create something really cool. Check out the next
sample.
Sample 2
Css Code
As you see in the above code, we were
easily able to create a circle with a sharp boundary using gradient
parameters. In the syntax above, we have specified a percentage
alongside each color value. To understand how this percentage applies,
think of it in this way - You have a circle with its center set at the
center of your html element. Now Since its a circle, it has a radius.
When you specify #000000 50% as the first color, what you are actually
saying is that upto 50 percent of the radius, starting from the center,
you want the color to be #000000. In the next color parameter, when you
say #ffffff 51%, you are saying that from 51 percent of the radius
onwards, you want the color to be #ffffff. Since there is only a 1
percent difference between the two colors, you get a nice sharp
boundary instead of a gradient between the two colors. If however you
were to increase the difference in the percentage, as in the below
example, you would get a gradient.
Sample 3
Css Code
As you see in the css code above, I
increased the percentage value of the color #ffffff to 71 percent. So
we were able to see a gradient effect from the color #000000 to the
color #ffffff between 50% and 70% of the radius of the circle, which
looks like a nice halo.
The wonderful thing about
radial gradients is that just like linear gradients, you can also add
more color stops. So lets try to make a much more realistic halo effect
using radial gradients.
Sample 4
Css Code
As you see in the above code,
creating a halo was just a matter of adding another color stop to the
radial gradient function and setting the proper percentage values.
Beautiful, is'int it? Kinda looks like a scary eclipse, but still
beautiful. Probably because it hardly required any effort to create.
Well, that's the beauty of CSS 3 gradients.
Now that we have a basic idea of CSS 3 gradients, in the next part of this series
we will see how we can mix and merge gradients to create something even
more powerful, and of course, beautiful, such as creating gradient
patterns and using the gradient property with other CSS 3 properties.
Excited anyone? !!
Happy Programming :)
From http://mycodefixes.blogspot.com/2011/08/dissecting-css3-gradients-part-1.html
CSS
Data structure
Element
Syntax (programming languages)
Opinions expressed by DZone contributors are their own.
Comments