Cargando

Ir a contenido

X


Ver Más! Unir varios PDF en uno en Windows 10 nunca fue tan fácil! Sigue los pasos con PDFelement y estará listo en un abrir y cerrar de ojos.


 


Efecto texto 3D con CSS

Los profesionales que trabajamos en diseño y desarrollo de sitios web siempre estamos buscando maneras de atraer las miradas de nuestros clientes hacia los productos y servicios que podemos ofrecerle una novedad para ellos podría ser ver efectos de texto en 3D en sus sitios usando solo HTML5 y CSS3.


Escrito por el sep 17 2015 18:31


Veamos cómo se hace
Necesitaremos:
  • Conocimientos básicos de HTML y css
  • Un editor de código
  • Nuestro navegador



Paso 1


Crearemos una carpeta en nuestro sitio local para guardar los archivos que vamos a necesitar, la llamare “texto_3d” dentro de ella otra llamada css





Paso 2


Iremos al editor de código y crearemos un nuevo archivo index.html que guardaremos en la raíz de la carpeta “texto_3d” que creamos en el paso anterior en este escribiremos nuestra estructura básica html y le añadiremos la referencia a un archivo css llamado "style.ccs" que crearemos posteriormente.

código html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        
        
      
        
    </body>
</html>

Paso 3


Añadiremos una línea dentro del body en la que colocaremos una etiqueta <p> a la cual le asignaremos la clase “texto-3d” que luego crearemos en el archivo .css, colocare dentro de esta etiqueta un texto cualquiera para probar.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        
        
        <p class="texto_3d">Efecto Texto en 3-D</p>
        
    </body>
</html>
Si ahora mismo lo vemos en el navegador no veremos mayores cambios, solo un texto normal y corriente, para que podamos tener una apariencia en 3d es necesario definir algunas propiedades a través de css. Vamos a ello.



Paso 4


En nuestro editor de código crearemos un nuevo archivo .css al que llamare style.css en este colocaremos las propiedades para que nuestro texto tenga ese efecto 3D que queremos lograr.

Paso 5


Comenzaremos a editar nuestro css primero definiremos el tamaño de nuestro body, para ello le daremos una posición absoluta con un ancho y alto de 100%.
body{
    position: absolute;
    width: 100%;
    height: 100%

}

Paso 6


Escribiremos en nuestro .ccs las propiedades para la clase “texto-3d“ que habíamos comentado en el paso 3. Comenzaremos por definir el tipo de letra, particularmente me gusta usar la tipografía “Helvetica Neue”, por su puesto ustedes pueden usarlo con el tipo de letra que deseen. En este caso establecere el tamaño de la letra en unos 80px; tipo negrita o bold… Y por esta ocasión la dejare en color blanco. Si lo vemos en nuestro navegador notaremos que el texto desaparecio, eso es porque lo hemos colocado en color blanco y el fondo de los navegadores también es blanco…
body{
    position: absolute;
    width: 100%;
    height: 100%

}
.texto_3d {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: #fff;

}
Veremos en el navegador que el texto desaparece



Paso 7


Vimos que en el paso anterior el texto desapareció, ahora necesitamos que aparezca y con efecto 3D. Para esto solo necesitamos añadir una sombra a nuestro texto usando la propiedad text-shadow, de la siguiente manera.
body{
    position: absolute;
    width: 100%;
    height: 100%

}
.texto_3d {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: #fff;
    
    text-shadow: 0 1px 0 #ccc;
}


Vemos que hemos conseguido un ligero efecto de sombreado, pero no es suficiente como para que tenga un aspecto 3D, por fortuna css nos permite combinar varias sombras dentro de la propiedad text-shadow separadas por una coma, nos aprovecharemos de esto para colocar múltiples sombras a diferente distancia de nuestro texto y con tonalidades de color distintas desde uno más oscuro hacia uno más claro, para así crear el efecto, pero también debemos combinar estas sombras usando colores rgba y transparencias para dar ese efecto de difusión al final del sombreado.

De tal modo nuestro código css quedaría así.
body{
    position: absolute;
    width: 100%;
    height: 100%

}
.texto_3d {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
    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) ;   
}
Y el resultado del efecto sería el siguiente…



Esto es todo por ahora aquí les dejo un .zip con los archivos, cualquier duda, o sugerencia pueden hacerla llegar a través de los comentarios, saludos...

Fichero Adjunto  texto_3d20150917130359.zip   694 bytes   74 Descargas
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0

Tutoriales Relacionados


6 Comentarios

Con tu tuto no hay dudas, lo he probado y queda igual de bien. mil gracias.


Ronny Bonillo
sep 21 2015 02:32
De nada carlos29 saludos colega...

Fran Pazos
sep 21 2015 08:05

Por fin alguien que comparte efecto 3D en texto. Fácil, rápido y de calidad. ;)

buen ejemplo, compartiré yo otro que tengo montado que seguro os gusta también. Esta bien pensado el tuyo Ronny


Ronny Bonillo
oct 06 2015 18:24

Gracias sergio, comparte el tuyo para hecharle un ojo


Fran Rodríguez
oct 22 2016 23:41

Interesante, no se me había ocurrido!

 

Buen tuto!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado sep 17 2015 18:31
  •   Actualizado sep 20 2015 16:21
  •   Visitas 2.9K
  •   Nivel
    Profesional