CSS3 Tutorial: Gradients, Rounded Corners and Transforms – Part 1

The introduction of CSS3 into the web designers aresenal has been a key to creating and implementing trends throughout the web design world.  Not only is it great for designers to take advantage of features such as transforms, rounded corners and gradients, but it also makes the whole website much tighter for SEO purposes.

It is specifically important to note how important it is to create keyword rich buttons for users to click on.  Unfortunately, in the old days of the world wide web, the only way to create slick and clean buttons was to create an image (text and all) in an outside program and insert the image into the site.  As years passed and SEO took to the forefront of website design and development, this practice has become less acceptable.

Onto The Stage Comes CSS3

In this two part series, Im going to discuss how to create a cool looking button in pure CSS3 fashion starting with gradients and then moving on to rounded corners and transforms.

Linear vs. Radial

Before we start playing around with all the CSS3 fun, create a div to experiment with or copy the code below (minus the quotes) and paste it into the body.

Example:

[box style=”rounded” border=”full”]<div class=”test”></div>[/box]

Next we’re going to create the initial class that we’re going to play around with.

Example:

[box style=”rounded” border=”full”].test{

background:-moz-linear-gradient(silver,black);

background:-ms-linear-gradient(silver,black);

background:-o-linear-gradient(silver,black);

width:200px;

height:200px;

}[/box]

What you see here is quite simple. With the background property we’re able to create a gradient fill and in the brackets, the colours used in the gradient.  The reason it is written 3 times with the moz, ms, and o prefixes is to create a compatibility with the browsers. The height and width properties are just setting the size of the div.

With ease, CSS3 allows you to change to a radial gradient by simply changing the word ‘linear’ to ‘radial’.

Example:

[box style=”rounded” border=”full”].test{

background:-moz-radial-gradient(silver,black);

background:-ms-radial-gradient(silver,black);

background:-o-radial-gradient(silver,black);

width:200px;

height:200px;

}[/box]

Controlling Your Gradient

Now this seems all fine and dandy, but what if you want a third colour into the mix.  Just add another colour into the list you have going and seperate it with a comma (note that you may also use hexidecimal colours).

Example:

[box style=”rounded” border=”full”].test{

background:-moz-linear-gradient(silver,#7f0000,black);

background:-ms-linear-gradient(silver,#7f0000,black);

background:-o-linear-gradient(silver,#7f0000,black);

width:200px;

height:200px;

}[/box]

Not only that, but you can also control where your gradients start and finish. To do this, add in a percentage corresponding with the colour you want to control. You can get some really neat outcomes just playing with the percentages. Check out this one below!

Example:

[box style=”rounded” border=”full”].test{

background:-moz-radial-gradient(white 60%,silver 10%,black);

background:-ms-radial-gradient(white 60%,silver 10%,black);

background:-o-radial-gradient(white 60%,silver 10%,black);

width:200px;

height:200px;

}[/box]

Tiling is also possible using this technique.  Because it’s all controlled in CSS, adding a background-size property you’re able to shrink the image down to whatever size wanted and still fill the width and height properties. Try adding the background-size to the example above or copy and paste the code below.

Example:

[box style=”rounded” border=”full”].test{

background:-moz-radial-gradient(white 60%,silver 10%,black);

background:-ms-radial-gradient(white 60%,silver 10%,black);

background:-o-radial-gradient(white 60%,silver 10%,black);

background-size:25px, 25px;

width:200px;

height:200px;

}[/box]

The last technique Ill show you is all about the position of your gradient. Perhaps you dont always want your radial gradient to be centered.  To achieve this, add the background-position property to your class. See the example below.  I also increased the background-size property to prevent tiling.

Example:

[box style=”rounded” border=”full”].test{

background:-moz-radial-gradient(transparent,black 50%);

background:-ms-radial-gradient(transparent,black 50%);

background:-o-radial-gradient(transparent,black 50%);

background-position:20px 20px;

background-size:300px 300px;

width:200px;

height:200px;

}[/box]

The Ever Expanding Horizon Of CSS3

As you can see, the possibilities are endless as what you’ve seen here is really just the tip of the iceberg.

Have fun, experiment and visit back for part two when I explain rounded corners and transforms.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

 
Top