Comunidad de diseño web y desarrollo en internet online

Texto sombreado y en 3D con CSS 3

Si has intentado crear texto en 3D utilizando CSS3 y HTML5 y no te ha acabado de salir bien, te traigo un ejemplo que te ayudará a conseguir un texto como este:



Escribiremos por una parte el siguiente código fuente en HTML, refiriéndose a un CSS que crearemos posteriormente (texto.css):

Código :

<html> 
   <head> 
      <title> Texto 3D </title>
      <link rel="stylesheet" href="texto.css" type="text/css">
   </head>
   <body class="collage none-bg">
      <div id="header">
            <h1 class="name-title">
           Cristalab Foro
          </h1>
         </div>
    </body>
</html>


Y a continuación crearemos el texto.css (en este caso en la misma ruta, sino poned el directorio que queráis)

Código :

@charset "utf-8";
/* CSS Document */

#header h1 {
  font-weight: bold;
  font-size: 68px;
  font-family: "Arial";
  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);
  color: #FFF;
  text-align: center;
}


Y eso es todo. Ahora editáis el contenido de entre las etiquetas H1 y ya es suficiente. Podéis cambiar también colores, tamaños y fuentes en la hoja de estilo.

Espero que os haya sido útil. ¡Un saludo!

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate