MoebiusMania

Più si esplora il mondo dei CSS (compresi la 3a imminente versione) più si cerca di fare il massimo possibile graficamente con questo linguaggio! In questo tip daremo un'occhiata ad alcune idee per realizzare delle forme primitive in CSS: rettangoli, cerchi, ovali e triangoli.  Come tutte le cose questo approccio ha dei pro e dei contro:

• Pro: un paio di righe di codice sono sempre più veloci da caricare di un'immagine, più facile l'aggiornamento (non devo ri-esportare ogni volta) della pagina ed essendo i CSS elaborati dal browser sono praticamente vettoriali quindi diverse densità di pixel, come i display HiDPI non ci fanno paura!
• Contro: a volte per forme semplici ci si impiega meno tempo a disegnarle, le immagini se vengono riutilzzate più volte nello stesso sito vengono "cachate" velocizzando sensibilmente i caricamenti della stessa immagine dopo la prima volta.

Rettangoli/Quadrati

Beh questi sono i più facili, dato che ogni elemento in una pagina Html è un rettangolo (vedi il box model) ci bastano delle proprietà molto basilari come altezza e larghezza:

.rettangolo{
   width: 300px;
   height: 150px;
   background-color: rgb(160,0,0);
}

Cerchi e Ovali

Per creare un cerchio creiamo prima un quadrato e dopo utilizziamo la proprietà border-radius aumentando l'arrotondamento degli angoli fino a farli incontrare tutti e 4, basta la metà del valore di altezza e larghezza per arrivare a questo:

.cerchio{
   width: 300px;
   height: 150px;
   border-radius: 50%;
   background-color: rgb(160,0,0);
}

Se usiamo il valore in percentuale per i border-radius potremo disegnare degli ovali semplicemente partendo da un rettangolo e aggiungendo poi gli angoli arrtondati.

Triangoli

Per creare un triangolo utilizzeremo i bordi dell'elemento, in realtà i bordi che vengono disegnati intorno all'area di un elemento quando si incontrano nei 4 angoli si tagliano in obliquo (vedi l'immagine qui sotto), quindi per disegnare un triangolo dovremo creare un elemento senza altezza e larghezza, con un bordo visibile e gli altri 3 trasparenti:

.triangolo{
   border: 75px solid transparent;
   border-left: 75px solid rgb(160,0,0);
}

Usiamo il valore "transparent" per il colore, funziona come "opacitiy" con la differenza che non si può creare una semitrasparenza (come per esempio 0.5) e che viene compreso anche dai vecchi IE. Dato che il bordo viene creato sia prima che dopo la metà del lato che ci interessa dovremo dare al bordo la metà dello spessore della dimensione che vorremo alla fine, nell'esempio ho assegnato 75 pixel per avere un triangolo di 150 pixel. Queste piccoli soluzioni lavorano cross-browser, ad accezione dei border-radius che non vengono visualizzati su IE8 e inferiori. Alcuni interessanti esercizi di stile di "disegno" con primitive CSS sono la rana di Chris Coiyer e i loghi dei brand in puro CSS. [btn icona="eye-open" url="http://www.moebiusmania.net/tutorial/2013/primitive_css.html"]Guarda una pagina di esmpio con questo codice[/btn]