Css3: What is the fuss about

CSS3what’s the fuss about

DavideDiCillo.com @DavideDiCillo

Thursday, October 22, 2009

BORDER RADIUS-moz-border-radius: 20px;

-webkit-border-radius: 20px;border-radius: 20px;

Thursday, October 22, 2009

BORDER IMAGE-moz-border-images: url(/images/border-image.png) 5 repeat;

-webkit-border-images: url(/images/border-image.png) 5 repeat;

-moz-border-images: url(/images/border-image.png) 5 repeat;

Thursday, October 22, 2009

BOX AND TEXT SHADOW-moz-box-shadow: 10px 10px 25px #ccc;

-webkit-box-shadow: 10px 10px 25px #ccc; box-shadow: 10px 10px 25px #ccc;text-shadow: 10px 10px 25px #ccc;

Thursday, October 22, 2009

RGBA AND OPACITYrgba: (200, 30 30, 0.2);

opacity: 0.5;

Thursday, October 22, 2009

ANY FONT YOU LIKE@fontface {font-family:‘Museo’;src: url(‘/fonts/museo.otf’) format (‘opentype’);

Thursday, October 22, 2009

TRANSFORM-webkit-transform: rotate(45deg);

Thursday, October 22, 2009

GRADIENTS-webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)),to(rgba(108, 191, 255, .9)));

Thursday, October 22, 2009

TRANSITIONSdiv { opacity: 1; -webkit-transition: opacity 1s linear; }

div:hover { opacity: 0; }

Thursday, October 22, 2009

MUCH MORE

Multiple Background Images

Gradient Borders

Columns Support

Masking

Text Overflow

Thursday, October 22, 2009

PROBLEMS

2.8%3.2%

48.0%

45.9%

Firefox Internet Explorer Chrome Safari

• Only half of the users can render CSS3• Different markup between browsers

Thursday, October 22, 2009

REMEMBER THIS?Only cause we can, doesn’t mean that we have to

Thursday, October 22, 2009

THANKS!DavideDiCillo.com@DavideDiCillo

Thursday, October 22, 2009