Ancora CSS 3


selettori avanzati
note:

http://www.yourhtmlsource.com/stylesheets/advancedselectors.html

nuovi selettori CSS



Selectors

.row:nth-child(even) {

background: #dde;

}

.row:nth-child(odd) {

background: white;

}



Image-like display

div {

display: inline-block;

}

Attributi specifici

input[type="text"] {

background: #eee;

}

Negation

:not(.box) {

color: #00c;

}

:not(span) {

display: block;

}

indirizzamento specifico

h2:first-child { ... }
div.text > div { ... }

h2 + header { ... }





@font-face


tabella compatibilità

http://caniuse.com/#feat=fontface


dal server

proprietà text overflow

text-overflow

Value
Description
clip
Clips the text
ellipsis
Render an ellipsis ("...") to represent clipped text
string
Render the given string to represent clipped text


parentesi: disegnare per il mobile: immagini

dimensione immagini relativa

dimensione sfondo

#logo {

background: url(logo.gif) center center no-repeat;

background-size: auto

}


vedi :
http://www.css3.info/preview/background-size/


Multiple backgrounds

div {

background: url(src/zippy-plus.png) 10px center no-repeat,

url(src/gray_lines_bg.png) 0 center repeat-x;

}



colonne in css

div#multicolumn1 {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}



http://www.quirksmode.org/css/multicolumn.html






Text-stroke solo chrome



flexible box model

http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/





link

http://westciv.com/tools/transforms/index.html




introduzione layout mobile



immagini fluide

width: 100%

max-width: 100%

Testo em

testo jquery

https://github.com/davatron5000/FitText.js






tecniche css


commenti condizionali (IE)

http://www.quirksmode.org/css/condcom.html


introduzione responsivo


http://www.italianalistapart.com/articoli/17-numero-7-8-giugno-2010/71-web-design-reattivo