CSS3: gli effetti più cool, ma che non puoi ancora implementare… o forse si?

CSS (Cascading Style Sheet) hanno rivoluzionato il modo di approcciare alla programmazione web: non solo permettono di poter applicare al nostro sito una grafica accattivante, ma, tramite i suoi selettori, può essere oggetto di modifiche tramite javascript.

Dal 1996 (anno in cui il W3C diede vita al CSS1) ai giorni nostri, il linguaggio CSS ha fatto passi da gigante, fino alla versione CSS3 attualmente in fase di realizzazione.

Se da un lato la maggior parte dei browser (Mozilla Firefox, Safari, Chrome) supporta buona parte dei neonati moduli del CSS3, dall’altro il più diffuso browser al mondo, Internet Explorer, non ne supporta nativamente quasi nessuno costringendoci, di fatto, a dover ricorrere a numerosi hacks al fine di ottenere risultati vicini alla sufficienza.

Oggi vedremo insieme, infatti, alcuni effetti che potrebbero rivoluzionare il web, ma che non possiamo ancora implementare nei nostri siti proprio a causa delle mancanze di Internet Explorer.

Prima di cominciare un avvertimento: nel caso tu stessi visualizzando questa pagina con Internet Explorer, chiudilo e leggi questo articolo con qualsiasi altro browser!

CSS3: -moz-column, -webkit-column

In moltissimi siti web è forte la presenza di elementi tipografici: dai grandi titoli che ricordano le più famose testate giornalistiche, all’utilizzo del Times New Roman; dall’indentatura del testo, fino addirittura all’utilizzo di uno stile giornalistico nella generazione dei contenuti.

C’è solo un elemento tipico dei quotidiani che non può essere riprodotto all’interno di una pagina web: il testo non può essere diviso in colonne (se non con grande fatica) così come invece è possibile all’interno delle riviste e dei giornali.

O meglio, per essere precisi: non era praticamente possibile creare colonne di testo perchè il CSS3 ha colmato questa lacuna: stiamo parlando dei moduli –moz-column –webkit-column.

Facciamo prima una piccola digressione: come avrai potuto notare i due moduli sono pressoché identici, fatta eccezione per il loro prefisso.

Perché si utilizza il prefisso –moz? Perché –webkit?

-moz è il prefisso che si riferisce al motore grafico sul quale si basa Mozilla Firefox: soprattutto con il css3, infatti, l’interessamento delle funzioni core dei browsers si è fatto sempre più pesante, tanto da dover differenziare i moduli in base al browser utilizzato.

-webkit si riferisce, invece, al motore di Safari e Chrome, i due browsers che, per motivi diversi, stanno conoscendo un momento di crescita e di apprezzamento costante: Safari deve il suo successo al florido momento di tutti i prodotti Apple, Chrome viene da Google e come ogni cosa che viene da Google è un prodotto apprezzato dai più.

Risolto il dilemma amletico riguardante questi due prefissi, vediamo come impiegarli al meglio!

Torniamo alle nostre colonne, quindi, e supponiamo di voler ottenere questo risultato:

Credi sia difficile? Beh, resterai stupefatto dalla sua semplicità!

Vediamo di cosa abbiamo bisogno:

  • Una pagina html (index.html);
  • Un foglio di stile (style.css).

