All about CSS3

By Shwetank Dixit

Click here, Press → key to advance.

Shwetank Dixit

Developer Relations, Opera Software

W3C MW4D Group ; WaSP-ILG

This is our CTO. He proposed CSS back in the early 90's

The Web was come a long way since then...

Why should a designer care about CSS3?

  • Rounded corners!

  • Use any font you like

  • Animate (kinda) elements on the page

  • Rotate and skew elements

  • Drop shadows on text and boxes

  • Make stuff translucent

  • Code once and have it adjust for multiple devices

Notice the rounded corners ... those sweet sweet rounded corners

Previously, you had to use four images for each corner, and wrap the element in four empty divs

This makes designers sad as it adds to the div soup.

Demo Time!

From now on, make border-radius your friend

// cross browser code for border-radius
 div{
 //The standard. Future proof. Trident, Webkit, and Presto support
 border-radius: 10px 5px 10px 3px; 

 // Gecko specific . FF 4+ aiming to move towards standard though
 -moz-border-radius: 10px 5px 10px 3px; 
 
 //Old Safari and Chrome browsers
 -webkit-border-radius: 10px 5px 10px 3px;
 }

Web Fonts

Till now, you could only use about 6 fonts on the Web

CSS3 Web Fonts

Ability to use any font on your web page

From now on, make @font-face your friend

// Set the font like this
@font-face {
src: url('http://yourwebsitename.com/yourFont.ttf');
font-family: 'myFont';
}

//And then use it just like you use any othe font
#mydiv{font: 2.5em 'myFont';}

Dont go overboard!

Don't sacrifice legibility

Opacity

A quick word...

This is how you make things transluscent

div {
opacity: 0.7;
}

Value should be between 0 (transparent) and 1 (Completely opaque)

Demo

Transitions and transforms

Transitions

Transitioning the state

Can be text color, background color, width, height etc

Lets see how its done

div {
      width: 3em;
      height: 3em;
      background-color: red;
      -o-transition-property: background-color;
      -o-transition-duration: 4s;
      -moz-transition-property: background-color;
      -moz-transition-duration: 4s;
      -webkit-transition-property: background-color;
      -webkit-transition-duration: 4s;
      transition-property: background-color;
      transition-duration: 4s;      
}

div:hover { background-color: blue; }

Demo

Transition timings

div {
      …
      -o-transition-property: background-color;
      -o-transition-duration: 4s;
      -o-transition-delay: 1s;
      -o-transition-timing-function: ease-out;

      //do same for -webkit and -moz specific code
}

Demo

Transforms

Translating, scaling, rotating etc

Translation, rotate, scale demo

div {
height: 100px; width: 100px;
transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
}

Navigation Menu Demo

Picture Viewer Demo

Text and Box shadows

Forget image editors

Text-shadow

#content1{
	text-shadow: 5px -10px 3px #ccc;
}

		        
#content2{
	text-shadow: -5px 10px 0px #ccc;
}
Demo

Box-shadows

div{
    box-shadow:10px 10px 5px #000;
    -moz-box-shadow:10px 10px 5px #000;
    -webkit-box-shadow:10px 10px 5px #000;
}

Box and text shadow demo

Media Queries

One CSS for all resolutions

Lets see some code

@media all and (min-width: 480px) and (max-width: 800px) {
#container {width: auto; max-width: 800px;}
#main {width: 70%; float: left;}
#sidebar {width: 29%; float: left; margin-bottom: 10px;}
#pub {width: 29%; margin-left: 70%; float: none;}	
}

@media all and (max-width: 480px) {
#container, #main, #sidebar {width: 100%; font-size: 0.9em;}
#pub {display: none;}
#sidebar ul li {display: inline;}
*{clear: both; border-left: 0 !important; border-right: 0 !important;}
}

Demo

CSS3 Selectors

Usefull++

Some examples

//Matches anchors elements which link to wikipedia		        
a[href="www.wikipedia.org"]{	text-decoration: underline;
}

//Matches all images whose ALT attribute start with 'The'
img[alt~="The"]{
	margin-right: 55px;
	margin-bottom: 15px;
}

//Matches all images whose ALT attribute have the word 'TV' in them
img[alt*="TV"]{
	margin-bottom: 15px;
}
}

Some examples


//Matches the first list element
ul li:first-child{ //css2
	color: red;
	text-decoration: underline;
}

//Matches the last list element
ul li:last-child{ //css2
	color: blue;
}

//Matches every third list element
ul li:nth-child(3n){ //css3!
	color: green;
}

Vendor Prefixes

Use with caution!

your -moz or -webkit or -o specific code might be deprecated in the future. Plus, if you only have those vendor specific codes, then you miss out on other vendors which support the property

Its fine for small demos etc but for production code, make sure it works on each browser which supports the property and not just on your favourite browser.

Vendor Prefixes

Try to have the standard code along with the vendor specific code, just to make it more future proof.

This is bad!

//Applies only to webkit based browsers :(	        
...
-webkit-transition-property:	background-color;
}

This is much better!

//Applies to all broswers :)        
...
-webkit-transition-property:	background-color;
-moz-transition-property:	background-color;
-o-transition-property:	background-color;
transition-property:	background-color; //future proof
}

Vendor Prefixes

Lets not just give great CSS code just to one layout engine...lets try to make sure that every capable browser gets the proper code

Cheers!

Email: shwetankd@opera.com

Twitter: http://twitter.com/shwetank