Pubblicato il 02/07/14e aggiornato il

Come creare testo in tre dimensioni con il CSS3.

Come creare un testo con effetto 3d mediante l'uso del CSS3.
In  un precedente post abbiamo visto come inserire una ombreggiatura in un testo e in questo articolo vedremo come sia possibile aggiungere tutta una serie di ombre e utilizzarle per la creazione di un effetto 3D esclusivamente mediante l'utilizzo del CSS3. Si usa il tag text-shadow che può essere personalizzato con 4 parametri. Il primo rappresenta lo scostamento orizzontale, il secondo lo scostamento verticale, il terzo il "blur" ovvero il grado di sfumatura mentre il quarto non è altro che il codice del colore. Si possono inserire altre ombre usando la stessa sintassi dopo ver inserito una virgola alla fine del primo attributo

Per fare un esempio se si incolla questo codice in un widget o in un articolo in Modalità HTLM

<style>
.ombreggiatura {
   color: white;
   font: bold 52px Georgia;
   text-shadow: 1px 1px 3px #036,
                2px 2px 3px #06c,
               3px 3px 3px #39f;
}
</style>
<div class="ombreggiatura">Testo con ombra</div>

si otterrà questo risultato

testo-con-ombra

Sono state inserite 3 ombre rispettivamente da 1, 2 e 3 pixel con sfumatura di 3 pixel.  A questo stesso codice possiamo inserire anche un effetto hover in questo modo 

<style>
.ombreggiatura {
   color: white;
   font: bold 52px Georgia;
   text-shadow: 1px 1px 3px #036,
                2px 2px 3px #06c,
                3px 3px 3px #39f;
}
.ombreggiatura:hover {
   cursor:pointer;
   position: relative;
   top: -3px;
   left: -3px;
   text-shadow: 1px 1px #fe4902,
                2px 2px #fe4902,
                3px 3px #fe4902,
                4px 4px #fe4902,
                5px 5px #fe4902,
                6px 6px #fe4902;
}
</style>
<div class="ombreggiatura">Testo con ombra</div>

che porta a questo risultato

effetto-hover-ombra

Con il CSS3 possiamo anche inserire delle transizioni per passare da una ombreggiatura a un'altra dopo un tempo determinato. Il codice precedente si dovrebbe modificare in questo modo

<style>
.ombreggiatura {
   color: white;
   font: bold 52px Georgia;
   text-shadow: 1px 1px 3px #036,
                2px 2px 3px #06c,
                3px 3px 3px #39f;
-webkit-transition:    all 0.3s ease-out;
   -moz-transition:    all 0.3s ease-out;
   -ms-transition:     all 0.3s ease-out;
   -o-transition:      all 0.3s ease-out;
}
.ombreggiatura:hover {
   cursor:pointer;
   position: relative;
   top: -3px;
   left: -3px;
   text-shadow: 1px 1px #fe4902,
                2px 2px #fe4902,
                3px 3px #fe4902,
                4px 4px #fe4902,
                5px 5px #fe4902,
                6px 6px #fe4902;
}
</style>
<div class="ombreggiatura">Testo con ombra</div>

dove è stata impostata una transizione di 0.3s vale a dire di 3 decimi di secondo. Con questo codice l'ombreggiatura aumenterà di 3 pixel quando ci si passerà sopra con il mouse.

EFFETTO 3D PER IL TESTO

 

Finalmente vediamo come sia possibile realizzare un testo in tre dimensioni. Il codice è il seguente

<style>
#ombra_3D h1{
font:normal 60pt Georgia;
color:#FFF;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
#ombra_3D p{
font:normal 40pt Georgia;
color:#FFF;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
</style>
<div align="center"><div id="ombra_3D">
<h1>Titolo 3D</h1>
<p>Paragrafo in 3d</p>
</div>
</div>

e produce questo risultato

effetto-3d-testo

Ho inserito due tag evidenziati di giallo per centrare il testo e due regole una per il titolo (h1)e un'altra per i paragrafi (p). Naturalmente possono essere usati tutti i colori che si vuole. A tale scopo è consigliabile l'utilizzo del tool Oto255 per trovare tutte le tonalità di colore a partire da uno dato. Nel codice precedente è stata utilizzata la simbologia RGBA nei codici dei colori in modo da rendere le ombre via via sempre più trasparenti. Si può facilmente convertire un codice esadecimale in codice RGB.




6 commenti :

  1. Carissimo Ernesto, non c'entra una sega col post (scusa il linguaggio ma credo tu sia toscano e ci capiamo), ma volevo chiederti questo.

    Mi sono accorto che da quando nel blog prima del titolo di un film scrivo "recensione" nei motori di ricerca compaio molto prima, in alcuni casi anche per primo.
    Questo ovviamente quando l'utente cerca il titolo + recensione ovvio, ma per i film spesso accada così.
    Allora un pò di giorni fa ho iniziato a correggere piano piano, un pò al giorno, tutti i vechi titoli aggiungendo quella parola "magica".
    Ma mi sono accorto che in realtà il motore di ricerca di google non l'ha "presa", ossia il risultato rimane senza.
    E di conseguenza non ci sono scalate nel motore (sempre che l'utente scriva anche "recensione").

    E' strano oppure normale?

    Magari ho pensato che ci sia un aggiornamento non immediato, possibile?

    Credo siano passati 4,5 giorni da quando l'ho fatto.

    Grazie :)

    RispondiElimina
    Risposte
    1. Hai fatto probabilmente senza saperlo quello che tanti studiosi della SEO fanno quotidianamente cioè dei test per trovare il sistema migliore per scalafre le SERP. Il discorso di cambiare titolo ai vecchi post è piuttosto complicato perché Google rileva le modifiche e soprattutto le "digerisce" con un ritardo più o meno marcato. Dopo averle rilevate non è poi detto che le inserisca nei risultati soprattutto se l'algortitmo non le ritiene essenziali.
      Come consiglio ti posso dire che l'approccio di testare schemi diversi di titoli, confezioni di contenuto, Permalink, tipologia di parole chiave è assolutamente guisto. Se questo poi ti porterà a avere anche dei risultati concreti è tutto un altro discorso e su queste tematiche credo che neppure gli ingegneri di Google potrebbero dirti delle parole certe e definitive.
      @#

      Elimina
    2. Ah ah, o.k, allora no, lascio perdere, altro che ingegnere sono :)

      Però oggi sempre su tuo "consiglio" ho modificato il codice per far apparire il titolo del post prima di quello del blog nei risultati di ricerca.

      Credo che sia difficile "rimetterci", c'è solo da guadagnare semmai.
      O almeno credo...

      Grazie lo steso :)

      Elimina
    3. Ernesto, non so se può interessare qualche lettore ma l'esperimento è perfettamente funzionato.
      Ho modificato tutti i titoli dei post scrivendo davanti "recensione".
      Poi mi sono appuntato 3,4 titoli.
      Beh,uno è passato dalla sesta pagina di risultati ricerca alla seconda.
      Un altro dall'ottava alla terza.
      Un altro ancora addirittura dalla nona alla prima.
      E uno ancora meglio, è andato primo risultato della prima pagina.
      Ieri ad esempio il film The Tomorrow Series ha avuto 1800 visualizzazioni contro le 110 in 2 anni.
      Insomma, non so cosa hanno scoperto quegli ingegneri, ma la cosa funziona :)

      Grazie per tutto il resto

      Elimina
    4. Da scriverci un post per poi pubblicarlo su http://moz.com/blog la bibbia degli esperti SEO :))

      Elimina
    5. Ah ah, no, li lascio volentieri ai loro brain storming...

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.