Deviant Login Shop  Join deviantART for FREE Take the Tour
×

:iconim-not-sana: More from im-not-sana


More from deviantART



Details

Submitted on
May 28, 2013
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
5,036 (7 today)
Favourites
109 (who?)
Comments
58
×

PE: CSS3 101 - Color Gradients

Tue May 28, 2013, 3:40 PM
PE 2010 stamp by projecteducate





Table of Contents:


This article contains two major topics of Gradients:


1. Linear-Gradient :dalogo:



2. Radial-Gradient :dalogo:



Supported by:


:iconfirefoxplz:
Firefox 16+
:icongooglechrome:
Chrome 26+
:iconsafariplz:
Safari 5.1+
:iconinternetexplorerplz:
Internet Explorer 10+
:iconoperaplz:
Opera 12.1+


What are Gradients?


A color gradient, in terms of computer graphics, specifies a range of positioned colors to fill a certain region. By specifying a different color at different positions produces smooth color transitions in between the different ranges.

A linear color gradient is specified by different points with a color at each point. Colors along the path through those points are calculated and then extended across to fill the region.


Fig. 1 - Linear Gradient
A radial color gradient is specified as a circle that has one color in the center and another at the corners. Colors are calculated based on the distance from the center.


Fig. 2 - Radial Gradient
However with CSS3, instead of uploading gradient images to your webpage as you can see in Figures 1 & 2, you can just code the gradient right in. Since I'm more of a Visual Learner myself, I'm just going to go right ahead and start teaching as I go along with examples.

Linear-Gradients



The first topic of CSS3 I'd like to cover is one that's already available to *PremiumMembers in Journal Skins. By the way, there's a BlackBerry promotion going on, so Non Premium Members can use Journal skins from this page me.deviantart.com/journal/?edi… and test these features out as well :)

Vertical Gradients


This type refers to the gradient changing from top to bottom. This is the default gradient we'll see when entering the basic syntax:
linear-gradient(color, color);

