Alla Scoperta di CSS3 Go!WebDesign
32
CSS3 ALLA SCOPERTA DI
-
Upload
giuliano-ambrosio -
Category
Design
-
view
2.207 -
download
1
Transcript of Alla Scoperta di CSS3 Go!WebDesign
CSS3ALLA SCOPERTA DI
STORIA – Alla Scoperta di CSS3
CSS2Reccomandation W3C
CSS2.1working draft W3C
CSS2.2Proposta Specifica intermedia
CSS3Quando sarà una W3C Reccomandation?
ai Maya l’ardua sentenza…
<selettori>
Selettori di Attributo – Alla Scoperta di CSS3
selettore[att^="val"]Identifica gli elementi individuati da "selettore" che abbiano un attributo "att" che inizia con la stringa "val"
selettore[att*="val"]Identifica gli elementi individuati da "selettore" che abbiano un attributo "att" che contiene la stringa "val"
selettore[att$="val"]Identifica gli elementi individuati da "selettore" che abbiano un attributo "att" che termina con la stringa "val"
COMPATIBILITA’
Selettori di Attributo – Alla Scoperta di CSS3
HTML<a href="file.pdf">link a un documento pdf</a>
CSS3a[href$=".pdf"] {
background:url("icon_pdf.gif") no-repeat scroll right center transparent;}
selettore[att$="val"]
COMPATIBILITA’
<shadow>
Ombre – Alla Scoperta di CSS3
COMPATIBILITA’
text-shadow: #999 3px 4px 5px
-moz-box-shadow: 2px 2px 7px 0 #CCCCCC;-webkit-box-shadow: 2px 2px 7px 0 #CCCCCC;
<border radius>
Bordi Arrotondati – Alla Scoperta di CSS3
COMPATIBILITA’
-webkit-border-radius:5px;-moz-border-radius:5px;
<transform>
Rotazione – Alla Scoperta di CSS3
COMPATIBILITA’
-moz-transform: rotate(90dev) ;-webkit -transform: rotate(90dev) transform: rotate(90dev)
Rotazione – Alla Scoperta di CSS3
COMPATIBILITA’
-moz-transform:matrix(1, -0.2, 0, 1, 0pt, 0pt);-webkit-transform:matrix(1, -0.2, 0, 1, 0pt, 0pt);transform:matrix(1, -0.2, 0, 1, 0pt, 0pt);
<opacity>
Opacità – Alla Scoperta di CSS3
COMPATIBILITA’
#box { opacity: 0.7; }
La proprietà assegna all’oggetto un valore di trasparenza compreso tra 0 e 1.
<RGBA>
RGBA – Alla Scoperta di CSS3
COMPATIBILITA’
#box { background-color: rgba(255,0,0,0.7); }
La proprietà assegna all’oggetto 4 valori: 3 valori RGB e Opacità
<gradient>
Sfumature – Alla Scoperta di CSS3
COMPATIBILITA’
-moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);-webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
<background multipli>
Background Multipli – Alla Scoperta di CSS3
COMPATIBILITA’
#box{background:url(aereo.png), url(sfondo.jpg)
}
aereo.png
sfondo.jpg
<multicolonne>
Background Multipli – Alla Scoperta di CSS3
COMPATIBILITA’
div#multicolumn1 {-moz-column-count:6;-moz-column-gap:10px;-moz-column-width:100px;
}
<@font-face>
Background Multipli – Alla Scoperta di CSS3
COMPATIBILITA’
@font-face{font-family: ‘Airstrip_Four’;src: url(’http://www.miosito.it/font/Airstrip_Four.ttf’);}
h1 {font-family: ‘Airstrip_Four’;}
<speech>
Background Multipli – Alla Scoperta di CSS3
COMPATIBILITA’
#voice-volume { -xv-voice-volume: x-soft; -xv-voice-balance: right; }
#voice-balance { -xv-voice-balance: left; }
#speech-cue { cue-after: url(ding.wav); }
#voice-rate { -xv-voice-rate: x-slow; }
#voice-family { voice-family: female; }
#voice-pitch { -xv-voice-pitch: x-low; }
#speech-speak { speak: spell-out; }
<servizi 2.0>
Servizi 2.0 – Alla Scoperta di CSS3
LINK http://www.findmebyip.com/litmus/
Servizi 2.0 – Alla Scoperta di CSS3
LINK http://css3generator.com/
Servizi 2.0 – Alla Scoperta di CSS3
LINK http://css3please.com/
Servizi 2.0 – Alla Scoperta di CSS3
LINK http://border-radius.com/
Servizi 2.0 – Alla Scoperta di CSS3
LINK http://gradients.glrzad.com/
