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.
Lo he probado en Firefox 6 y funciona muy bien. En virus explorer 9, como era de esperarse, kaput!
Por cierto, no creo que las 'class' en el body ni en el h1 sean necesarias. Y de esto, que es HTML5?
@acreonte
Nada, no tiene ningún tipo de relación.
En cuanto a HTML 5, no lo he añadido yo. Algún mod ha modificado el título.
Acreonte :
Por joshuavw el 22 de Septiembre de 2011
saludos cordiales
Por Nerio el 18 de Diciembre de 2011
Por krimi el 16 de Enero de 2012
gracias
Por carlosnoe_20 el 27 de Agosto de 2012
para que el ejemplo completo te quede así: #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);
DXImageTransform.Microsoft.Shadow(color='#232323', Direction=135, Strength=4);
color: #FFF;
text-align: center;
}
Por ArtuRex el 22 de Noviembre de 2012
Por Ignacio el 07 de Noviembre de 2015