Remember: CSS3 is not yet compatible in all browsers so use it to improve the design, rather than relying upon it for important aspects such as usability. Also, all information here is subject to change due to CSS3 still being a Working Draft.
Contents
- Rounded Border – Border-Radius
- Border Images – Border-Image
- Box Shadow – Box-Shadow
- Colours – RGBA, HSL
1. Rounded Border – Border-Radius
This is one effect that is very common, though many people use either images or Javascript to achieve it… a better way of doing this (it is not currently in all browsers, but is in most of them) is by using the CSS3 attribute: <inline>border-radius</inline>. Using this property, it is also possible to set certain corners to different radii.
Note: Although the property is called border-radius, even if you have your border set to none, it rounds the background as well.
Syntax
Element {
-moz-border-radius: radius size;
-webkit-border-radius: radius size;
}
Example 1.1 – Rounded navigation items when hovering over them
.nav-item a:hover {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
Example 1.2 – Only round the top right corner
#content {
-moz-border-radius-topright: 15px;
-webkit-border-top-right-radius: 15px;
}
Compatibility: Firefox, Safari, Chrome
2. Border Images – Border-Image
Sometimes designers like to have borders which look unique, some even have each corner with a different design. With CSS3 you can achieve this effect (as long as you already have the images of course) with just a few lines of code.
Note: The Border-Image property allows you to use one image for the whole border, different images for each edge and images for each corner.
Syntax
Element {
border: width type colour;
-webkit-border-image: image url size repeat;
-moz-border-image: image url size repeat;
border-image: image url size repeat;
}
Example 2.1 – Repeated continuous border
#content {
border: 5px solid #ccc;
-webkit-border-image: url(images/border.jpg) 5px repeat;
-moz-border-image: url(images/border.jpg) 5px repeat;
border-image: url(images/border.jpg) 5px repeat;
}
Example 2.2 – Different images at each corner
#content {
border: 5px solid #ccc;
-webkit-border-image: url(images/border.jpg) 5px repeat;
-moz-border-image: url(images/border.jpg) 5px repeat;
border-image: url(images/border.jpg) 5px repeat;
}
Compatibility: Firefox, Safari, Chrome
3. Box Shadow – Box-Shadow
Another effect that designers often use is shadow, you can see it on almost every type of design… so why would web design be any different? Until CSS3 was started, designers had to (like so many other effects) use Javascript and/or images. Images are slow, most website developers recommend using as few images as possible, CSS3 allows us to make shadows in (you guessed it) only a few lines of code!
Note: Some people get confused with box shadows as there are a few different attributes. The horizontal offset is where the shadow will be horizontally, e.g. If it is a positive number then the shadow will be on the right of the box, if it is negative then it will be on the left. The vertical offset is similar, however if it is a positive then the shadow will be above the box, if it is a negative then it will be below. The blur radius is, quite self-explanatory really, how blurry the shadow is; if the blur radius is 0 then it will be sharp, then the higher you go the sharper it will be.
Syntax
Element {
-webkit-box-shadow: [horizontal offset] [vertical offset] [blur radius] colour;
-moz-box-shadow: [horizontal offset] [vertical offset] [blur radius] colour;
box-shadow: [horizontal offset] [vertical offset] [blur radius] colour;
}
Example 3.1 – Soft Shadow
.post {
-webkit-box-shadow: 10px 10px 0px #ccc;
-moz-box-shadow: 10px 10px 0px #ccc;
box-shadow: 10px 10px 0px #ccc;
}
Example 3.2 – Hard Shadow
.post {
-webkit-box-shadow: 10px 10px 5px #ccc;
-moz-box-shadow: 10px 10px 5px #ccc;
box-shadow: 10px 10px 5px #ccc;
}
Compatibility: Firefox, Safari, Chrome
4. Colours – RGBA, HSL
RGBA
The RGBA is a feature of CSS3 that is becoming more and more popular by the day. It extends the basic RGB colour spectrum with Alpha (aka opacity or transparency). Designers have always liked transparency but before CSS3 it was quite a hard effect to achieve.
Syntax
Element {
Property: rgba(red,blue,green,alpha);
}
Example 4.1 – Red transparency
.post {
background-colour: rgba(255,0,0,0.5);
}
Compatibility: Firefox, Safari, Chrome
HSL
This is a colour spectrum that is being introduced into webdesign with CSS3. HSL stands for Hue, Saturation and Lightness. The Hue is the colour and is represented as a number. Unlike Hue, both Saturation (the amount of colour, 0% being gray) and Lightness (how bright the colour is, 0% being black) use percentages instead of numbers.
Note: It is important to remember that, unlike RGB, the base colours of HSL (often shown in a colour wheel) are:
- 0 = Red
- 120 = Green
- 240 = Blue
- 360 = Red
Syntax
Element {
Property: hsl(hue, saturation, lightness);
}
Example 4.1 – Green using HSL
.post {
background-colour: hsl(120,100%, 50%);
}
5. Backgrounds
Multiple Backgrounds
Have you ever needed more than one background-image but have had to make lots of “wrapper” divs to get it to work? Well, no longer! With CSS3 we are now able to just list the backgrounds we want, in the order we want them... how good is that?!
Syntax
Element {
Background: attributes, attributes...;
}
Example 4.1 – Red transparency
.post {
Background: url(“images/grad.jpg”) repeat-x, url(“images/bg.jpg”) no-repeat;
}
Note: This is an unfinished guide. It has been sitting in my documents for too long so I thought it would be useful to many of the beginners here if I posted it now. I plan to extend it (maybe by editing this one, maybe by turning it into a series) so that it covers all new aspects of CSS3. This would include transformations etc. some of the new features are rather hard so I would like this guide to be useful to everybody!
There will also be links to recommended articles, screenshots and even live demos so be warned... this is just a taster of what is to come!
MultiQuote
| 