Creiamo una pagina html (index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css"/>
<title>Il nostro giornale | Your Inspiration Web</title>
</head>
  <body>
            <h1 class="title">Your Inspiration Web: Il giornale</h1>
            <h2 class="subtitle">Creiamo una pagina web in pieno stile giornalistico!</h2>
             <div class="colonne">
                        <p class="testo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id lorem sit amet lorem commodo adipiscing. Nulla vitae consectetur neque. Pellentesque eu dui sit amet nibh ultrices pharetra. Phasellus laoreet, dui et laoreet elementum, ligula nisl porttitor turpis, vel aliquet felis felis ultrices dolor. Vivamus vel odio ut orci vehicula ultricies viverra non felis. Vestibulum quis purus lectus. Sed faucibus odio ac mi dignissim ut tristique ipsum luctus. Proin posuere massa ac magna vehicula tincidunt. Sed varius pharetra lorem, ac scelerisque enim fringilla eget. Proin non urna mi, at dictum turpis. Pellentesque et imperdiet dui. Quisque dictum sapien et est scelerisque condimentum. Donec non ornare dolor.Nam commodo, magna non congue ultricies, eros metus molestie nisl, eget rhoncus elit odio at justo. Vivamus pulvinar urna nisi. Cras pulvinar ornare justo eget porta. Sed nisl ligula, aliquam a eleifend sit amet, porttitor at lectus. Curabitur imperdiet sem tempor neque bibendum interdum. Proin et nisl augue, non lobortis sem. Proin condimentum congue ipsum at adipiscing. Aliquam at tristique justo. Sed sit amet velit sapien, eu gravida velit. Nunc varius rhoncus mauris, volutpat dapibus tortor tristique sed. Vivamus placerat scelerisque condimentum. Donec ullamcorper hendrerit orci vel porta. Maecenas rutrum lorem id justo egestas euismod.Aliquam vitae justo purus. Curabitur fermentum, massa ac sollicitudin semper, quam purus viverra libero, nec pretium neque nisl ac sapien. Etiam hendrerit lorem id ligula blandit sit amet congue tortor laoreet. Praesent rhoncus vestibulum gravida. Sed faucibus, massa et auctor ultrices, tortor odio rhoncus est, nec convallis erat mi et nunc. Nunc vestibulum accumsan mauris a interdum. In vel nulla ut felis ullamcorper mattis sed vitae lectus. Sed eget risus a elit cursus dictum vel accumsan tellus. Donec ac eros id est iaculis varius. Fusce mollis, nulla at posuere consectetur, arcu leo consequat lectus, congue malesuada lacus enim vel tellus. Nam in lectus eros. Morbi pretium faucibus nulla, vitae tincidunt lacus pharetra a. Maecenas et fringilla nibh. Curabitur convallis, lorem volutpat viverra fermentum, lectus orci bibendum leo, id tempus sem leo non nisl.</p>
            </div>
</body>
</html>

Adesso è la volta del foglio di stile da associare al nostro documento (style.css):

body
{
    margin: 10px;
}

.title
{
    font-size: 50px;
    text-align: center;
}

.colonne
{
    -moz-column-count:3;
    -webkit-column-count:3;
    -moz-column-gap:30px;
    -webkit-column-gap:30px;
}

Cosa abbiamo fatto?

Partiamo dalla pagina html: diamo un titolo alla nostra pagina, un sottotitolo e dopodiché creiamo un lungo paragrafo, contenente in questo caso del testo di prova.

Completata la pagina html, passiamo al css: optiamo per un design ridotto all’osso nel quale spicca sicuramente questa porzione di codice:

.colonne
{
    -moz-column-count:3;
    -webkit-column-count:3;
    -moz-column-gap:30px;
    -webkit-column-gap:30px;
}

Qui entrano in gioco i prefissi che abbiamo appena visto ossia –moz –webkit: mediante -webkit-column-count –moz-column-count comunichiamo al foglio di stile il numero di colonne in cui suddividere il nostro testo; attraverso –moz-column-gap–webkit-column-gap passiamo al browser la distanza da mantenere tra una colonna e l’altra.

Qui potrai trovare l’esempio: ricordati di visualizzare questa pagina con un browser che non sia Internet Explorer!

Purtroppo non c’è ancora modo di poter implementare questo effetto su Internet Explorer, che nonostante le sue innumerevoli pecche resta comunque il browser più diffuso.

Ci sono però determinati effetti figli del nuovo CSS3, che possono essere ottenuti anche in Internet Explorer tramite degli hacks, come detto all’inizio dell’articolo: è il caso di –webkit-box-shadow –moz-box-shadow.

CSS3: -webkit-box-shadow e –moz-border-shadow

Diamo profondità agli elementi

Le ombre sono cool: danno un senso di profondità agli elementi presenti all’interno della nostra pagina web, trasmettono interattività, spesso sono quel dettaglio in più che arricchisce il nostro sito.

Il css3 permette di poter applicare un’ombreggiatura realistica, precisa e fortemente modificabile ai nostri elementi.

Ricordi com’è stato facile dividere il nostro testo in colonne? Beh dare profondità ai box tramite le ombre sarà ancora più semplice!

Torniamo sulla pagina (index.html) che abbiamo creato in precedenza e supponiamo di inserire il titolo all’interno di un div (titleContainer):

<div id=”titleContainer”>
       <h1 class="title">Your Inspiration Web: Il giornale</h1>
</div>

al quale associamo uno stile all’interno nel nostro file “style.css“:

#titleContainer
{
    background-color: #000;
    width: auto;
    height: auto;
    -moz-box-shadow: 2px 5px 2px #777;
    -webkit-box-shadow: 2px 5px 2px #777;
}

Diamo uno stile nuovo al nostro titolo che avrà quindi queste sembianze nel css:

.title
{
    font-size: 50px;
    text-align: center;
    color: #fff;
    padding: 10px;
}

Come puoi vedere bene qui la testata del nostro sito avrà un’ombra realistica e perfettamente controllabile, infatti se esaminiamo i moduli del css3 utilizzati:

    -moz-box-shadow: 2px 5px 2px #777;
    -webkit-box-shadow: 2px 5px 2px #777;

possiamo riconoscere in ordine di comparsa:

  • Offset orizzontale dell’ombreggiatura (2px);
  • Offset verticale dell’ombreggiatura (5px);
  • Raggio di sfocatura dell’ombreggiatura (2px);
  • Colore dell’ombreggiatura (#777).

E per Internet Explorer?

Come sempre, Internet Explorer è un caso da affrontare separatamente: infatti il browser di casa Microsoft supporta un certo tipo di ombreggiatura sugli elementi delle pagine html, ma con una sintassi proprietaria:

filter:progid:DXImageTransform.Microsoft.Shadow(color='#777',direction='120',strength='20');

Le voci presenti sono abbastanza intuibili:

  • color: il colore in esadecimale;
  • direction: la direzione dell’ombreggiatura;
  • strenght: l’intensità dell’effetto ombra.

Uno dei vari inconvenienti di questo hack è che il nostro foglio di stile non passerà più la validazione.

Il risultato? Eccolo qui, nella pagina frutto dei nostri esperimenti!

Meno elegante e potente dei due esempi precedenti, ma  come si dice: a mali estremi estremi rimedi!

Conclusioni

In questo articolo hai avuto modo di vedere un effetto veramente bello, ma che non puoi ancora implementare (testo in colonne) ed un altro molto utile che con qualche hack puoi visualizzare su tutti i browsers (ombreggiature).

Nel prossimo articolo vedremo altri effetti da applicare ai nostri elementi, ma stavolta chi utilizza Internet Explorer non sarà del tutto tagliato fuori!

Il CSS3 è alle porte: non lasciarti trovare impreparato!

Prima di chiudere una piccola curiosità, stai già utilizzando qualcuno dei nuovi moduli del CSS3 nei tuoi lavori?

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: , ,

L'autore

Web designer, cerca l'ispirazione in ogni oggetto che lo circonda. Specializzato nella creazione di layout per Wordpress è sempre alla ricerca del framework javascript più cool, del social network più in voga, del design più innovativo... Genere musicale? Lounge...

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

19 commenti

  1. iteand
  2. iteand

Trackback e pingback

  1. Come utilizzare font non standard su un sito web? | Your Inspiration Web
    [...] prima una piccola digressione: leggendo i commenti fatti allo scorso articolo ,tutti scritti da web designers e grafici web, la …
  2. Notizie dai blog su Esegui l’upgrade a un browser moderno
    [...] CSS3: gli effetti più cool, ma che non puoi ancora implementare… o forse si? I CSS (Cascading Style Sheet) …
  3. Notizie dai blog su Browser e compatibilità con HTML5
    [...] CSS3: gli effetti più cool, ma che non puoi ancora implementare… o forse si? I CSS (Cascading Style Sheet) …
  4. Notizie dai blog su I Browser sono pronti per HTML5 e CSS3?
    [...] CSS3: gli effetti più cool, ma che non puoi ancora implementare… o forse si? I CSS (Cascading Style Sheet) …
  5. Notizie dai blog su Safari disponibile in versione 5
    [...] CSS3: gli effetti più cool, ma che non puoi ancora implementare… o forse si? I CSS (Cascading Style Sheet) …
  6. Notizie dai blog su Menu animati con CSS senza usare Javascript!
    [...] CSS3: gli effetti più cool, ma che non puoi ancora implementare… o forse si? I CSS (Cascading Style Sheet) …
  7. Notizie dai blog su Perche non usare troppi plugin WordPress
    [...] CSS3: gli effetti più cool, ma che non puoi ancora implementare… o forse si? I CSS (Cascading Style Sheet) …

Lascia un Commento

Current day month ye@r *