Textos IIID CSSIII

Los textos generados con CSS3 son simplemente espectaculares y uno de ellos es el de efecto 3D como los que ha creado Josh Johnson en Design shack.

Son 10 ejemplos de texto 3D usando solo CSS3.


Aquí los ejemplos:

1.Texto 3D CSS3

2.Texto 3D CSS3

3.Texto 3D CSS3

4.Texto 3D CSS3

5.Texto 3D CSS3

6.Texto 3D CSS3

7.Texto 3D CSS3

8.Texto 3D CSS3

9.Texto 3D CSS3

10.Texto 3D CSS3

/* Estilos por defecto */
{
 padding: 0;
 margin: 0;
}

h3 {
  text-transform: uppercase;
  font: bold 125px/1 Helvetica, Verdana, sans-serif;
  margin: 20px 50px;
  float: left;
}

/* Fuentes personalizadas */
.alfa {
 font-family: 'Alfa Slab One', cursive;
 text-transform: none;
 font-weight: 400;
}

.sansita {
 font-family: 'Sansita One', cursive;
 text-transform: none;
 font-weight: 400;
}

.medula {
 font-family: 'Medula One', cursive;
 text-transform: none;
 font-weight: 400;
}

.limelight {
 font-family: 'Limelight', cursive;
 text-transform: none;
 font-weight: 400;
}

/* Sombras de colores 3D */
.green {
  color: #d4daa8;
  text-shadow: 
    0 2px 0 #bcc678,
    0 4px 0 #b0bc60,
    0 6px 0 #a3b04a,
    0 8px 0 #8d9840,
    3px 8px 15px rgba(0,0,0,0.1),
    3px 8px 5px rgba(0,0,0,0.3);
}

.blue {
  color: #c8d2da;
  text-shadow: 
    0 2px 0 #b4c1cd,
    0 4px 0 #a0b1bf,
    0 6px 0 #8ca0b2,
    0 8px 0 #778fa4,
    3px 8px 15px rgba(0,0,0,0.1),
    3px 8px 5px rgba(0,0,0,0.3);
}

.red {
  color: #d93a36;
  text-shadow: 
    0 2px 0 #aa2421,
    0 4px 0 #8e1e1b,
    0 6px 0 #711816,
    0 8px 0 #551210,
    3px 8px 15px rgba(0,0,0,0.1),
    3px 8px 5px rgba(0,0,0,0.3);
}

.darkblue {
  color: #6d879d;
  text-shadow: 
    0 2px 0 #5d768a,
    0 4px 0 #4f6576,
    0 6px 0 #425362,
    0 8px 0 #34424d,
    3px 8px 15px rgba(0,0,0,0.1),
    3px 8px 5px rgba(0,0,0,0.3);
}

.black {
  color: #4c4c4c;
  text-shadow: 
    0 2px 0 #3b3b3b,
    0 4px 0 #2a2a2a,
    0 6px 0 #191919,
    0 8px 0 #080808,
    3px 8px 15px rgba(0,0,0,0.1),
    3px 8px 5px rgba(0,0,0,0.3);
}

.gray {
  color: #d4d4d4;
  text-shadow: 
    0 2px 0 #a1a1a1,
    0 4px 0 #909090,
    0 6px 0 #7f7f7f,
    0 8px 0 #6e6e6e,
    3px 8px 15px rgba(0,0,0,0.1),
    3px 8px 5px rgba(0,0,0,0.3);
}

<h3 class="green">1.Texto 3D CSS3</h3>
<h3 class="blue">2.Texto 3D CSS3</h3>
<h3 class="red">3.Texto 3D CSS3</h3>
<h3 class="darkblue">4.Texto 3D CSS3</h3>
<h3 class="black">5.Texto 3D CSS3</h3>
<h3 class="gray">6.Texto 3D CSS3</h3>

<!-- Fuentes personalizadas -->
<h3 class="green alfa">7.Texto 3D CSS3</h3>
<h3 class="blue sansita">8.Texto 3D CSS3</h3>
<h3 class="red medula">9.Texto 3D CSS3</h3>
<h3 class="darkblue limelight">10.Texto 3D CSS3</h3>