Paolo De Feo
a- a+

Creare logo con CSS3

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>



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Graziano
Hai qualche domanda da fare?