In questo articolo vedremo come sia possibile rendere graficamente piacevole
un header testuale, attraversando una buona parte delle proprietà dei css. Non vuole essere
però un tutorial, ma un breve esempio di cosa sia possibile fare "giocando" con i css.
Per gli esempi, rifaremo il logo di Html.it che
proporremo in svariati modi, rigorosamente senza l' uso di immagini.
Il mark-up che verrà usato
L' header testuale verrà rappresentato attraverso un tag <h2>, dato che di elementi
h1 in una pagina html ce ne può essere solo uno.
Alcuni esempi che verranno di seguito mostrati richiedono elementi addizionali
e in particolare l' uso di tag <span> e <strong>, sarebbe quasi il
caso di chiamarlo"make-up" anzichè mark-up. Ricordo comunque che lo 'span' è un elemento inline e totalmente
neutro, mentre generalmente il tag strong viene reso in grassetto dal browser, cosa del tutto
irrilevante in questo caso, dato che un header rappresentato tramite h1,h2..h6 viene reso anch'
esso grassetto. Inoltre in alcuni casi si useranno dei <div> aggiuntivi.
Font, background-color e color
Partiamo subito con il primo esempio. Vedremo come sia possibile rendere l' header controllandone
carattere e colore. La sua resa, se avete il font 'impact' installato sul sistema, sarà molto simile
a quella del logo in testa a questa pagina. Ecco il codice html con gli stili css in linea di questo esempio:
<h2 style="background-color: #0E4AEC;color: #FFF;font: normal bold 50px impact,sans-serif">
<span>HTML</span>
<span style="color: #000"><strong style="color:#FF0">.</strong>it</span>
</h2>
Ed ecco il risultato:
HTML.it
Due parole sulle proprietà font, color e background-color
utilizzate in questo esempio.
Sono proprietà che definiscono rispettivamente carattere, colore e colore di sfondo di un
elemento. Nella maggiorparte dei casi sono ereditate, cioè gli elementi contenuti in box
con queste proprietà impostate vengono resi con le proprietà del contenitore, a meno che non
vengano ridefinite esplicitamente o coperte da caretteristiche peculiari dell' elemento in oggetto.
Un logo quadrato con testo centrato verticalmente e bordi orizzontali
In questo esempio giocheremo un po' con le dimensioni e i bordi. Ricordo che un elemento block-level può avere
una dimensione sia orizzontali che verticali. Un elemento inline come uno span non può avere dimensioni,
ma solo una sorta di dimensione verticale ottenuta grazie alla proprietà line-heigth che consente
tra l' altro di centrare il testo verticalmente. Ecco l' html di questo secondo esempio:
<h2 id="boxheader">
<span>HTML<em>.it</em></span>
</h2>
Ed ecco il css:
h2#boxheader{width: 200px; border-top:20px solid #ff0; border-bottom:20px solid #ff0;
background-color: #0E4AEC; color: #000;
font: normal bold 50px impact,sans-serif; text-align:center}
h2#boxheader span{line-height: 160px}
h2#boxheader span em{font: italic normal 30px;color:#fff}
Ed ecco il risultato
HTML.it
Effetto ombra
In questo esempio vedremo come sia possibile generare un effetto ombra attorno all' header, tramite il posizionamento
relativo. L' header verrà inserito in un div contenitore con sfondo grigio, e l' angolo superiore sinistro verrà spostato di
sette pixel in alto e sulla destra. Ricordo che valori positivi di top nel posizionamento relativo spostano un elemento rispetto
alla sua posizione naturale verso il basso, mentre quelli negativi verso l' alto. Allo stesso modo, valori positivi di left
spostano un elemento verso destra e quelli negativi verso sinistra. Ecco il codice html:
<div id="ombra">
<h2>Html.it</h2>
</div>
il relativo css:
div#ombra{ margin: 10px;background-color: #999}
div#ombra h2{position: relative; top:-7px; left: -7px; margin:0;
background-color: #4078FF;color: #fff;
font: 28px arial,serif;text-align: right}
Ed ecco il risultato
Html.it
Header con linea trasversale
Vedremo in questo esempio come sia possibile rendere una linea verticale e il testo ai due lati.
L' effetto verrà ottenuto attraverso l' uso di due float e i margini negativi. E' importante
considerare che, per evitare al testo di disporsi tra le due scritte laterali, bisognerà inserire
uno div che serve ad indicare al div principale di contenere i due float. Ecco l' html dell' esempio:
<div id="headerlinea">
<h2>
<span id="dominio">HTML</span>
<span id="estensione">.it</span>
</h2>
<div style="clear:both"></div>
</div>
Si noti che, trattandosi di elementi unici nella pagina, a questi viene assegnato
un id. Ecco il css:
div#headerlinea{margin-top: 18px;border-top: 1px solid #000}
div#headerlinea h2{margin-top:-18px;
font: bold 36px "Courier New",courier, monospace}
div#headerlinea h2 span#dominio{
float:left;background-color: #fff;color: #4078FF}
div#headerlinea h2 span#estensione{
float:right;background-color: #fff;color: #4078FF}
Ecco il risultato:
HTML
.it
Anche qui due parole di spiegazione. Nell' esempio sopra si è impostato un margine
superiore per il div contenitore pari a 18 pixel (la metà del font-size)
per poi spostare l' header esattamente di 18 pixel verso l' alto, attraverso l' uso di
margini negativi in questo caso. Così l' header si posizionerà esattamente a metà del
suo div contenitore, dando un effetto di linea trasversale. La scelta dei 18 pixel
di margine superiore del div padre è per mantenere le spaziature originali che si avrebbero
senza l' uso di margini, ma qualsiasi valore sarebbe andato bene: infatti quello
che determina la posizione della linea trasversale è il margine a valore negativo dell' header.
I due span vengono resi float e di conseguenza vengono sistemati ai due estremi orizzontali
del loro contenitore. Elementi adiacenti ad elementi float vengono a fluttuargli attorno.
In questo caso quindi il div che dà il clear impedisce che l' inizio di questo paragrafo
si disponga esattamente tra 'html' e '.it' appena sotto la linea.
Header con testo posizionato assolutamente
Chiudiamo questa carrellata sugli header e le proprietà css con un esempio di
posizionamento assoluto. Vogliamo realizzare un box centrato di 200x200 pixel
e nel suo angolo in alto a sinistra scrivere 'html', mentre in basso a destra scrivere
'.it'. Ecco il codice html che useremo:
<div id="headerpos">
<h2>
<span>Html</span><em>.it</em>
</h2>
</div>
Ed ecco il relativo css:
div#headerpos{text-align: center}
div#headerpos h2{position: relative;
width: 200px;height: 200px;margin: 0px auto;
background-color: #4078FF;color: #fff;
font: 30px arial,serif
}
div#headerpos h2 span{
position:absolute; top: 0; left: 0}
div#headerpos h2 em{
position:absolute; bottom: 0; right: 0;color: #FF0}
Ecco il risultato:
Html.it
Due parole sulla scelta delle proprietà. Il nostro header è grande 200x200px.
Questa volta però lo vogliamo centrato. La centratura orizzontale di un qualsiasi
elemento in Internet Explorer si ottiene contenendolo in un elemento che abbia allineamento
del testo centrato ossia text-align: center. A livello concettuale è un errore di interpretazione
del box model di Internet Explorer, dato che il text-align dovrebbe servire in teoria solo per centrare
testo ed elementi inline all' interno di elementi block-level.
Negli altri browser infatti la centratura di un elemento block-level si ottiene dichiarando
i suoi margini orizzontali pari al valore speciale auto.
Dichiarare un elemento posizionato relativamente ha un duplice effetto in questo caso:
- consentire di posizionare assolutamente elementi al suo interno
- preservare il flusso degli elementi successivi
Per quanto riguarda il primo punto, quando si parla di posizionamento assoluto
di un elemento bisogna tenere ben presente che le sue coordinate si riferiscono
al suo primo 'antenato' posizionato, sia esso assolutamente o relativamente. Se non
c'è un contenitore posizionato all' esterno dell' elemento posizionato assolutamente,
le coordinate si riferirarranno al blocco contenitore principale, cioè la finestra
del browser.
Per quanto riguarda il secondo punto, il browser non sa come sistemare
in certi casi gli elementi successivi (in ordine di codice html) a quelli posizionati
assolutamente, dato che gli elementi posizionati assolutamente vengono rimossi dal flusso
normale in una pagina per essere, appunto, posizionati. In questo caso il nostro header
è posizionato relativamente senza specificare uno dei quattro offset, e quindi
verrà mostrato nella sua posizione naturale, consentendo però il posizionamento assoluto
al suo interno.
Conclusioni
Gli esempi di questo articolo sono stati testati sui principali browsers: Internet Explorer,
Opera e Mozilla e hanno la stessa resa su tutti e tre. Una trattazione esauriente di tutte le proprietà utilizzate in questo articolo è al di fuori del suo scopo, sebbene spero di aver potuto dare al lettore esempi
di uso creativo e ragionato dei css e una spiegazione quantomeno minima delle scelte
implementative.
