Progressive Enhancement (3): colonne, effetti su testo e background multipli

scritto da Francesco Gavello [+] il 27 ottobre 2008 | 8 Commenti in: Web Design & UX

Questa è la terza parte della serie “Progressive Enhancement: migliorare l’esperienza utente per i browser moderni“, dedicata alla tecniche CSS3 (e non solo) che puoi utilizzare a partire da ora per migliorare la resa dei tuoi layout.

Se ti sei perso le puntate precedenti puoi leggere anche la prima e la seconda parte.

Colonne multiple

Stile di impaginazione preso di peso dall’ambito giornalistico, suddividere i contenuti su più colonne adiacenti può tornare molto utile in layout del tipo “magazine style” (per l’appunto) che sembrano andare tanto alla grande negli ultimi tempi.

Vediamo quindi come suddividere il testo contenuto in un contenitore in maniera totalmente automatica affidandoci ad alcune semplici regole CSS3.

Teoria

Otterremo il nostro scopo grazie ai selettori “column-count”, che definisce il numero di colonne sulle quali spezzare il contenuto

  • column-count: 3;
  • -moz-column-count: 3; /*  Mozilla */
  • -webkit-column-count: 3; /* Webkit */

“column-gap”, che imposta lo spazio tra una colonna e l’altra

  • column-gap: 20px;
  • -moz-column-gap: 20px;
  • -webkit-column-gap: 20px;

e “column-width” che come prevedibile va a definire la grandezza della singola colonna

  • column-width: 150px;
  • -moz-column-width: 150px;
  • -webkit-column-width: 150x;

Come si può vedere abbiamo nuovamente a disposizione la regola “standard” CSS3 e le relative varianti per i browser attualmente in grado di supportarla: “-moz” per Mozilla (Firefox e derivati) e “-webkit” per Safari.

Pratica

Il nostro codice HTML è come al solito molto pulito ed essenziale, e anzi non richiede nessun tagging aggiuntivo. Abbiamo solamente bisogno di un contenitore e dei paragrafi al suo interno sui quali agire. Una condizione abbastanza classica, insomma.

<div class="esempio multi_colonne">
<h2>Fisso tre colonne con spaziatura 20px</h2>
<div id="colonna_tipo_1">
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>

<h2>Fisso la dimensione e la spaziatura</h2>
<div id="colonna_tipo_2">
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>

Nota: il “Lorem Ipsum” all’interno dei paragrafi è stato troncato per esigenze di impaginazione di questo post.

Andiamo quindi a puntare il div “colonna_tipo_1″ e impostiamo il numero delle colonne sulle quali fare fluire il testo a 3, con una spaziatura di 20 pixel ciascuna.


#colonna_tipo_1{
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;

-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;
}

Colonne multiple con i CSS3

Oppure agiamo sulla proprietà “column width” per fissare la dimensione di una colonnna, definiamo poi la spaziatura e lasciamo che il browser si occupi di come suddividere il testo.

#colonna_tipo_2{
-moz-column-width: 150px;
-webkit-column-width: 150x;
column-width: 150px;

-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;
}

Colonne multiple con i CSS3

4. Testo ombreggiato

Un’altra tecnica decisamente immediata da applicare sul testo per risaltarne l’effetto è la proprietà text-shadow.

Teoria:

La regola in questo caso è una sola

  • text-shadow: 2px 2px 5px #333

che accetta quattro parametri: nell’ordine spostamento orizzontale, spostameno verticale, sfocatura e colore dell’ombra proiettata.

Pratica:

La proprietà viene applicata in maniera molto semplice, e rende al meglio se usata in maniera “sottile” e senza abusarne.

.ombra_su_testo h2 {
text-shadow: 2px 2px 5px #333;
color: #eee;
}

Text shadow su testo con i CSS3

Background multipli

Ecco quindi l’ultima delle proprietà di oggi, probabilmente una delle più richieste da chi utilizza i CSS in maniera “massiva” con particolare attenzione agli effetti sullo sfondo: i background multipli.

Teoria

Utilizzare i background multipli con i CSS3 è molto più semplice di quanto possa sembrare. Si tratta sostanzialmente di un’espansione delle attuali regole:

  • background-image
  • background-position
  • background-repeat

che vanno compilate esattamente come nelle specifiche CSS2, ma alle quali è possibile “appendere”, tramite il separatore virgola “,” ulteriori background, posizioni e proprietà di ripetizione.

Vediamolo in pratica.

Pratica

Nell’esempio che vi riporto ho utilizzato due diversi background: uno per realizzare una sfumatura in alto, ripetuta sull’asse X, e una in basso a destra, non ripetuta. Il tutto con tre regole e senza l’utilizzo di contenitori annidati a supporto.

.background_multipli {
background-image: url(img/top.jpg), url(img/bottom_right.jpg);
background-position: top left, bottom right;
background-repeat: repeat-x, no-repeat;
}

