CSS Zibaldone

[ Home ] - [ Articoli ] - [ Traduzioni ] - [ Altro ] - [ Appunti sui CSS ] - [ L'autore ]

Sei qui: Home > Articoli > Riprodurre un logo con i CSS

Riprodurre un logo con i CSS

Introduzione

I CSS sono in grado di controllare quasi ogni aspetto della formattazione di un documento web. Un uso molto frequente dei fogli di stile è quello relativo alla formattazione del testo. In questo articolo vedremo come ricreare il look and feel del logo "Parental Advisory" di cui riportiamo un'immagine.

Ovviamente allo stadio attuale (2007) i CSS non sono in grado di orientare il testo in modo diverso dall'usuale. Scopo del presente esempio è quello di avvicinarsi il più possibile al design originale.

Il logo

La struttura (X)HTML del logo è estremamente semplice:

<div id="container">
<div id="advisory">
<p class="disclaimer">Parental</p>
<h2>ADVISORY</h2>
<p class="disclaimer">Explicit CSS</p>
</div>
</div>

Anche il relativo foglio di stile è alquanto intuitivo:

#container {
margin: 0;
padding: 0;
text-align: center;
font-family: "Arial Black", Arial, sans-serif;
}

#advisory {
margin: 0 auto;
padding: 0;
width: 24em;
background: #fff;
color: #000;
}
#advisory p.disclaimer{
text-transform: uppercase;
margin: 0;
padding: 0.2em;
background: #000;
color: #fff;
font-size: 1.8em;
font-weight: bold;
letter-spacing: 10px;
}
#advisory h2 {
margin: 0;
padding: 0.1em;
text-transform: uppercase;
letter-spacing: 10px;
font-size: 4em;
font-weight: bold;
font-family: "Arial Narrow", Arial, sans-serif;
}

Il risultato finale è simile all'originale, anche se ovviamente non è identico. Bisogna infatti tener conto di alcuni fattori:

1. I font da noi scelti sono font comuni. I font originali del logo sono font particolari che difficilmente si trovano sul computer dell'utente.
2. Abbiamo scelto di usare misure relative per il contenitore e per il testo, al fine di permettere il ridimensionamento del logo. Il logo originale usa misure in pixel ed è stato realizzato con un programma di grafica.

Nello specifico, abbiamo usato un contenitore esterno per centrare il logo anche su Internet Explorer 5 Windows (tramite la dichiarazione text-align: center). La spaziatura tra le lettere è stata espressa in pixel, al fine di evitare difformità nella visualizzazione da parte dei vari browser. Per permettere una buona fruizione anche con i CSS disabilitati, abbiamo rispettato le maiuscole e le minuscole anche nel sorgente, le quali vengono controllate dalla proprietà text-transform nel foglio di stile.