Embed Size (px)
DESCRIPTION
A basic overview on some of the new features offered by CSS3
Citation preview
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
