Il CSS (Cascading Style Sheets) ha dato una svolta al World Wide Web. Se prima creare un layout per­so­na­liz­za­to, inserire i caratteri adatti ecc. erano tutte azioni che venivano pro­gram­ma­te con dif­fi­col­tà nel documento HTML del proprio sito web, i fogli di stile hanno permesso che questo metodo poco fles­si­bi­le ap­par­te­nes­se al passato. Gli elementi HTML che servono per per­so­na­liz­za­re il design di un sito sono ormai superati, almeno a partire dall’HTML5: l’approccio del presente e del futuro è quello di separare i contenuti dalla loro pre­sen­ta­zio­ne visiva.

Il CSS viene svi­lup­pa­to co­stan­te­men­te in quanto Living Standard (cioè lo standard in uso), aspetto che permette sempre molte altre opzioni di sviluppo più versatili e più complesse, che dif­fi­cil­men­te però si riu­sci­ran­no a tenere tutte sotto controllo. Qui trovate alcuni dei trucchi più in­te­res­san­ti e utili, insieme alle relative stringhe di codice da applicare al vostro sito.

Numerare i titoli

Se volete inserire nel vostro documento HTML diversi titoli e sot­to­ti­to­li, e volete che appaiano numerati, potete farlo so­li­ta­men­te ma­nual­men­te o at­tra­ver­so uno script. Oppure potete più sem­pli­ce­men­te ricorrere a CSS e far eseguire l’azione ai fogli di stile al vostro posto. Questo vecchio trucco, che viene sup­por­ta­to da tutti i browser in uso, lo rea­liz­za­te inserendo il codice seguente:  

#Titoli {
counter-reset: heading;
}
h1:before {
    content: counter(heading)") ";
    counter-increment: heading;
}
h1 {
    counter-reset: subheading;
}
h2:before {
    content: counter(heading)"." counter(subheading)") ";
    counter-increment: subheading;
}
body{
    font-family: courier new;
}

Il risultato è il seguente:

Immagine: Titoli numerati
Con il lin­guag­gio CSS si possono numerare i titoli e i sot­to­ti­to­li

Na­scon­de­re gli elementi in modo SEO friendly

Na­scon­de­re i contenuti del documento HTML sul sito web con comandi come display: none; o vi­si­bi­li­ty: hidden; non è ben visto dai motori di ricerca. Anche se si scon­si­glia di uti­liz­zar­lo fre­quen­te­men­te, il seguente codice offre un’ec­cel­len­te pos­si­bi­li­tà per aggirare questi due elementi abilmente: 

