Page 1 of 1

The Comprehensive Guide to CSS3 Showing you how to make that sleek design you have always wished for Rate Topic: ***** 3 Votes

#1 Shane Hudson  Icon User is offline

  • D.I.C Technophile
  • member icon

Reputation: 343
  • View blog
  • Posts: 1,286
  • Joined: 06-December 09

Posted 23 February 2010 - 12:42 PM

*
POPULAR

You have probably seen many websites that look very stylish and modern without using any/very few images or Javascript. How is this possible? Easy! Just use CSS3. This guide will show you what is currently available by using CSS3 and will help you to improve your website designing skills.

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!

Is This A Good Question/Topic? 7
  • +

Replies To: The Comprehensive Guide to CSS3

#2 Fungle  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 256
  • View blog
  • Posts: 337
  • Joined: 06-March 10

Posted 09 March 2010 - 03:17 AM

Very nice tutorial shane, Very useful for my College project.
Was This Post Helpful? 0
  • +
  • -

#3 williamgeorgegardner  Icon User is offline

  • CEO of GeekTelligence
  • member icon

Reputation: 19
  • View blog
  • Posts: 584
  • Joined: 27-December 09

Posted 11 March 2010 - 09:34 AM

Great tutorial, Shane this is very helpful. :rockon:
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1