Con i CSS, ed in particolar modo con alcune proprietà CSS3 e il contenuto generato, possiamo creare dei semplici loghi senza usare delle immagini. Il contenuto generato, infatti, può rappresentare moltissimi simboli grafici presi direttamente dal campionario di caratteri Unicode e inserirli nella pagina. Vediamo i dettagli di questo esempio.
La marcatura è composta da una semplice intestazione e da un elemento span al suo interno:
<h1 id="logo-1"><span>ND</span>Now</h1>
Assegniamo prima degli stili all'intestazione definendone la larghezza, la dimensione e il tipo di font:
h1#logo-1 {
width: 700px;
margin: 2em auto;
font: 8em Arial, sans-serif;
text-align: center;
color: #d34545;
text-transform: uppercase;
}
Inseriamo quindi un florilegio prima del contenuto dell'elemento:
h1#logo-1:before {
content: '\2767';
padding-right: 5px;
font-size: 1.4em;
position: relative;
top: 15px;
color: #545454;
}
La decorazione floreale è stata spostata di 15 pixel verso il basso tramite il posizionamento relativo. Quindi creiamo l'effetto di un box in evidenza per l'elemento span con i seguenti stili:
h1#logo-1 span {
color: #000;
letter-spacing: -19px;
text-shadow: 1px 1px 1px #999;
box-shadow: 12px 8px 10px #999;
font-family: 'Arial Black', Arial, sans-serif;
margin-right: 30px;
}
La spaziatura negativa delle lettere fa in modo che queste appaiano unite. La proprietà CSS3 text-shadow crea un impercettibile rilievo intorno alle lettere, mentre la proprietà box-shadow disegna un riquadro d'ombra intorno alle lettere.
Potete visionare l'esempio finale in questa pagina.