If this message appears to another site than 1stwebdesigner ,it has been stolen, please visit original source!
Have you refrained from using CSS Gradients because either you didn’t understand them, or thought the browser support for them wasn’t good enough to consider using them in your projects?
Well, it’s time to kill those 1px wide images, my friend.
If you’re just curious about how to use CSS Gradients, this is the place for you. We’ll start with the basics of syntax to very advanced effects with lots of tips and examples.
Remember, learning about CSS gradients is really important since browsers are getting better and better every day. Mobile browsers have good CSS3 support by default.
So, let’s rock!
Basic syntax
The first thing you must be aware of is browser support. For now you must keep the browser vendor prefixes AND use a custom filter for IE. So, we have at least 5 possible prefixes, each one with its own subtle variation and even multiple differences between browsers versions: Opera (presto), Firefox (gecko), Safari / Chrome (Webkit), Konqueror (KHTML), and IE (Trident), which has 2 different ways to do it (IE… go figure!).
We’ll focus on “standard” browser rules here (e.g. we won’t talk about old from() to() rules), and we’ll have a chapter on IE compatibility at the end (since its filters don’t allow all the effects we’ll see here).
This is the basic syntax:
#wd {
background: vendor-type-gradient( start / position , shape size, color 1, color2 [position] [, other colors / positions] );
/*** real example **/
background: -moz-linear-gradient( top left, red, #c10000, #ae0000 );
background: -webkit-linear-gradient( top left, red, #c10000, #ae0000 );
background: -o-linear-gradient( top left, red, #c10000, #ae0000 );
background: -khtml-linear-gradient( top left, red, #c10000, #ae0000 );
background: -ms-linear-gradient( top left, red, #c10000, #ae0000 );
background: linear-gradient( top left, red, #c10000, #ae0000 );
}
This CSS will get this result:
So, here are the items explained:
- Background: Just like you set background image or colors you’ll set gradients as a separate item
- vendor -: We can use “-o” for opera, “-moz” for Firefox, “-webkit” for safari and chrome, “-khtml” for Konqueror and “-ms” for IE
- type: Here we can use “linear” or “radial”
- start / position: This is a X/Y coordinate which tells the browser either the direction (top means that it’ll be top to bottom, and left that it’ll be left to right) or the exact start point (like 600px 300px will invert the example above because the start point will be the bottom right)
- shape: If you use radial gradient you can set it as “circle” or leave it blank so the gradient will be ellipsis-shaped
- size: If you are using radial gradients you can set where the gradient extends to. You can use: closest-side, closest-corner, farthest-side, farthest-corner, contain, cover to set the gradient position.
- Color1: This is the first color. It’ll be the color in the start point you set above
- Colors 2,3,4..: You can add as many colors as you want and they’ll be evenly distributed in the element’s background unless you declare a position.
- Position (for colors): If you don’t want an even distribution you can add your own rules for positioning colors.
Here is an example making use of color positions:
#wd {
background: -moz-linear-gradient( top left, white, black 25% );
background: -webkit-linear-gradient( top left, white, black 25% );
background: -o-linear-gradient( top left, white, black 25% );
background: -khtml-linear-gradient( top left, white, black 25% );
background: -ms-linear-gradient( top left, white, black 25% );
background: linear-gradient( top left, white, black 25% );
}
You can see the result and an outlined area, about those 25% / 75% portions so you can have a better idea on how the browser calculates those values:
Multiple gradients
Let’s dig a little deeper and see more cool stuff you can do. You can start doing advanced stuff and playing with shape combinations to create new effects.
The syntax is pretty simple, all you’ve got to do is separate multiple declarations with commas. Notice that the “z-index” of the gradients will be reversed and the first item will be at the top.
If you set the color to transparent, you can use a background color if you want. Otherwise the color of the top element will hide all the others.
Ok, let’s play with some code now:
#wd {
background:
-moz-linear-gradient( top left, white, transparent 25% ),
-moz-linear-gradient( bottom right, white, transparent 25% ),
-moz-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),
-moz-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )
black;
background:
-webkit-linear-gradient( top left, white, transparent 25% ),
-webkit-linear-gradient( bottom right, white, transparent 25% ),
-webkit-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),
-webkit-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )
black;
background:
-o-linear-gradient( top left, white, transparent 25% ),
-o-linear-gradient( bottom right, white, transparent 25% ),
-o-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),
-o-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )
black;
background:
-khtml-linear-gradient( top left, white, transparent 25% ),
-khtml-linear-gradient( bottom right, white, transparent 25% ),
-khtml-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),
-khtml-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )
black;
background:
-ms-linear-gradient( top left, white, transparent 25% ),
-ms-linear-gradient( bottom right, white, transparent 25% ),
-ms-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),
-ms-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )
black;
background:
linear-gradient( top left, white, transparent 25% ),
linear-gradient( bottom right, white, transparent 25% ),
radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),
radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )
black; }
And this will be your final result:
Cool Effects
As you can see, gradients combinations can lead to awesome results. Here we’ll see a few practical (ok, some of them quite experimental) examples that you can use and even make them better.
Subtle lighting effect
This effect is pretty easy to use, especially for featured images. It gives a subtle elliptical shadow for your elements without additional markup, you can just include it in your images. Oh, and it works pretty well for hovers also.
Here is the CSS to achieve the effect (and also correct positioning for elements):
img {
margin: 0 -60px;
padding: 25px 60px 40px;
background: -moz-radial-gradient( center center, contain, black, white 90% );
background: -webkit-radial-gradient( center center, contain, black, white 90% );
background: -o-radial-gradient( center center, contain, black, white 90% );
background: -khtml-radial-gradient( center center, contain, black, white 90% );
background: -ms-radial-gradient( center center, contain, black, white 90% );
background: radial-gradient( center center, contain, black, white 90% );
}
And this is the effect applied to one o four images:
CSS Background Patterns
There are quite a few highly experimental CSS patterns out there, but there are a few that you can actually use, especially the ones which rely on gradients that end smoothly.
Here is an example on how to apply a subtle background pattern that you can easily integrate in your site:
body {
background:
-moz-radial-gradient( center center, contain, #757575, transparent ),
black;
background:
-webkit-radial-gradient( center center, contain, #757575, transparent ),
black;
background:
-o-radial-gradient( center center, contain, #757575, transparent ),
black;
background:
-khtml-radial-gradient( center center, contain, #757575, transparent ),
black;
background:
-ms-radial-gradient( center center, contain, #757575, transparent ),
black;
background:
radial-gradient( center center, contain, #757575, transparent ),
black;
}
And this will be the rendered result:
It’ll Blow your mind – CSS Painting
If there’s one thing that impressed me since I started with this web stuff is CSS painting. It used to be so hard that you could need several lines of code (like hundreds or thousands) to get the simple ones.
Now with barely 10 lines and a single element you can do simple paintings. This is especially useful if you want to do CSS animations because CSS generated elements are much likely to apply CSS standard animations.
Here is the code I used to do a simple scared face to show to your IE users:
#wd {
position: relative;
width: 450px;
height: 400px;
margin: 20px auto;
background:
-moz-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
-moz-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
-moz-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),
-moz-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )
#f3c2bb;
background:
-webkit-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
-webkit-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
-webkit-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),
-webkit-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )
#f3c2bb;
background:
-o-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
-o-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
-o-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),
-o-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )
#f3c2bb;
background:
-khtml-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
-khtml-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
-khtml-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),
-khtml-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )
#f3c2bb;
background:
-ms-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
-ms-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
-ms-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),
-ms-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )
#f3c2bb;
background:
radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),
radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),
radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )
#f3c2bb;
border-radius: 50%;
}
#wd:after {
content: "Are you using IE??";
position: absolute;
top: 225px;
left: 315px;
padding: 5px 10px;
width: 150px;
font-family: "comic Sans MS",arial,verdana; /* I just couldn't help using comics! */
background: white;
border: 2px solid #E19B92;
border-radius: 4px 4px 4px 4px;
}
And this is the rendered result:
Compatibility notes
There are 2 important final notes on this. First is on old Webkit rules (which still in use for many old versions including mobile). They are slightly different than the ones presented here:
#wd {
background-image: -webkit-gradient(type, position, radius, xpos ypos, outer radius, from(startColor), to(endColor) [, color-stop(25%, middleColor)] );
/* example */
background-image: -webkit-gradient(radial, center center, 0, center center, 120, from(red), to(white), color-stop(10%, blue) );
}
And we have also Microsoft filters for IE. They are better explained in this Microsoft’s guide.
So, what do you think about it?
Can you think of new uses for those CSS gradients? Let us know using the comments section!
