35 efectos de texto CSS más para tu sitio web

Efecto despiece

Ya publicamos hace unas semanas una serie de efectos de texto CSS para mejorar la presentación del título H2 de un producto o la cabecera de una entrada de un servicio que se vende en el sitio web de un cliente. Efectos de texto CSS que son capaces de dar ese punto de calidad que buscamos para impresionar al cliente y que nos tenga en cartera durante mucho tiempo.

Volvemos con otra gran lista de efectos de texto CSS que están especialmente dedicados para presentar de la mejor de las formas el sitio web de un producto, servicio, landing page u otro tipo de temática. 35 efectos de texto que no puedes perderte para demostrar que el diseño web a día de hoy está al mejor nivel y al que no podemos perder el tren para estar al día de la estética más actual.

Efecto de texto de película muda

Muda

Un efecto de texto bien particular que se presenta como el perfecto para un tipo de temática en concreto. Entre comillas podrá ser mostrado para dejar bien claro que ponemos la atención en el diseño de nuestro sitio web o en el del cliente.

Entrada de texto CSS aleatoria

Texto aleatorio

Esta entrada de texto CSS aleatoria trata de formarse de manera aleatoria como si fuera la clave secreta de una cadena. Una forma muy llamativa de presentar un texto para un sitio web dedicado a una temática en particular.

Cassie

Cassie

Una animación en SVG que significa muy poco peso para la presentación de un texto que se va formando en varios colores. Llamativa la presencia de este texto que se vale también de JavaScript para dar la nota totalmente.

Texto de sombra animado

Texto de sombra animado

Este texto de sombra animado tiene un toque estético bien particular y diferente al resto de entradas de la lista. Aquí nos olvidamos de JavaScript para presentarse nada más que en código CSS.

Texto morph

Texto morph

Un texto animado en JavaScript y CSS que se transforma de forma cíclica con unos colores neón. Para webs en las que el color de fondo es negro o gris. Animación bien suave para un efecto de texto bien distinto.

Relevación de texto dividido

Texto animado dividido

Este texto se deja caer en el efecto para mostrarse en una animación muy lograda. También cuenta con JavaScript. Con un clic podrás ver la animación lograda para un efecto de texto bien curioso.

Animación de onda

Texto de onda animado

Animación de onda dentro del texto con una SVG. Uno de los puntos curiosos de este efecto de texto es en la imagen de fondo y el gradiente que rellena la onda para hacerlo destacar adecuadamente.

Texto animado warp

Texto warp

Con un poco de JavaScript se logra un efecto de texto en el que cada letra tiene su propio valor de tamaño para que pareciera que está compuesto por distintas pegatinas de letras. Un gran efecto para un texto bien creativo en la presentación.

Efecto de humo

Efecto de humo

Un gran efecto de humo para un texto que va desapareciendo de forma paulatina para desaparecer totalmente. Se puede usar para la pulsación o hacer clic y que el texto se evapore ante nosotros. Sin JavaScript y con muy poco código en CSS.

Efecto burbuja

Efecto burbuja

Un efecto de texto jQuery que nos muestra como se puede crear el efecto de burbuja en una cabecera en HTML. El efecto trata de que aparezcan burbujas desde detrás del texto como si fuera agua con gas. Bien llamativo.

Texto animado de relleno

Texto relleno animado

Un efecto de texto animado que rellena la fuente con la imagen de fondo. No requiere JavaScript y trata solamente de código en CSS. Una animación bien lenta y suave para un texto que quedará perfecto en temáticas en concreto para una web.

Animación de texto en CSS y HTML

Texto puro CSS

Una simple animación de texto en CSS y HTML que hace que las palabras caigan en vertical desde arriba. Nos olvidamos aquí de JavaScript para completar una sencilla y simple animación sin mucha envoltura.

Dibujo de texto de color

Texto color

Aquí se dibuja el texto con un efecto de color muy llamativo y que puede dar la nota para temáticas relacionadas con la adolescencia o la juventud. Queda finalmente en blanco, mientrass la fuente es recorrida por una serie de tonos vibrantes.

Texto animado en SVG

Animado en SVG

Una animación de apenas un segundo recorre todo el dibujo de las letras del texto animado en SVG. Tiene un poco de código en JavaScript para acompañar a CSS y HTML.

Texto en sombra

Texto sombra

La sombra de este texto produce el efecto de profundidad en unos colores llamativos y que casi parecen de una pastelería. El único hándicap es que no está optimizado para dispositivos móviles.

Montserrat

Montserrat

Animación en CSS y HTML que se presenta a si misma por su creatividad y unos colores que van desde el amarillo y rojo. Para un uso determinado por lo especial de su animación de esos colores que recorren el dibujo del texto.

Efecto de despiece

Efecto despiece

Un efecto de texto de despiece en multitud de piezas que podemos ralentizar al dejar el puntero del ratón recorriendo cada una de las letras que compongan la palabra. Un efecto de texto bien llamativo de gran calidad y que se vale de HTML, CSS y JavaScript.

