Efectos de texto con CSS (y un pequeño truco satisfactorio) | Programar Plus

0

Mandy Michael ha estado creando algunos efectos de texto increíbles con solo el poder de CSS. Ella usa todos los trucos del libro: degradados, transformaciones, pseudo elementos, sombras y trazados de recorte, por nombrar algunos. También son texto web real. Por lo general, fuentes personalizadas, pero no imágenes, lienzo o SVG ni nada por el estilo.

Eche un vistazo a este hermoso efecto:

Vea el efecto de texto plegado en papel 3D de Pen CSS solo de Mandy Michael (@mandymichael) en CodePen.

El hecho de que sea texto real lo hace accesible, que se puede buscar y, por supuesto, que se puede seleccionar:

Las demostraciones son un lugar increíble para usar contenteditable atributo, que convierte cualquier elemento de texto en una especie de textarea o input, en ese entonces cualquiera puede hacer clic derecho en él y cambiar el texto. 

<h1 contenteditable>Cool Title</h1>

Pero debido a que muchas de las demostraciones de Mandy usan pseudo elementos con texto que debe coincidir con el texto del elemento en sí, el texto puede desincronizarse:

¡Nunca temas! Son solo unas pocas líneas de JavaScript para mantener esos fragmentos de texto sincronizados:

var h1 = document.querySelector("h1");

h1.addEventListener("input", function() {
  this.setAttribute("data-heading", this.innerText);
});

El evento de entrada es muy útil, ya que cubre cualquier cambio en el valor de un elemento, incluso contenteditable elementos. Tiene un soporte de navegador decente, solo que no tiene IE (Edge está bien). Si realmente necesita esto para IE, aún puede hacerlo combinando eventos como keyup, paste, y blur y esas cosas. Pero probablemente no lo necesite para una pequeña cosa como esta.

Ahora estamos todos bien:

Pero antes de irnos, disfrutemos de más creaciones de Mandy:

Vea las líneas de lápiz y los efectos de texto css en capas de Mandy Michael (@mandymichael) en CodePen.

Vea el efecto de texto Pen Stripy Rainbow de Mandy Michael (@mandymichael) en CodePen.

Vea el Efecto de texto 3D multicolor de elemento único de pluma de Mandy Michael (@mandymichael) en CodePen.

Vea el texto fracturado de Pen Split de Mandy Michael (@mandymichael) en CodePen.

(Visited 5 times, 1 visits today)