Dissecting CSS3 gradients - Part 2

Ryan Sukale

Aug. 27, 11 · Web Dev Zone · Interview

Like (0)

Save

3.49K Views

This 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

background-image: linear-gradient(0deg,#000000 50%,transparent 51% ),
radial-gradient(50% 50%, circle , #000000 40%,#ffffff 41% );

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

background-image:
linear-gradient(45deg, #000000 25%, transparent 26%,transparent 75%, #000000 76%),
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;

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

Dissecting CSS3 gradients - Part 2

Web Dev Partner Resources