CSS
/* W3C Standard that works in dA */
.box {
width: 200px;
height: 200px;
background: linear-gradient(#000000, #ffffff);
}

HTML
/* The same HTML class I'll be using throughout Linear Gradients */
<div class="box"></div>

OUTPUT


Fig. 3

Note: To use Linear-Gradients on webpages other than dA, it's preferred to add the following syntax for full Browser Compatibility

.box {
background: #000000;
background: linear-gradient(#000000, #ffffff);
/* Firefox 3.6+ */  
background: -moz-linear-gradient(#000000, #ffffff);
/* Safari 5.1+, Chrome 10+ */  
background: -webkit-linear-gradient(#000000, #ffffff);
/* Opera 11.10 */
background: -o-linear-gradient(#000000, #ffffff);
}

Note: To be as backward compatible as possible on browsers, it's best to first specify a default background color
background: #000000;


What if we want to add more colors vertically?


Well then go ahead and add as many as you want and it will evenly distribute the positions of these colors!
linear-gradient(color, color, color, etc.);

.box {
background: linear-gradient(maroon, red, orange, yellow, green, blue, purple, pink, #FFFFFF);
width: 200px;
height: 200px;
}

OUTPUT


Fig. 4

Note: For some reason, dA won't allow you to use ALL color names (ex: red, blue) in linear-gradients so I had to insert a hex value of white (ex: #FFFFFF = white) at the end. I'm only using names here so that beginners can follow easily, but it's better to use hex values or rgba (ex: rgba(255, 255, 255, 1) = white) If you DO want to use the names make sure you enter at least one hex value wherever.

Well that was easy enough! :dummy: Don't you think?
Good, 'cause now this is where things get a little complicated :noes:



What if I want to control the position of where the colors stop?


For that the syntax will change a bit.
linear-gradient(color position, color position, etc.);
Where the position is calculated in percentages. The position is usually considered as the color stop because that's where it will stop and the new gradient will start.

.box {
background: linear-gradient(#FFFFFF 30%, black 100%);
width: 200px;
height: 200px;
}

OUTPUT


Fig. 5
In Fig. 5 you can see that white is opaque until 30% of the box and that's where it stops and starts to change its gradient from gray until it reaches black at 100% which is at the bottom of the box.

What if I want to control the direction of the vertical gradient?


Again, you'll need to add a bit more to the syntax:
linear-gradient(to direction, color stop, color stop, etc.);
The direction can either be starting from top or bottom depending on you!

Note: The syntax for linear-gradients has changed for the direction, where "to direction" used to just be to "direction" ex: to bottom used to be bottom. This only works in old browsers with prefixes and dA will change the syntax for you, but it's better to use the new syntax. Thanks to pikadudeno1 for pointing it out!

.box {
background: linear-gradient(to bottom, #FFFFFF 30%, black 100%);
width: 200px;
height: 200px;
}

OUTPUT


Fig. 6

Challenge!


Now we can take what we've learned and apply it to create a 3D looking button!



Hover here and hold Click!
Fig. 7

As you can see, the gradients change when hovered on, and clicked on. In the snippet below, you can see that the gradient becomes lighter in opacity when hovered on, and changes from top to bottom when clicked on. This, along with some other attributes such as box-shadow, creates a nice 3D effect.

HTML
<a href="" class="button">3D Button!</a>

CSS
.button {
background: #B73E62;
background: linear-gradient(rgba(183, 62, 98, 0.3), rgba(183, 62, 98, 1));
}
.button:hover {
background: linear-gradient(rgba(183, 62, 98, 0.1), rgba(183, 62, 98, 0.5));
}
.button:active {
background: linear-gradient(to bottom, rgba(183, 62, 98, 0.3), rgba(183, 62, 98, 1));
}

Try it out yourself here!

Horizontal Gradients


This type of gradient refers to the colors changing from left to right or vice versa.
linear-gradient(to direction, color, color, etc.);
Where direction is either left or right
Of course, you can always add the position in percentages to better suit your needs.

.box {
background: linear-gradient(to left, #FFFFFF 0%, black 20%, white 40%, black 60%, white 80%, black 100%);
width: 200px;
height: 200px;
}

OUTPUT


Fig. 8

Diagonal Gradients


You can achieve this in two ways, with angles or direction:
linear-gradient(to direction direction, color stop, color stop, etc);
linear-gradient(angle, color stop, color stop, etc.);

The angle starts at 0deg same as to bottom  ↑
Then goes clockwise to 45deg starting from bottom left to top right  ↗ same as to top right
At 135deg it starts from top left to bottom right  ↘ same as to bottom right
At 225deg it starts from top right to bottom left  ↙ same as to bottom left
At 315deg it starts from bottom right to top left  ↖ same as to top left

.box {
background: linear-gradient(45deg, yellow, orange, pink, #ffffff);
width: 200px;
height: 200px;
}

OUTPUT


Fig. 9

Angled Gradients


Of course, you can get creative with the different degrees of angles and positions and do your own style of gradient.

.box {
background: linear-gradient(20deg, magenta 20%, red 60%, #ffffff 80%);
width: 200px;
height: 200px;
}

OUTPUT


Fig. 10

Still awake?



Well sadly, this is where Color Gradients ends in regards to deviantART.
But read on, if you're still interested to use them on your own webpages! :#1:

Repeating-Linear-Gradient


This does exactly what the title says, repeats the gradients so you can create a sort of pattern. Imagine the endless possibilities! You can completely replace background images with this.

div {
background: repeating-linear-gradient(black, black 20px, white 20px, white 40px);
width: 200px;
height: 200px;
}

OUTPUT



Fig. 11 - Click to see Live Preview

Note: You can test the rest of these gradient attributes in the Image Links provided. Copy the code, press Reset and start from there.

Radial-Gradient



This is a gradient created in circles, automatically starting from the center to the edges
radial-gradient(color, color);

div {
background: radial-gradient(black, white);
width: 200px;
height: 200px;
}

OUTPUT



Fig. 12 - Click to see Live Preview

What if I want to add more colors at different positions?


As with linear gradients, you can add more colors and change position of the radial gradients as well with the following syntax
radial-gradient(color stop, color stop, etc.);

I just created a simple flag of Japan for the example below, but you can get creative with this!

div {
background: radial-gradient(red, red 40%, white 40%, white 80%);
width: 200px;
height: 200px;
}

OUTPUT



Fig. 13 - Click to see Live Preview

Note: The first color will automatically be positioned at 0% which is the center of the circle. But you can also change where you want it to start by specifying a percentage

What if I want a specific size?


If you want a circular size the syntax will be like this:
radial-gradient(sizepx, color stop, color stop);
If you want an oval shape the syntax will be like this:
radial-gradient(widthpx heightpx, color stop, color stop);

In the following example, I made an oval shape that looks like a face with a blue background. With this CSS3 feature, you can easily create shapes and images using radial and linear gradients!

div {
background: radial-gradient(100px 150px, pink, pink 50%, cyan 50%, cyan 100%);
width: 200px;
height: 200px;
}

OUTPUT



Fig. 14 - Click to see Live Preview

Challenge!


Try to create this face using extra div classes with use of positioning and sizes.

Fig. 15 - Click to work on Template

Repeating-Radial-Gradient


This creates a repeated pattern of radial gradients with the same syntax
repeating-radial-gradient(color stop, color stop);

div {
background: repeating-radial-gradient(black 0%, white 10%, black 20%);
width: 200px;
height: 200px;
}

OUTPUT



Fig. 16 - Click to see Live Preview

Cool Effects by Specifying a Size!


You can also add sizes to this as well to create some cool fractal type effects with the syntax
repeating-radial-gradient(size, color stop, color stop);

div {
background: repeating-radial-gradient(10px, black 0%, white 10%, black 20%);
width: 200px;
height: 200px;
}

OUTPUT



Fig. 17 - Click to see Live Preview

And that's all there is to it! Link me to any interesting gradient styles you come up with through this tutorial on cssdesk.com and leave a comment if you have anymore inquiries! Thanks for reading and hope you found this useful and easy to follow! :heart:



TL;DR - Documentation



linear-gradient(to direction, color stop, color stop);
linear-gradient(angle, color stop, color stop);
direction: top bottom left right
angle: 45deg ↗ 135deg ↘ 225deg ↙ 315deg ↖
color: white #FFFFFF rgb(255,255,255) rgba(255,255,255,1)
position: 0% - 100%

repeating-linear-gradient(size, color stop, color stop);
size: 10px or 10px 10px etc.
color: white #FFFFFF rgb(255,255,255) rgba(255,255,255,1)
position: 0% - 100%

radial-gradient(width height, color stop, color stop);
width: 10px etc.
height: 10px etc.
color: white #FFFFFF rgb(255,255,255) rgba(255,255,255,1)
position: 0% - 100%

repeating-radial-gradient(size, color stop, color stop);
size: 10px or 10px 10px etc.
color: white #FFFFFF rgb(255,255,255) rgba(255,255,255,1)
position: 0% - 100%

Vendor Prefixes


You should take note to use the following prefixes in front of each CSS style property for full Browser Compatibility on non-dA webpages:
Android: -webkit-
Chrome: -webkit-
iOS: -webkit-
Safari: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
Opera: -o-

Example:

If you want to add a Linear Gradient:
linear-gradient(black, white);

You should add these:
background: black; /* Default color for really old devices */
background: linear-gradient(black, white); /* W3C Standard */
background: -webkit-linear-gradient(black, white); /* Chrome, Android, iOs, Safari */
background: -moz-linear-gradient(black, white); /* Firefox */
background: -ms-linear-gradient(black, white); /* Internet Explorer */
background: -o-linear-gradient(black, white); /* Opera */


Useful Links

If you'd like to learn more about CSS basics, I suggest you have a look at these groups:
:iconcss-dyk: :iconecssited:
Create your own Journal Skin by miontre
Ultimate CSS Gradient Generator
Linear-Gradients by jonarific
Learn more about rgba() and Alternate Color Models by jonarific

Examples of Journal Skins using Linear Gradients

Default Blue by im-not-sana Dark Space by im-not-sana
If you have one as well, let me know and I'll add it here




#ProjectEducate presents CSS3 101 - Color Gradients compiled by `im-not-sana.
This Article discusses Linear Gradients and Radial Gradients with their variations and provides examples.

CSS3 101 Topics:
May 27th - Introduction
May 28th - Color Gradients
May 30th - Pseudo-elements & Pseudo-classes
May 31st - Transition Animations
June 2nd - Conclusion
Add a Comment:
 
:iconsulaman:
sulaman Featured By Owner Oct 1, 2013
Hi, 

Have made a similar website, based on CSS3. 


Hope this may help you.


Reply
:iconpikadudeno1:
pikadudeno1 Featured By Owner May 31, 2013  Hobbyist Digital Artist
Oh, and in case it wasn't clear from my previous comment, don't use "to" with angles.
Reply
:iconpikadudeno1:
pikadudeno1 Featured By Owner May 31, 2013  Hobbyist Digital Artist
The direction parameter information is missing two key points:

1. The CSS standard changed, so you should now be using "to <named direction>", which indicates where the direction is going (just like with angles), instead of where it starts. dA will correct the to-less form for you, but it doesn't hurt to make a habit of doing it the correct way.

2. You can actually combine two direction keywords, e.g. "to bottom right". This produces the angle where the middle of the gradient connects the two neighboring corners, e.g. the bottom-left and top-right corners. Since that'll only produce a perfectly diagonal gradient for square boxes, you'll still want to know angles like 135deg for some cases.
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 31, 2013  Hobbyist General Artist
That's true :nod: Both well noted points and will revise my article with the correct syntax. I had actually started writing this article about a year ago and didn't double-check the syntax but thanks for pointing it out :)
Reply
Flagged as Spam
:iconkittylyn-donut:
Kittylyn-Donut Featured By Owner May 30, 2013  Hobbyist General Artist
thank you very much! that was pretty clear :3
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 30, 2013  Hobbyist General Artist
That's a relief! :phew:
Reply
:iconsimplysilent:
SimplySilent Featured By Owner May 29, 2013
Wonderful article! Thanks for all the great info~ :aww:
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 30, 2013  Hobbyist General Artist
Thanks dear! :love:
Reply
:iconnoru-kinz:
Noru-kinz Featured By Owner May 29, 2013  Student Digital Artist
.....I clicked this since it was at the bottom, now I am just extremely confused......

ALL I KNOW IS THAT THOSE ARE SOME PRETTY COLORS UP THERE!!!!! :D
Reply
Add a Comment: