- La guida ai Social Media
Subscribe | Log in

CSS

Ruotare, scalare, ombre su testi grazie ai css3

css3-borderimageL’evoluzione dei browser Web permette ad oggi, l’utilizzo di codice css sempre piu’ avanzato, rendendo possibile la creazione di pagine web piu’ accattivanti, veloci e funzionali.
Ci stiamo avvicinando sempre piu’ anche se molto lentamente e con non poche difficoltà, a causa di logiche commerciali spesso a mio modo di vedere “miopi”, verso standard web universali per tutte le piattaforme di computer.
Finalmente possiamo perdere meno tempo nello sviluppo di pagine web ed essere sicuri che il nostro “box sulla destra del sito” su IE verrà visualizzato correttamente;  possiamo anche pensare alla creazione di pagine web complesse senza utilizzare hack e pesanti script di front-end per standardizzare la visulizzazione e le funzionalità dei siti web.
Ad oggi grazie ai CSS 3, sempre piu’ supportati siamo in grado di avere gli “angoli arrotondati” senza utilizzare immagini di sfondo. Se vogliamo avere più immagini di sfondo in un box utilizzando un solo ID, possiamo farlo. Siamo arrivati all’epoca del web dove “il desiderio non è piu’ un problema”.

Le proprietà dei CSS 3 come border-radius, box-shadow, e text-shadow stanno cominciando ad essere supportate  in browser con motore di rendering WebKit (Safari, Chrome, ecc)  e Gecko (Firefox) . L’utilizzo di tali proprietà fanno si che sul web abbiamo sempre piu’ pagine leggere, con una user-expirience sempre maggiore e stilisticamente molto gradevoli.

Queste proprità sono solo la punta dell’ iceberg di ciò che possiamo realizzare con i CSS 3.
In questo articolo, prenderemo in considerazione le proprietà piu’ evolute dei css3  esplorando le trasformazioni, le transizioni e animazioni.

CSS Transformations

CSS Transformations  sono una bizzarria del W3C. La prima volta che ho letto le specifiche rimasi un po’ allibito.  Le specifiche sono scritte con  gergo tecnico assai ostico, improntato ad aspetti sopratutto grafici,  gergo da disegno grafico.
Dopo aver letto vari tutorial ed effetuato test su svariati browser, sono riuscito ad arrivare a buoni risultati visuali, ottenendo informazioni che credo possano essere utili.

transform ();
La proprietà transform consente funzioni simili a quelle di  SVG.  Tale proprietà può essere applicatà sia ad elementi inline-level che a elementi block-level. Possiamo ruotare, ingrandire e spostare gli elementi, tutti con una sola riga di CSS.

L’utilizo della proprità permette la creazione ad esempio un testo obliquo che non sia grafico.
Di seguito alcune interessanti e utili funzioni di trasformazione supportate:

  • rotate

Consente di trasformare un oggetto che passa da una visualizzazione lineare,  ruotato attraverso la funzione specifica.

  • scale

Scale è una funzione di zoom e può rendere qualsiasi elemento più grande.  Supporta valori  positivi e negativi, nonché i valori decimali.

  • translate

Traduce essenzialmente il riposizionamento di un elemento basato su coordinate X e Y.
Diamo un’occhiata a ciascuna di queste proprietà in modo più dettagliato.

Rotate

rotate



Fate attenzione, in IE 8 (quando non è in modalità standard)  è richiesto il filtro  “-ms-filter” invece di “-filter” nel CSS.
#nav {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

L’unico problema è che la rotazione è  un elemento molto importante di design, e molti designer  saranno restii ad utilizzarlo, se Internet Explorer non fosse in grado di utilizzarlo.

Per utilizzare tale propietà anche co IE, va utilizzato un filtro per fa fronte al supporto della proprità.  Essa può assumere quattro valori di rotazione: 0, 1, 2 e 3. Non sarà possibile ottenere lo stesso controllo capillare che viene fornito con Webkit e Gecko, ma il vostro design  rimarrà coerente tra i vari browser (anche IE6).

Scale

scale



#nav {
/* The nav element width and height will double in size */
-webkit-transform: scale(2);
-moz-transform: scale(2);
}

#nav {
/* The nav element width will double in size, but the height will remain unchanged*/
-webkit-transform: scale(2, 1);
-moz-transform: scale(2, 1);
}

#nav {
/* The nav element width will double in size and flip horizontally,
but the height will remain unchanged */
-webkit-transform: scale(-2, 1);
-moz-transform: scale(-2, 1);

La proprietà scale è supportata in Firefox, Safari and Chrome,  ma purtroppo almeno per adesso nessuna versione di IE la supporta.

Translate

Il nome della proprietà  è un po ‘ fuorviante. In realtà è un metodo per posizionare gli elementi mediante valori X e Y.
Sembra molto simile a gli  altri tipi di trasformazione, ma aggiunge una dimensione supplementare al vostro design.

translate


#nav{
/* This will move the #nav element left 10 pixels and down 20 pixels. */
-moz-transform: translate(10px, 20px);
-webkit-transform: translate(10px, 20px);

Translate è attualmente supportato in Firefox, Safari and Chrome con l’utilizzo di  -moz- and -webkit-.

Le proprietà sopra descritte ci permettono di ottenere grandi risultati usate singolarmente,  ma se le utilizziamo mixandole fra loro otteniamo pagine web veramente grandiose. Una volta che queste sarranno ancora piu’ supportate, saremo in grado di costruire pagine web leggerissime funzionali e d’aspetto tutto simile a vere e proprie applicazioni software.  Nel video che segue un esempio di cio’ che sarà possibile realizzare con i css in un futuro molto prossimo; da notare che per la realizzazione del design rappresentato nel video dimostrativo, sono state utilizzate altre due prorpietà CSS3, Transition e Animation, sulle quali per adesso pero’ non vale la pena soffermarsi troppo visto che il loro supporto e ancora minimo.

Enjoy.

References And Resources