CSS3 PRONTI ALLUSO!Introduzione ai moduli pi maturi delle nuove specifichedi Filippo Buratti

CSS3 != HTML5

199619992002200520082011

CSS VENDOR PREFIXES

-moz -webkit -ms -o-

PROGRESSIVE ENHANCEMENTIE9IE7

HTML5 RESET STYLESHEET

article, aside, figcaption, figure, footer, header, hgroup, nav, section { display:block; }

SELECTORS & PSEUDOCLASSES

first-of-type & last-of-typebody > section:first-of-type { width: 420px;}body > section:last-of-type { width: 280px;}

WEB FONTSLibert tipografica!

@FONT-FACE@font-face { font-family: 'SansationRegular'; src: url('Sansation_Regular.ttf');}h1 { font-family:'SansationRegular, Arial, Helvetica, sans-serif; }

@FONT-FACE CROSSBROWSER@font-face { font-family: 'SansationBold'; src: url('Sansation_Bold.eot?'), url('Sansation_Bold.woff') format('woff'), url('Sansation_Bold.ttf') format('truetype'), url('Sansation_Bold.svg#id34') format('svg');}

COLORS

RGBA VS OPACITY/* background: url(bg-black.png); */background: rgba(0,0,0, 0.5);

BACKGROUND & BORDERSEffetti grafici cool con i fogli di stile

BOX-SHADOWbox-shadow: 10px 10px 5px #666666;

.test { -moz-box-shadow: 0 0 10px #888; -webkit-box-shadow: 0 0 10px #888; box-shadow: 0 0 10px #888;}

ROUNDED CORNERSaside { -moz-border-radius: 10px;-webkit-border-radius: 10px; border-radius: 10px; }

MULTIPLE BACKGROUNDSbody { background: url(images/clouds.png) repeat fixed 40% 40%, url(images/clouds2.png) repeat fixed 25% 55%, url(images/clouds.png) repeat fixed 15% 15%, url(images/sun.png) no-repeat fixed 95% 5%; background-color:#b6dffd;}

FULL PAGEBACKGROUNDIMAGEbody { background: url(images/sky.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

2D TRANSFORMPhotoshop, Javascript ? no, CSS3!

TRANSFORM FUNCTIONS

rotatescaleskew translate

rotate(5deg)scale(1.2)Skew(30deg)Translate(0,30px)

MENU EFFECTSheader > nav a:hover { -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);}

MEDIA QUERIES

@MEDIA@media only screen and (max-device-width:480px) { /* Styles */ }

COSA MANCA?

FINEGrazie. Filippo Buratti

web: filippoburatti.netblog: cssrevolt.comTwitter: @fburatti

******