.hidden {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

Produrre testi con effetto ombra

Na­tu­ral­men­te i testi con effetto ombra (text-shadow) possono essere prodotti anche con l’aiuto di programmi di grafica. Questo però non solo richiede molto tempo ma, da un lato sono ne­ces­sa­rie le co­no­scen­ze tecniche adeguate e, dall’altro, il contenuto diventa il­leg­gi­bi­le per i motori di ricerca. A partire dalla terza versione di CSS, ci sono diversi effetti che, se combinati tra loro, ottengono lo stesso bel risultato e non mo­di­fi­ca­no gli elementi del testo che vengono presi in con­si­de­ra­zio­ne dai motori di ricerca. Il seguente trucco CSS mostra un esempio di text-shadow rea­liz­za­to con CSS: 

p {
font-size: 50pt;
font-family: sans-serif;
text-shadow: 10px 11px 18px rgba(300, 180, 100, 1),
-10px -11px 18px red;
}

Con l’aiuto di questi codici vengono anche definiti in tal senso gli elementi <p>, all’interno dei quali sono inclusi due text-shadow. Questo numero si può aumentare a pia­ci­men­to: badate però sempre di separarli con una virgola. I primi due dati precisano la posizione del testo con effetto ombra, prima la coor­di­na­ta X e poi, al secondo posto, quella Y. Il terzo dato definisce le di­men­sio­ni. All’ultimo posto è indicato il colore dell’ombra at­tra­ver­so una notazione RGBA (300, 180, 100, 1), come nel primo esempio o, come nel secondo, con il nome del colore in inglese (red). Se si applica questo trucco, l’esito è il seguente:

Immagine: Testo di esempio con effetto ombra
Quando viene eseguito il relativo codice, ne risulta questo testo con effetto ombra

Mo­di­fi­ca­re elementi del sito web con filtri CSS

CSS non è solo un’ottima al­ter­na­ti­va a Photoshop se si vogliono creare testi con effetto ombra: i fogli di stile hanno anche altri filtri utili, simili a quelli dei programmi di ela­bo­ra­zio­ne di immagini. Così, si possono per­so­na­liz­za­re ad esempio elementi grafici, sfondi, testi o video in maniera creativa, au­men­tan­do la lu­mi­no­si­tà, mo­di­fi­can­do il contrasto o uti­liz­zan­do diverse tonalità di grigio. I filtri sono di­spo­ni­bi­li su quasi tutti i browser moderni (eccetto Internet Explorer). La sintassi di questi effetti CSS si vede qui ad esempio nel filtro di re­go­la­zio­ne della tonalità di grigio: 

.grayscale {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

Il dato del filtro, in questo caso grayscale, segue tra parentesi un valore specifico, che precisa l’intensità del filtro (qui il valore (1) indica il 100%).

Immagine: Foto di un paesaggio con l’applicazione del filtro CSS per le diverse tonalità di grigio
Il lin­guag­gio CSS vi dà la pos­si­bi­li­tà di adattare gli elementi grafici sul web con filtri diversi, come quello “grayscale”

Altri filtri utili sono:

Filtri De­scri­zio­ne Valore
blur(VALORE) Sfocatura Raggio in pixel
bright­ness(VALORE) Lu­mi­no­si­tà Standard: 1, più chiaro: >1, più scuro: <1
contrast(VALORE) Contrasto Standard: 1, più forte: >1, meno forte: <1
invert(VALORE) Inverte i colori Valore 1: com­ple­ta­men­te invertito
opacity(VALORE) Livello di tra­spa­ren­za Valore massimo: 1 (l’elemento scompare com­ple­ta­men­te)
saturate(VALORE) Altera la sa­tu­ra­zio­ne dell‘immagine Standard: 1, maggiore: >1, minore: <1
sepia(VALORE) Effetto seppia Valore massimo: 1 (cor­ri­spon­de all’effetto seppia al 100%)

Po­si­zio­na­re de­scri­zio­ni delle immagini in maniera ottimale

Per le di­da­sca­lie de­scrit­ti­ve sotto alle immagini non ci sono delle linee guida unitarie. La cen­tra­tu­ra della de­scri­zio­ne però sta bene este­ti­ca­men­te, se non è più lunga di una riga; al­tri­men­ti questo tipo di al­li­nea­men­to è ina­de­gua­to, mentre un al­li­nea­men­to troppo a sinistra è spesso una variante poco bella se la de­scri­zio­ne è troppo corta. La soluzione è di servirsi di parametri diversi all’interno dell’elemento <figure> e di quello <fi­g­cap­tion>, che di solito sono gli stessi uti­liz­za­ti nella di­da­sca­lia di un’immagine. Lo snippet cor­ri­spon­den­te è il seguente:  

figure {
    text-align: center; 
}
figcaption {
    display: inline-block; 
    text-align: left;
}

Questo trucco fa sì che la di­da­sca­lia, che per de­fi­ni­zio­ne è allineata a sinistra, venga mostrata al centro sulla base del parametro inline-block, quando il testo non è ab­ba­stan­za lungo da coprire l’intera esten­sio­ne dell’immagine.

Mettere in risalto la prima lettera di un testo

Con l’aiuto delle co­sid­det­te pseudo-classi è possibile mettere in risalto alcuni elementi HTML specifici come, ad esempio, la prima lettera di una frase. Con ::first-letter si lascia fa­cil­men­te im­ple­men­ta­re in questa maniera il layout tipico delle storie, in par­ti­co­la­re delle fiabe: 

p{
    font-family: "bookman old style"
}
p:first-child::first-letter{
    font-family: "papyrus";
    font-size: 25px
    font-weight: bold
}

In questo snippet specifico sono stati uti­liz­za­ti come esempio le famiglie di font tipiche per le fiabe: Papyrus per la prima lettera del paragrafo e Old Style per il resto del testo. Il risultato:

Immagine: Estratto di un testo con la messa in risalto della prima lettera
Le pseudo-classi CSS con­sen­to­no di evi­den­zia­re i singoli elementi HTML. Qui viene applicata la classe ::first-letter

Usare l’effetto parallax

Molti siti web moderni si basano sull’effetto parallax, che i vi­si­ta­to­ri provocano durante lo scor­ri­men­to. Di regola, questo effetto, che fa apparire il movimento dello sfondo più lento rispetto a quello degli elementi in primo piano, viene rea­liz­za­to in com­bi­na­zio­ne con Ja­va­Script o con l’aiuto di iQuery. Il seguente trucco CSS3 mostra invece come sia possibile in­cor­po­ra­re uno scrolling parallax solo con l’uso dei fogli di stile del vostro sito web: 

p {
    width: 100%;
    margin: auto;
    font-size: 50px;
    transform: scale(.5);
    font-family: courier new;
    font-weght: bold;
}
div {
    background-image: url("URL DES HINTERGRUNDBILDES");
    background-attachment: fixed;
    transform: scale(1.25);}
body {
    height: 100%;
    overflow: scroll;
}

Nel parametro back­ground-image: url inserite l’URL del sito web sul quale si trova l’immagine di sfondo che volete inserire. I valori qui usati ri­guar­dan­ti il tipo di carattere e le sue di­men­sio­ni, li potete adattare in maniera in­di­vi­dua­le.

Mettere in risalto i campi richiesti in maniera ob­bli­ga­to­ria in un for­mu­la­rio

Con l’aiuto di :required e :optional ot­ti­miz­za­te i formulari inseriti nel vostro sito web. Entrambe le pseudo-classi per­met­to­no di con­tras­se­gna­re con un colore quei campi che devono essere as­so­lu­ta­men­te com­ple­ta­ti e con un altro quelli che sono opzionali. Lo snippet cor­ri­spon­den­te è il seguente:

:required {
    border: 1px solid red;
}
:optional {
border: 1px solid black;
}

In questo caso i campi in­di­spen­sa­bi­li sono con­tras­se­gna­ti con un bordo rosso, mentre quelli opzionali vengono mostrati con un bordo nero.

Immagine: Campi di un modulo evidenziati
Le due pseudo-classi CSS uti­liz­za­te mettono in risalto dei campi specifici del modulo in base alla loro urgenza

Inserire un elenco con punti a forma trian­go­la­re

Se avete più di una lista nel vostro documento HTML, non dovreste sempre pre­sen­tar­la con il classico elenco puntato. Con il seguente trucco inserite fa­cil­men­te un elenco con i punti a forma trian­go­la­re: 

ul {
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;
}
li:before {
    content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
}

Il risultato è il seguente:

Vai al menu prin­ci­pa­le