You are Viewing : HomeBlogsCSS3 – What a beginner web designer must know.

CSS3 – What a beginner web designer must know.

So, What’s all the hype about HTML5 and CSS3? CSS 3 is the next version of Cascading style sheets(CSS) module. It includes so many awesome features, but there is not complete browser support yet. You can get very creative with CSS3 effects.

Lets look at three most common(css3) Properties used nowadays. That also means no IE support, as always. IE is still relying on the filters.

  1. Rounded Corners
  2. Drop shadow
  3. Gradients


 

1) Rounded Corners ( border-radius)

The css way for awesome rounded corners.

CSS3 syntax :

/* Value may be in px, em or pt. */
border-radius: Value;  /* Actual CSS3 property */

/* mozilla's adaptation of the property */
-moz-border-radius: value; 

/* Webkit style - Safari/chrome */
-webkit-border-radius: value;

HTML example code:

<div id="boxee"></div>

And the examples! 

/* create a box first in HTML, div named boxee. */

#boxee {
	background:#900; width:100px; height:100px; display:block;

	/* Round up the corners, the mozilla way. */
	-moz-border-radius:5px;

	/* And the webkit way */
	-webkit-border-radius:5px;/*webkit based browsers */

}

Check out the Demo Here

 

2) Drop Shadow (box-shadow)

It is possible to create realistic and accurate drop shadow effects with box-shadow. No more do we need to hack html, CSS3 will just do it for us.

HTML code:

<div id="boxee"></div>

CSS3 Syntax of this property

/*
 * Most basic syntax 
/* box-shadow is actual CSS3 property, 
 * -moz-box-shadow is the mozilla version 
 * -webkit-box-shadow is the safari/chrome version 
*/

box-shadow: [offset-x], [offset-y] [blur-radius] [Color];


/* Basic example */

/* This would create a drop shadow, which 
 *  falls 2px to the right(yours) and 4 px below
 *  the box . It is blurred for a distance of 8px
 *  and shadow color is black(#000)
*/

box-shadow: 2px 4px 8px #000;

/* value inset */ 
/*  If "inset" is added before the offset-x, then
 *  shadow falls inside the box. So it would look
 *  like it is depressed compared to the surrounding 
 *  structures 
*/
box-shadow: inset 2px 2px 4px #000;

and some examples.

-moz-box-shadow:2px 2px 9px #000;/* Firefox/gecko browsers */
-webkit-box-shadow:2px 2px 9px #000;/* webkit based browsers */

so, as in demo below, Shadow is cast 2px to the right, 2px to the bottom, spread upto 9px and  has  color of #900.

Check out the demo Here.

 

3) Gradients Easier and more Sexier (-moz-linear/radial-gradient or –webkit-gradient)

Create great looking Web 2.0 style buttons and backgrounds! This may sound confusing, But once you understand it, it is as easy it can be.

Type of gradients are Linear or Radial.

HTML Code used is:

<div id="boxee"></div>
Now the basic syntax of the shadow
/* MOZILLA CSS3 Gradient - sorry for the caps, coz its code. */

/* Basic example */
background-image: -moz-linear-gradient(  [point_OR_Angle] , [start_color] , [end_color] );

/* With color stops */
background-image: -moz-linear-gradient( [point OR Angle],  [start_color], [stop_color], [another_stop_color] , [end_color] );

/* WEBKIT CSS3 Gradient */

/* Basic example */
background: -webkit-gradient ( [gradient_type], [First_point], [Next_point], from(start_color_code), to(end_color_code));

background: -webkit-gradient( linear, left top, left bottom, from(Start_color) , to(End_color));

/* With color stops */

background: -webkit-gradient( linear, left top, left bottom, color-stop(0.0, start_color),  color-stop(0.5, inbetween_color ), color-stop(1.0, end_color));

Some examples.

/* some gradient examples */

/* For a Orange gradient in webkit based browsers - Safari and chrome. */

/* in the next line, Gradient type is linear, it starts at "left top", ends at "left bottom". Gradient spawns from the color Red(#F00) to Darkred(#900). */
background: -webkit-gradient(linear, left top, left bottom, from(#F00), to(#900));


/* same effect as above, but in mozilla family. - Firefox/Camino/Flock */

/* below example defines three. Starting point - top, start color - #F00, End color - #FF0 */
background: -moz-linear-gradient(top, #F00, #FF0);

Explanation: –webkit-gradient renders the gradient in Webkit based browser (Safari/Chrome). Similarly, –moz-linear-gradient or –moz-radial-gradient in mozilla browsers(Firefox/Camino).

-moz-linear-gradient or –moz-radial-gradient

You need to define at least three properties (Starting point or angle, start color, end color). If you need a horizontal gradient, Starting point may be left, right and center. For Vertical gradient, it may be top, bottom and center. Or if you define it as the angle of  the gradient (like 45deg),  That would work too.

Starting color and end color may be defined in hex codes or color names. For example. Dark red’s color name is Dark red, hex code is #900.

-webkit-gradient

Look at the -webkit-gradient syntax above. Like mozilla’s gradient property, you need to define at least gradient_type(radial or linear), starting point, end point, from(color) and to(color). That simple.

If you need complex gradients, like a color spectrum, You can use color stops. Look at the last line in the syntax to get the basic idea. When using color stops, “from” and “to” are not required. But you have to define color-stop( [where_to_start]  , #color ). so if i want a red color-stop to be at the middle of the gradient, my color-stop parameters would be color-stop(0.5, #FF0000). If I need another color stop between the red stop and the end, now the value should be 0.75. It’s that simple.

Hey! But what about IE?

As of Oct’ 2010,  still 29.7% of the internet people use Internet explorer. You can always recommend them a better browser, but please don’t ignore them. It is always to safe to include some IE support or offer IE a simpler, yet functional theme. But be careful, adding some of these solutions may break the w3c compliance of your valid XHTML and CSS.

Rounded corners for IE: It is possible to get this using Curvycorners JS script or the Remiz Rehnas’ Curved corners script (Cross browser). Or you can try the IE filters.

Box Shadow: Using IE filters and CSS. A very good article by Chris Casciono can be found here.

 

Demo of these effects can be found Here.

Check out my simplistic theme – Axtra, a mod of kubrick. I have made use of these CSS3 properties to create some pretty nifty effects.

{filelink=1}

 

Reference

W3C – CSS3 current progress

W3C – Backgrounds and borders

Mozilla Developers reference:   -moz-box-shadow | –moz-border-radius | -moz-linear-gradient | -moz-radial-gradient

Safari CSS Visual effects guide : gradients | Full guide PDF 

Feel free to comment. Criticism appreciated.

Regards,

Kavin Gray.