Efecto de texto de onda

Texto onda SVG

Sin JavaScript, este efecto de texto de onda logra poner una animación que realmente mueve la imagen de fondo a través del dibujo de la palabra. Llamativo sin ninguna duda y de gran efecto.

GSAP animación

GSAP animación

Como en muchas películas, todas las letras que conformen un párrafo aparecerán de todas partes para componer finalmente las frases con un gran efecto en la animación. Muy suave para uno de los efectos de texto más llamativo y de mayor calidad de toda la lista. Imprescindible para tenerlo muy presente para ciertos tipos de trabajos para clientes.

Animación de texto colorida

Colorido

Una animación lenta y fluida de color en el texto que consigue realizar un degradado. Aunque tiene un poco de JavaScript, principalmente está basado en SCSS. Es de esos efectos sutiles, pero que muestran la elegancia de haberlo sabido seleccionar para la web. No pasará desapercibido.

Efecto de texto imposible

Texto imposible

El recuadro en rojo que rodea el texto gira sobre si mismo con un efecto de sombra que va cubriendo la palabra o frase. Es muy llamativo y de gran interés para cubrir de elegancia la entrada o cabecera de un sitio webe.

Relleno de texto multicolor con SVG

Texto SVG

Animación de relleno multicolor que se presenta como uno de esos efectos de texto que sobresale por si mismo. Es único en la lista y tiene esos toques rimbombantes que provocará sensaciones al visitante de la web. Si se sabe colocar, dará la nota.

Texto animado en SVG

Path SVG

Como si se estuviera hilando el camino hacia el dibujo de un texto brillantemente animado en SVG. De los más curiosos de la lista y que se coloca en su propio lugar para identificarse perfectamente.

Texto glitch

Glitch

Este texto en JavaScript, CSS y HTML podría ser perfectamente el toque especial de una agencia de publicidad para dar la nota en una palabra de una frase. El efecto es inspirador y provoca atención al visitante.

Texto en glitch

Glitch texto

Como si hubieran interferencias en la señal que dibuja el texto o lo anima, este efecto de texto es de un gran acabado. Singular sin ninguna duda y se presenta solo. Hecho en HTML (pug) y CSS (SCSS).

Texto glitch SCSS

Glitch ciencia

Otro texto glitch con interferencias que encontrará su sitio en un sitio web bien particular por la temática, seguramente relacionada con la ciencia ficción.

Texto hover 

Texto hover

En el momento que pongamos el puntero sobre el texto, éste se convertirá en una especie de punto de mira que nos permitirá moverlo a través de cada una de las letras para enfocarla, ya que el resto estarán desenfocadas. HTML, CSS y JavaScript para un efecto de texto bien singular.

Texto hover en perspectiva

Texto hover

Cuando pongamos el puntero del ratón encima de este texto, se moverá en una perspectiva bien curiosa que transmite el efecto de 3D.

Texto animado de destacado

Texto destacado

Con el puntero del ratón destacaremos el texto como si fuera a ser copiado o cortado. Un efecto de texto que cae desde arriba para ir cubriendo todas las palabras del párrafo. Sin JavaScript y con CSS.

Texto feliz

Feliz

Un efecto de texto feliz que palpitará hasta que pongamos el puntero del ratón encima de algunas de sus letras. El efecto provocado será el salto de algunas para ser llamado así. Sin JavaScript y con CSS.

Texto 3D en composición

Texto 3D

Otro efecto de texto en 3D para ir formando las distintas palabras desde todas las letras que aparecerán al unísono en un zoom de afuera hacia dentro. De gran resultado y muy visual y cinemático. Otro de los recomendados de la lista.

Puro texto CSS en sombra

Texto sombra

Este efecto de texto en puro CSS provocará una sombra de gran resultado y de gran estilo. Inconfundible y otro de los destacados de la lista. Sin animación, pero brillante.

Sombra bonita

Sombra bonita

Un efecto de sombra que realmente queda muy bien. Perfecto para landing pages o sitios web de guarderías. Puro CSS para destacarse por si mismo.

Segunda sombra

Segunda sombra SVG

Otro gran efecto de sombra en HTML y CSS que destaca por si solo. La sombra en líneas provoca una gran elegancia para sitios web de temática concreta.

Sombra Parallax

Sombra Parallax

Terminamos la lista con uno de los efectos más elegantes en parallax para la sombra que proyecta el texto. Pasamos el puntero del ratón y cuanto más a la derecha, la sombra se reflejará más distante.  Escrito por Ract, ES6 y Babel.

Tienes otra lista de efectos de texto aquí.


Un comentario, deja el tuyo

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

  1.   Tony dijo

    Hola, los efectos están geniales, pero no se como usarlos en mi web, están en scss y yo no se usar eso, solo se usar css, no se si tengo que convertirlo a css o tengo que instalar algo en mi servidor wordpress, o que es lo que tengo que hacer, gracias