Css3 Selection e Transform

Tempo stimato di lettura: 1 minuto, 36 secondi
Pubblicato il 14 Febbraio 2012

La scorsa volta ho parlato della proprietà Css3 border-radius, oggi invece voglio parlare di due interessanti proprietà:   

  1. Selection
  2. 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:

http://www.w3.org/TR/css3-2d-transforms/ 

Shares