HTML & CSS: CSS3 Gradients
In this tutorial we are going to look at creating gradients, purely using CSS3.
Let’s just go ahead and set up a basic website template (note that I’ve created this one based on the code from last lesson):
HTML:
<!DOCTYPE html> <html lang="en"> <head> <!--Head--> <meta charset="utf-8"> <title>untitled</title> <!--Page title--> <link rel="stylesheet" href="css/style.css"/> <!--Link the stylesheet--> </head> <!--End Head--> <body> <!--Body--> <div id="container"> <!--Page container--> <div id="content"> <!--Main content division--> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse semper tortor eget nulla mattis at tempus semfermentum. Praesent neque risus, ullamcorperi vestibulum accumsan sit amet, rhoncus ut nunc. Nullam quam risus, laoreet a consequat at, bibendum et enim. Pellentesque in lacus risus, vitae tincidunt ptortor. Nullam et ullamcorper elit. Integer blandit ultricies felis consequat porttitor. Donec rutrum pellentesque nibh, vitae dictum est placerat vel. Praesent fermentum porta lorem nec suscipit. </div> <!--End main content division--> </div> <!--End page container--> </body> <!--End Body--> </html>CSS:
html, body {
height: 100%; /* Whole page is 100% high */
}
body {
background: #775e43; /* Body background */
}
#container {
width: 800px; /* 800px content container */
height: 100%; /* From page top to bottom */
position: fixed; /* Position in relation to the browser window */
top: 0px; /* Stuck at the top */
left: 50%; /* 50% from the left */
margin-left: -400px; /* Push the division left by half our total container width */
background: #af9f7b; /* Container background */
}
#content {
width: 380px; /* Division width */
height: 380px; /* Division height */
padding: 20px; /* 20px Padding */
position: fixed; /* Position in relation to the browser window */
top: 50%; /* 50% from the top */
left: 50%; /* 50% from the left */
margin-top: -200px; /* Push the division up by half our total height */
margin-left: -200px; /* Push the division left by half our total width */
background: #ddd; /* Division background */
border: 2px solid #251c17; /* Division border */
/* Set font-size, line-height and font-family */
font: 18px/1.5em helvetica, arial, sans-serif;
color: #130a05; /* Text colour */
-moz-border-radius: 4px; /* Rounded corners -moz- */
-webkit-border-radius: 4px; /* Rounded corners -webkit- */
border-radius: 4px; /* Rounded corners CSS3 standard */
-moz-box-shadow: 0px 2px 5px #775e43; /* Box shadow -moz- */
-webkit-box-shadow: 0px 2px 5px #775e43; /* Box shadow -webkit- */
box-shadow: 0px 2px 5px #775e43; /* Box shadow CSS3 standard */
text-shadow: 0px 1px 2px #775e43; /* Text shadow */
}
Ok. So now we have a basic page setup – we can begin adding a gradient!I’ve decided that I want to add my gradient to the #content division and am just going to have a subtle gradient that goes from a grey or maybe a brown, to a white-ish colour (I want this to stay on for the majority of the division background), and then back to the start colour.
Unfortunately CSS3 gradients are currently implemented in very different ways in each browser this time and of course will not work in IE.
The first thing we should always put for older browsers (and IE) to fall back on, is the regular background colour. In our case we have already put this in as: “background: #ddd;”
Now let’s start with the webkit (Safari and Chrome) implementation. If you’ve used a programming language (or Javascript) before then you should probably recognise that the webkit implementation looks a lot like using functions. I’ll show you the code to do what I personally wanted for webkit, and then I’ll explain it afterwards:
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), color-stop(0.1, #ddd), color-stop(0.9, #ddd), to(#ccc));So firstly we set the background to “-webkit-gradient”. This is almost like a function that webkit uses to create gradients. In the brackets we first tell it what type of gradient we want (radial, linear etc) – in this case we want a linear gradient. We then separate the parameters by a comma and pass it the next parameter – which is where we want the gradient to start. In this case we want it to start in the top left (or “left top” as it makes us call it) and end in the left bottom (the next parameter). Any parameters after this are to set the gradient itself (you can have as many as you like of these). In this case we start with using the “from function” to specify the starting point of the gradient. If we wanted we could go straight to the “to function”, but instead we want it to stop at certain percentages down at certain colours. In this case we’ve specified that it should stop at the color “#ddd” when it’s 0.1 or 10% of the way down, and should still be “’#ddd” when it’s 0.9 or 90% of the way down. We then finish with the final destination colour, which is “#ccc”.
Note that if we decided not to use the “from and to functions” then we could simply use colour stops at 0 (right at the start) and at 1 (right at the end). We can specify as many colour stops as we like remember!
It’s also worth noting that the gradient I have chosen is quite subtle, if you cannot see it on your monitor – try changing the colours yourself from “#ccc” to something darker like “#bbb”.
Ok – so now we have the webkit gradient out of the way, we need to implement the Firefox version.
This is pretty different and is generally considered as the favourite of the two, different browser methods. The code is as follows and once again I’m going to explain it afterwards (although after seeing the last one, you should understand it anyway):
background: -moz-linear-gradient(top, #ccc, #ddd 10%, #ddd 90%, #ccc);We use the “-moz-“ vendor prefix and specify the gradient type in the ”function” (“linear-gradient”). We then specify the start point (“top”) and it figures out that it’s supposed to go to the bottom. We then specify the gradient colours and if we want to give it a percentage down then we can simply write a percentage after the colour (notice that the colour and percentage are not separated by a comma).
If we have our two CSS3 browser gradient rules and also a background colour to fall back on – we should be good to go! Note that although it is possible (and has been for some time now) to create gradients in CSS with IE – it uses IEs filter system and is much more complicated that it should have to be. I’m not going to cover how this works, but if you want to know then Google has the answers.
Back to HTML & CSS
