Normalmente, añadir efectos sobre textos pasa por utilizar algunos trucos y efectos de Photoshop, pero si hablamos de diseño web entonces quizás te sorprenda saber que puedes conseguir efectos realmente impresionantes tan solo aplicando algo de CSS3. Algunos de estos efectos te parecerán salidos de algún software especializado en tratamiento gráfico, pero en realidad el navegador aquí hace todo el trabajo con resultados bastante interesantes.
La ventaja de este método es que la cantidad de datos que alguien tiene que descargar en su ordenador para visualizar una página es menor que si utilizaras imágenes estáticas. La desventaja es que no todos los navegadores van a poder visualizar los efectos, aunque esto último es algo que va desapareciendo a medida que los internautas van actualizando su software con el tiempo.
Si aun así te interesa veamos algunos de estos efectos CSS3 para texto:
Neón y otros efectos con CSS3
En este sitio te explican cómo crear un efecto de neón sobre un texto de forma bastante realista solo aplicando CSS3. Además puedes encontrar en la misma página información sobre cómo crear texto en 3D y con sombra interna.
Efecto texto de cristal con CSS3
Un interesante efecto que da textura de cristal a un texto.
Tipografía de calidad con CSS3
En este mini-tutorial se aplican sombras, líneas, transiciones y gradientes de color para conseguir una tipografía que bien podrías afirmar que salió de Photoshop. Sin embargo solo es CSS3.
Efecto de sombra interno
El efecto de sombra interno te permite añadir una sombra interna a un texto de forma que de la sensación tridimensional de que los caracteres están a unos milímetros por debajo de la página.
Texto en relieve
Este efecto simula texto en relieve como si hubiera sido impreso con una máquina a presión, un clásico en algunas tarjetas y otros productos salidos de imprentas antiguas.
Efecto Tilt Shift para imágenes
El efecto Tilt Shift se suele utilizar en el mundo de la fotografía para conseguir que un paisaje real parezca una miniatura con un resultado bastante curioso. En este caso se intenta aplicar ese efecto a un texto utilizando CSS3.
Flash de luz
Un curioso efecto que simula un foco de luz como de una linterna sobre un texto.
Efectos de sombreado varios
En este tutorial te explican cómo aplicar efectos de sombra sobre textos utilizando CSS3 de diferentes formas: blur o emborronado de texto, sombra 3D, Emboss, sombra interior y brillo o glow.
Efecto de texto con sombra dinámica
Este efecto es bastante sorprendente porque es dinámico. No solo muestra una sombra bajo el texto, sino que además cuando mueves el ratón sobre los caracteres se produce un efecto de iluminación, como si el puntero del ratón fuera un foco. Es compatible con Safari, Firefox 3.5, Opera y Chrome.
Fondo sombreado para texto
Un efecto sombreado para texto.
Cambiar el color de fondo de selección en un texto
Este efecto posiblemente sea de los más prácticos. Utilizando técnicas de CSS3 puedes modificar el color con el que se selecciona el texto en una página cuando arrastras con el ratón o con el teclado. Es compatible con FireFox, Safari, Chrome y Opera.
Efecto de borde para texto
Este efecto crea un borde fino alrededor de cada carácter en el texto. Compatible con Safari y Chrome.
Texto en 3D
Con esta técnica puedes convertir un texto 2D normal y corriente en otro en 3D.
Mayúsculas pequeñas
El efecto de mayúsculas pequeñas ocurre cuando todas las letras del texto son mayúsculas pero la primera letra de cada palabra es un poco mayor. En la misma página encuentras algunos otros efectos interesantes como ‘texto cupón’, cuadros alrededor del texto, bordes dobles o el clásico efecto 2.0 de botón de cristal.
