CSS  »  Articoli  »  Effetti con CSS 

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

Altri articoli

Altre guide

Altre newsletter