La scorsa volta ho parlato della proprietà Css3 border-radius, oggi invece voglio parlare di due interessanti proprietà:
- Selection
- Transform
Andiamo ora a vedere nel dettaglio queste due proprietà Css3.
Descrizione e uso della proprietà Selection
La proprietà selection consente di evidenziare il testo del nostro sito/blog con un colore specifico.
HTML
<p class="testo-verde">Lorem Ipsum</p>
CSS
/*Webkit opera, IE9, chrome*/
.testo-verde::selection {
color: #096;
background: #CCC;
}
/*Firefox*/
.testo-verde::-moz-selection {
color: #096;
background: #CCC;
}
Descrizione e uso della proprietà Transform
La proprietà transform consente di effettuare manipolazioni/trasformazioni 2D, ovvero ruotare, scalare, inclinare e spostare elementi. Si può utilizzare sia per elementi block che per elementi inline.
- Rotate
- Scale
- Skew
- Translate
Esempio n°1: Rotate
Ruota un elemento esprimendo i valori in gradi. Valori negativi consentono di ruotare in senso antiorario. In questo esempio l’elemento verrà ruotato di 15 gradi in senso orario.
CSS
#rotate {
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
-moz-transform: rotate(15deg);
}
Risultato:
Esempio n°2: Scale
Scala un elemento di cui i valori sono: il primo il ridimensionamento orizzontale mentre il secondo il ridimensionamento verticale.
CSS
#scale {
transform: scale(0.8,1.2);
-webkit-transform: scale(0.8,1.2);
-o-transform: scale(0.8,1.2);
-moz-transform: scale(0.8,1.2);
}
Risultato:
Esempio n°3: Skew
Distorce un elemento lungo gli assi X e Y. In questo esempio l’elemento verrà distorto di 5 gradi sull’asse delle X e 10 gradi sull’asse delle Y.
CSS
#skew {
transform: skew(5deg, 10deg);
-webkit-transform: skew(5deg, 10deg);
-o-transform: skew(5deg, 10deg);
-moz-transform: skew(5deg, 10deg);
}
Risultato:
Esempio n°4: Translate
Sposta un elemento lungo gli assi X e Y. In questo esempio l’elemento verrà spostato di 50px sull’asse delle X e 10px sull’asse delle Y.
CSS
#traslate {
transform: translate(50px,10px);
-webkit-transform: translate(50px,10px);
-o-transform: translate(50px,10px);
-moz-transform: translate(50px,10px);
}
Risultato:
Vi invito ad usare con cautela queste proprietà Css3, molti browser ancora non riescono a leggerle. Tutte le specifiche Css3 Transform le potete trovare a questo link:
