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".
Ecco un'immagine del logo:
Allo stadio attuale i CSS sono anche 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: 2em 0;
text-align: center;
font-family: "Arial Black", Arial, sans-serif;
}
#advisory {
margin: 0 auto;
padding: 0;
width: 24em;
background: #fff;
color: #000;
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
#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 esempio non disponibile è simile all'originale, anche se ovviamente non è identico. Bisogna
infatti tener conto di alcuni fattori:
- I font da noi scelti sono font comuni. I font originali del logo sono font particolari che difficilmente si trovano sul computer dell'utente. Una soluzione sarebbe quella di usare i web fonts.
- 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.