Join the DZone community and get the full member experience.
Join For FreeThis post is a continuation of my previous article on CSS 3 gradients. If you are completely new to CSS 3 gradients, you might want to take a look at it.
In my previous blog post, we
learnt about the basics of CSS 3 gradients. We also learnt about the
different types of CSS 3 gradients and understood their basic syntax to
get things up and running. And then lastly we saw a few examples
demonstrating the use of the syntax.
In this post, we will take
things a bit further, frankly because, it CAN be taken further! It
seems like the simple CSS 3 gradient syntax that we saw recently can be
used in a myriad of different ways that sometimes makes it hard to
believe it is in fact CSS 3 gradients that are being used behind the
scenes.
In this blog post, I will be trying to answer the following questions.
- 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?
- Cross Browser CSS 3 gradients.
- Where to find resources that smartly generate cross browser CSS 3 gradients for you?
So, lets not waste any more time and get to the point.
1) How to use multiple CSS 3 gradients?
CSS 3 gradients are awesome. And when
one gradient is awesome, just imagine what adjective you would have to
use if you had more than one gradient(If you manage to come up with the
proper word, tell me in a comment!). Adding multiple CSS 3 gradients is
a pretty simple task. Instead of passing only one gradient function in
the background image, you can pass multiple, comma separated list of
gradient functions as the background image. However, while doing so,
you would have to keep a few things in mind. Since a gradient is much
like a background image, having multiple gradients is almost
conceptually equivalent to having a stack of multiple background
images. And that means, if you want to be able to see the colors of the
gradient that is at a lower level in the stack, you will have to use a
transparent color on the upper level of the stack.
So, the two new features that should come to your mind when using multiple backgrounds are
- Stacking level of gradients.
- Usage of Transparency while making gradients.
Lets understand the stacking level of gradients by using a simple example where we use 2 gradients layers in the gradient stack.
Sample 1
Css Code
background-image: linear-gradient(0deg,#000000 50%,#ffffff 51% ),
radial-gradient(50% 50%, circle , #000000 40%,#ffffff 41% );As you can see in the code above, I
have applied 2 gradients in the background image property. One is a
linear gradient, and the other is a radial gradient. The linear
gradient covers half of the block width with black, and the other half
with white. The radial gradient is used to create a sharp circle.
However, we are not able to see the circle on the browser. That's
because of the fact that the order in which you specify the gradient
functions is the order in which the stack is created and this stack
grows downwards, i.e. the gradients that are specified first appear as
the topmost layers, and the gradients that you specify later appear
below them. Since in our example, the radial gradient was specified
after the linear gradient, and because all the colors in linear
gradient were opaque, we were unable to see the underlying radial
gradient.
Now lets make use of transparency in the gradient function and see how things change.
Sample 2
Css Code
As you see, in the above code,
I made use of transparency in linear gradient function instead of using
a white color. And we were able to see the underlying black color
circle.
So, this is a tip. If you are
making use of multiple CSS 3 gradients, you can make shapes by mixing
and merging the gradient colors with transparency.
2) How to use CSS 3 gradients with other CSS 3 properties?
CSS 3 gradients are a terrific
feature. But what makes them even more terrific is that when you use
multiple background images, you can also use them with other CSS 3
properties and create something really amazing. The two other CSS 3
properties that I find outstandingly helpful are
background-position
background-size
First lets take a look at the
background size property. The background size property is used to
define the size of the background. What makes this interesting when
using multiple gradients is that instead of supplying one value for the
width and height of the background, you can now supply a list of comma
separated values of the background size, each of which will be applied
to the respective gradient.
What I mean to say is this
background-image : gradient1, gradient2, gradient3;
background-size:gradient1-size, gradient2-size, gradient3-size;
Lets take a look at some code in
action. We will make use of the same gradients that we used in the
previous example. But we will add a background size property this time
and see what happens.
Sample 3
Css Code
background-image: linear-gradient(0deg,#000000 50%,transparent 51% ),
radial-gradient(50% 50%, circle , #000000 40%,#ffffff 41% );
background-size: 100% 100%, 50% 50%;In the above CSS, I specified 2
background gradients and two corresponding background sizes. For the
second background size, I specified it to be 50 percent of the width
and height of the element. Because the background is being repeated,
the second background gets repeated across the dimensions of the
element and you are able to see two circles in the image. If I were to
make the linear gradient fully transparent, you would be able to see 4
circles in the element instead of 2. At present those two are being
hidden by the linear gradient layer.
Now lets take a look at the effect of background position on gradients.
Sample 4
Css Code
background-image: radial-gradient(50% 50%, circle , #000000 40%,#ffffff 41% );
background-size: 50% 50%;
background-position:50% 0%;
As you see in the sample code, I just shifted the background position of the gradient in the horizontal direction by 50%.
However there are some quirks
when using the background position property along with multiple
gradients with different browsers as of this writing. So you would want
to be careful when trying it out on your own.
3) How to use CSS 3 gradients to create Patterns?
Now gradient patters are an
interesting feature that come into play when you begin to mix and merge
multiple gradients and the background-size property.
To start with, lets make a very simple gradient pattern.
Sample 5
Css Code
background-image: linear-gradient(0deg,#000000 50%,transparent 51% ),
radial-gradient(50% 50%, circle , green 40%,#ffffff 41% );
background-size: 10% 10%, 25% 25%;
As you see in the code, the the
gradient is the same, I just changed the color of the circle to green.
But the main thing that I changed was the size of the gradient. And as
you see, the effect is quite surprising.
Okey, lets try something else.
Sample 6
Css Code
background-image: linear-gradient(45deg,#000000 50%,transparent 51% ),
radial-gradient(50% 50%, circle , green 40%,#ffffff 41% );
background-size: 50% 10%, 25% 25%;
Pretty Cool eh?
One more??
Sample 7
Css Code
background-image: linear-gradient(45deg, #000000 25%, transparent 26%,transparent 75%, #000000 76%),
radial-gradient(50% 50%, circle , green 40%,#ffffff 41% );
background-size: 50px 50px, 25px 25px;
How about one more??
Sample 8
Css 3 Code
A point to be noted in the above
example is that although I have specified 3 gradients, I have specified
the size of only 2 gradients. Since the third size parameter is not
specified, the first parameter of 50px 50px is applied to the third
gradient.
Well, I can go on and on and on
and endlessly keep creating patterns. Its just a question of playing
with the parameter values (or rather playing with your grey matter
until they burn and char and turn into dark matter).
For now, Ill stop here as I
believe that you've got my point, and that is - CSS 3 gradients are
powerful. So lets move ahead and address a more important question.
4) Cross Browser CSS 3 gradients.
As with most CSS 3 properties,
browser support is not available unless you add browser specific
prefixes to your css code. In case you don't already know the prefixes,
these are the prefixes that you may have to use to make the gradient
function work on different browsers
Firefox : -moz-
Webkit : -webkit-
Opera : -o-
IE : -ms-
For support in any other browsers, you can obviously check out their documentation to determine what prefix they use.
5) Where to find resources that smartly generate cross browser CSS 3 gradients for you?
Well, this is one of the most
important questions to be addressed. That's because, although CSS 3 can
be used to make patterns and many other things, you are most likely to
find yourself using simple gradients to style your buttons or other
elements to create subtle effects much more than anything else. And
you're definitely gonna want to make it cross browser, as much as
possible, and have a decent fallback color if your site is not going to
opened in modern browser with gradient support.
That said, there are a few
tools out there than can help you by generating CSS 3 gradients for all
the browsers, i.e. with the same effects using all the prefixes for
major browsers.
Below are a few links to
gradient tools that I prefer to use when trying to make simple
gradients. If you are aware of better sites, let me know about them in
the comments. Ill take a look, and maybe add it to the main post as
well.
- Ultimate CSS Gradient Generator : I personally use this gradient generator the most because of the browser support in the generated css.
- CSS3 Gradient Generatorby: Damian Galarza : I stumbled across this one recently.
- Westciv gradient generator tool : This one is good if you are interested in playing with radial gradients. It exposes all the other options that are available with radial gradients and can get a bit tricky at times.
To conclude, CSS 3 are a great
feature and open up new dimentions of thinking for developers and web
designers without having to turn to a graphic design
tool every-time they change their mind about a particular color. As
time will pass, standards compliant browsers are bound to have more
support for the new CSS 3 properties. And CSS 3 gradients are
definitely going to be an important part of every web designer's
toolkit in the time to come.
Happy Programming :)
From http://mycodefixes.blogspot.com/2011/08/dissecting-css3-gradients-part-2.html
Topics:
Opinions expressed by DZone contributors are their own.
Comments