CSS3 Gradients

RockerMan · 1 CSS3 Gradients Thu Dec 16, 2010 12:06 am

RockerMan

Technician

Posts : 901
Points : 388
Age : 32
Location : Georgia
Browser : Firefox

CSS3 Gradients
CSS gradient property for beginners

OK so today we are going to discuss CSS3 Gradients and how to master them. They can be a little confusing to asomeone who is just starting in CSS. Follow this guied and you should be fine Smile

OK so lets have a look at the code:

Code:: #linearBg2 { height: 100px; background-color: #1a82f7; /*IE Fall Back*/ background: url(images/linear_bg_2.png);/*Another IE Fall Back*/ background: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); }

OK so unfortunatly the code look nothink alike, as you may know WebKit
is the following browsers:

Safari
Google Chrome
Opera
There is others but they are no where near as popular

And of course is Mozilla (Firefox Only).

Now a quick explination why we have to use the Moz tag, if we just use linear-gradient Firefox will not pick it up as it requiers you to reference that you want to apply it to Firefox.

Quick Tip: IE doesn't support CSS3 as of yet, so we must alway provide a fall back option, see the code for more details on this. IE 9 is due to be released fully soon. Then it will support it Smile

OK now to the ponint....

Firefox first Smile

-moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);

We've already coverd this, you need to refrence the browser and what you want to do, in this case its a linear gradient for Firefox.
OK so this is refrencing that we want a 90 degree gradient from bottom to top 100% specifying the belnd mix, like color stops in Photoshop
This is the bottom color, choose your color in a color picker and insert you HEX here.
Exactly the same as above but this is the top color

OK now WebKit Browsers....

-webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727))

Again this is just to refrence the browser and to tell it you want a gradient
Now this is a little diffrent isn't it? Don't worry though WebKit just needs you to put in into the code rather then the selector
Again these are just color stops, we will cover these in a further more comprehensive tutorial
Self explanatory really, from what color would you like to from.....
and to what color to. Very easy

Don't forget to check you brackets, it won't work if you dont!

Thanks For Reading Very Happy