Guida [GUIDA] Creare testo per occhiali 3D con CSS

[Biuni]

Creare testo per occhiali 3D con CSS​

In questa miniguida vi illustrerò come fare a creare un testo 3D visibile con gli appositi Occhiali.

Potete trovare qui i codici e una demo:

Demo Testo 3D
Codici Testo 3D

​

Passiamo ora alla spiegazione di come personalizzare tutto ciò:

Modifica HTML

    <p id="title">

      <span>T</span><span>E</span><span>X</span><span>T</span>&nbsp;<span>3</span><span>D</span>

    </p>

All'interno di ogni <span></span> va inserita una lettera del vostro testo. Per creare lo spazio va usato SOLO il tag &nbsp;

Modifica CSS

[FONT=tahoma]/* Font */
 @ Import url(http://fonts.googleapis.com/css?family=Oswald);[/FONT]

Si deve inserire l'import del font che volete usare. (Potete usare i Google Font)

[FONT=tahoma][SIZE=2]/* Stile del testo 3D */[/SIZE]
[SIZE=2]#testo {[/SIZE]
[SIZE=2]  text-align: center;[/SIZE]
[SIZE=2]  color: #000;[/SIZE]
[SIZE=2]  font-weight: bold;[/SIZE]
[SIZE=2] [B] font-size: 7em; [/B]                                 [COLOR=#ff0000]/*  Modifica la dimensione del testo   */[/COLOR][/SIZE]
[SIZE=2]  padding-top: 70px;[/SIZE]
[SIZE=2]  [B]font-family: 'Oswald', sans-serif;[/B]    [COLOR=#ff0000]/* Modifica il Font */[/COLOR][/SIZE]
[SIZE=2]}[/SIZE][/FONT]

Questa parte del codice è eliminabile in quanto sono i stili dell'icona dei occhiali 3D e dell'animazione CSS.

[FONT=tahoma]/* Occhiali 3D */
#occhiali {
  background: url('http://icons.iconarchive.com/icons/ergosign/cinema/72/3D-Glasses-icon.png') no-repeat;
  width: 80px;
  height: 80px;
  margin: 0 auto;
}


/* Stile Animazione */
#title:focus {
  outline: none;
}
#title span {
  vertical-align: middle;
  line-height: 1.5em;
  transition: font-size 2s cubic-bezier(0, 1, 0, 1);
}
#title span:hover {
  font-size: 1.5em;
  line-height: 1em;
  transition: font-size .2s cubic-bezier(0, 0.75, 0, 1);
}[/FONT]

Spero la guida vi sia piaciuta, per qualsiasi dubbio o domanda resto a disposizione.

Guida scritta interamente da Biuni per Inforge.net |Vietata la riproduzione|​

 

[Webber]

WTF Like. Non ci avevo mai pensato