• Programmazione » CSS » Tutorial CSS

Vediamo come fare a creare un logo con CSS3 in modo facile e veloce. Codice ed esempi.

Creare un logo con i fogli di stile CSS3 è una delle tante “opportunità” che ci offre il Web 2.0. Con un po’ di fantasia e tecnica non ci sono limiti di realizzazione grafica: l’importante è dosare e implementare bene le varie proprietà al fine di creare icone o immagini senza problemi di visualizzazione nei vari browser.

La compatibilità browser dei CSS3 è infatti una delle “attenzioni” progettuali da tenere in considerazione: l’inserimento di una proprietà non digerita da tutti i software di navigazione rischia di compromettere il lavoro in modo uniforme.

Oggi vedremo come realizzare un semplice logo tramite il solo utilizzo di fogli di stile: un assemblaggio di elementi che produrrà un piacevole risultato finale.

Il logo di Google Android: sarà lui l’obiettivo del nostro markup.

Il markup CSS3

La creazione di un logo con i fogli di stile CSS3 parte da qui: dalla progettazione e dallo studio delle proprietà che comporranno la nostra opera. La produzione del logo di Google Android si ottiene attraverso l’applicazione di circa una decina di Div element, tanti per quante sono le parti del corpo.

La proprietà CSS3 border-radius gioca una parte fondamentale nell’operazione: è lei che consente di arrotondare le figure geometriche base (quadrati/rettangoli) e di modellarle a piacimento. 

La proprietà border-radius è compatibile con i seguenti software: Google Chrome, Opera, Internet Explorer 9, Mozilla Firefox 4 e Safari 5. Per le release inferiori sarà necessario ricorrere a qualche piccolo accorgimento tecnico.

#android_eye_left { // creo l’occhio sinistro    position: relative;    top: 50px;    left: 40px;    background: #fff;    height: 20px;    width: 20px;    -webkit-border-radius: 1.5em; // proprietà per Chrome 4.0 Safari 4.1 (e inferiori)    -moz-border-radius: 1.5em; // proprietà per Firefox 3.6 e inferiori    border-radius: 1.5em; // attraverso la proprietà border-radius creo la sezione circolare}#android_eye_right { // creo l’occhio destro    position: relative;    top: 30px;    left: 140px;    background: #fff;    height: 20px;    width: 20px;    -webkit-border-radius: 1.5em;    -moz-border-radius: 1.5em;    border-radius: 1.5em;}#android_antenna_left { // creo l’antenna sinistra    position: relative;    top: 35px;    left: 100px;    background: #95c03b;    height: 50px;    width: 7px;    -webkit-border-radius: 1.5em;    -moz-border-radius: 1.5em;    border-radius: 1.5em;    -moz-transform:rotate(150deg);    -webkit-transform:rotate(150deg);    float:left;}#android_antenna_right { // creo l’antenna destra    position: relative;    top: 35px;    left: 210px;    background: #95c03b;    height: 50px;    width: 7px;    -webkit-border-radius: 1.5em;    -moz-border-radius: 1.5em;    border-radius: 1.5em;    -moz-transform:rotate(30deg);    -webkit-transform:rotate(30deg);    float:left;}#android_head { // creo la testa    background: #95c03b;    height: 100px;    width: 200px;    -webkit-border-radius: 1.0em 1.0em 0 0;    -moz-border-radius: 1.0em 1.0em 0 0;    border-radius: 6.0em 6.0em 0 0;    margin: 15px 0 15px 65px;}#android_body { // creo il corpo    background: #95c03b;    height: 200px;    width: 200px;    -webkit-border-radius: 0 0 1.0em 1.0em;    -moz-border-radius: 0 0 1.0em 1.0em;    border-radius: 0 0 1.0em 1.0em;    float: left;    margin: 0 15px;}#android_hand_left { // creo il braccio sinistro    background: #95c03b;    height: 150px;    width: 50px;    float: left;    -webkit-border-radius: 1.5em;    -moz-border-radius: 1.5em;    border-radius: 1.5em;}#android_hand_right { // creo il braccio destro    background: #95c03b;    height: 150px;    width: 50px;    float: left;    -webkit-border-radius: 1.5em;    -moz-border-radius: 1.5em;    border-radius: 1.5em;}#android_leg_left { // creo la gamba sinistra    background: #95c03b;    height: 80px;    width: 50px;    float: left;    margin-left: 95px;    -webkit-border-radius: 0 0 1.5em 1.5em;    -moz-border-radius: 0 0 1.5em 1.5em;    border-radius: 0 0 1.5em 1.5em;}#android_leg_right { // creo la gamba destra    background: #95c03b;    height: 80px;    width: 50px;    float: left;    margin-left: 40px;    -webkit-border-radius: 0 0 1.5em 1.5em;    -moz-border-radius: 0 0 1.5em 1.5em;    border-radius: 0 0 1.5em 1.5em;}.clear {    clear: both;}

Il markup HTML

Ora che abbiamo elaborato il nostro foglio di stile, diamo vita al nostro logo grazie al markup HTML che farà da struttura.

<div id="android_container">    <div id="android_antenna">  <div id="android_antenna_left" class="part"></div>is  <div id="android_antenna_right" class="part"></div>  <div class="clear"></div>    </div>    <div id="android_head">  <div id="android_eye_left"></div>  <div id="android_eye_right"></div>    </div>    <div id="android_body_main">  <div id="android_hand_left" class="part"></div>  <div id="android_body" class="part"></div>  <div id="android_hand_right" class="part"></div>  <div class="clear"></div>    </div>    <div id="android_leg">  <div id="android_leg_left" class="part"></div>  <div id="android_leg_right" class="part"></div>  <div class="clear"></div>    </div></div>