L’immagine in alto “top.jpg” viene quindi posizionata “top left” e ripetuta “repeat-x”. Le altre proprietà seguono la seconda posizione, un eventuale terzo background la terza, e così via teoricamente all’infinito.

Come potete immaginare gli utilizzi di una simile tecnica sono pressochè infiniti. Attualmente solo Safari supporta i background multipli.

Background multipli con i CSS3

Scarica i file con gli esempi

Arrivati al termine della terza puntata ecco per voi a disposizione lo zip contenente i file utilizzati sino ad ora (comprensivo anche degli argomenti trattati nella prima nella seconda puntata).

Trovato questo articolo interessante?

Condividilo sulla tua rete di contatti Twitter, sulla tua bacheca su Facebook o semplicemente premi "+1" per suggerire questo risultato nelle ricerche in Google. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie!

8 Commenti

Update 12/02/2012: Il Regolamento Commenti è cambiato! Leggi ciò che serve sapere!

  1. Angelo ha detto:

    Sarebbe bello poter usufruire di queste novità fin da subito.. che rabbia!!

    Rispondi
  2. Ottimo lavoro!! Come sempre…

    Rispondi
  3. Francesco Gavello ha detto:

    Grazie ragazzi :D

    @Angelo e @Luca: con i dovuti accorgimenti si possono utilizzare già da oggi. Certo non è come avere a disposizione qualcosa di “standard” e ben definito, ma qualcosa si può già fare ;)

    Rispondi
  4. Sheik ha detto:

    oggi si può fare, ma non tutti potrebbero apprezzarne i benefici. guardando un po’ di statistiche noto che tra i mie utenti (che per altro sono abbastanza Geek) il 37% di questi usa IE, e tra loro ancora il 20% usa il 6 sebbene siano passati due anni dal rilascio della nuova. si aggiunga a questi una minoranza (2%) che usa PlayStation e dispositivi mobili che non so cosa vedano…
    ora IE8 è in lavorazione e garantisce che sarà conforme agli standard, ma chi la sta provando sostiene anche che tra dire e il fare… comunque anche presupponendo che la nuova versione giungerà nel 2009 e che sarà veramente conforme, quanto ci vorrà prima che prenda piede? due anni non sono bastati per pensionare ie6 (vuoi che il 7 era penoso), temo che se ne riparlerà per il 2015…

    Comunque il tema è un altro, il miglioramento progressivo. Ora come hai detto giustamente in apertura queste funzioni devono considerarsi un “in più” da aggiungere su una solida base uniformemente fruibile…ma è questa il vero problema: credo che tu sia abbastanza concorde (a giudicare dall’aspetto del blog) nel dire che pochi elementi ben riconoscibili sono la chiave di un buon layout e che non si deve puntare su un ammassarsi di elementi, poichè oltre a fare pacchiano si soffocano a vicenda non lasciando emergere una personalità ben definita.
    Per esempio, se io volessi fare un layout con div arrotondati (magari lasciano un angolo appuntito) e titoli con le ombre direi che con una buona scelta di colori avrei belle che definito il mio layout…ma se questi elementi possono essere visti solo da alcuni, gli altri utenti mi vedranno come se fossi il sito della W3C (ottimo se si vuole essere una documentazione rapidamente accessibile dagli addetti ai lavori, ma pessimo se si punta a un pubblico più ampio). hai qualche consiglio (o esempio di sito che lo faccia) per impostare la base in modo che sia accattivante per i “più sfortunati” e allo stesso tempo non far diventare la grafica troppo pesante per chi può godersi il miglioramento progressivo?

    Rispondi
  5. Angelo ha detto:

    La mia è esperienza:

    sul mio Blog ho implementato gli angoli arrotondati per le voci del menu e una parte dell’header usando -moz-border-radius /-webkit-border-radius..

    su Firefox e Chrome va perfetto, mentre su IE si continua a vedere come prima.. Ora, l’80% dei miei utenti usa Firefox.. per quel 20% di utenti IE le cose rimangono come prima, ossia elementi squadrati..ma si vede sempre ottimamente..

    quindi non penso ci siano problemi per nessuno..

    Rispondi
  6. Francesco Gavello ha detto:

    @Sheik: in effetti la questione che sollevi non è mica semplice da risolvere :)

    Quanto è giusto spingersi con una tecnica ancora non standard? E quanto invece dovrebbe essere considerato “base da cui partire”?

    Non credo che esista una risposta unanime: ci si può accontentare degli spigolosissimi div e relegare tutto il resto al progressive enhancement; oppure lavorare su tutti gli hack a disposizione per garantire il massimo della compatibilità (oggi, ma domani?)…

    Si potrebbe anche dire che come sempre i vincoli lo fanno il tempo, il budget e il target…

    Rispondi

Lascia un commento

Anteprima commentatore

Personalizza il tuo avatar!
Vai su gravatar.com e carica quello che preferisci!

I commenti sono modificabili entro 5 minuti dal loro inserimento.
Puoi usare questi tag: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Solo i commenti firmati con un nome saranno accettati. Leggi il Regolamento Commenti!