Tutoriales para crear textos con efecto CSS3
La tipografía web ahora es más elegante y maleable que nunca. Las nuevas propiedades CSS3 permiten dar efectos verdaderamente únicos que en el pasado habrían requerido imágenes y JavaScript personalizado. Po eso les traemos estas 25 textos con efecto CSS3 para tu inspiración y aplicación.
Cada uno de los siguientes fragmentos de código es completamente gratuito para usar y personalizar para sus propios proyectos. Aunque algunos de estos efectos se procesan en los navegadores modernos, encontrará otros efectos que se ejecutan muy bien e incluso pueden tener alternativas de respaldo para el soporte heredado.
Si eres un fanático del diseño tipográfico o simplemente un desarrollador web curioso, entonces seguramente disfrutarás de estos fragmentos de manipulación de texto personalizados.
Los mejores textos con efecto CSS3
Nuevo encabezado de Johan van Tongeren
Un encabezado completo diseñado con Open Sans y Squada One , definitivamente un toque único. Este encabezado fue diseñado para el nuevo sitio web de Johan van Tongeren. Las letras del logotipo presentan una sombra rayada y los enlaces de navegación se expanden en tamaño a través de efectos de desplazamiento animados.
Texto de desplazamiento de Star Wars por Scott Bram
George Lucas ha desatado una fuerza increíble en el mundo del cine con ondas que conducen a muchos otros campos creativos. Este fragmento de código replica el texto de introducción de Star Wars a medida que se desplaza hacia arriba a una inclinación del espectador.
Tipo de apertura por Bernardo
Quizás el aspecto más genial de este efecto de recorte de papel es que se creó con menos de 100 líneas de CSS. Cada letra usa transformaciones CSS3 para sesgar la letra mientras gira en 3-D a lo largo de los ejes X / Y / Z.
Elegante Blockquote de Stephen Greig
Aquí hay un fragmento interesante que se centra en las técnicas que se encuentran en el diseño gráfico tradicional. Las pseudo clases se usan para manipular el texto de la cita en bloque y agregar estilos CSS a letras particulares en la cita. Estilo muy genial para arreglar una página web estática.
Tipografía 3D CSS por Noah Blon
Con las transformaciones CSS3 podemos manipular casi cualquier texto o elemento de página con facilidad. El soporte del navegador está aumentando y las transformaciones han crecido para permitir animaciones completas como este bloque de texto giratorio 3D.
El Leonardo Por Blake Johnson
Un concepto de logotipo bastante interesante para la manipulación de fuentes tipográficas puras. Las letras externas se cortan a 45 ° utilizando bordes CSS. En producción, esto puede funcionar mejor como PNG, pero para superar los límites de CSS es realmente una hazaña impresionante de contemplar.
Tipografía de los 80 por David Parker
Los años 80 todavía están vivos y bien en este fragmento de CodePen de David Parker. Los 5 efectos de texto provienen directamente del diseño gráfico de la década de 1980 que se basa únicamente en CSS3 puro.
Divisor de llaves rizadas Por Lauren Herda
Las reglas horizontales han estado separadas del HTML durante años, pero CSS3 permite efectos más fantasiosos para incorporar elementos de recursos humanos a la era moderna del diseño de UI. Por ejemplo, este fragmento de recursos humanos está diseñado en una gran llave rizada usando propiedades de fondo CSS3 personalizadas.
Explorando el tipo por robot
Solo unos pocos efectos de sombra interesantes vinculados a letras grandes. Las divisiones de borde se agregan junto a las letras y se colocan exactamente al 50% de altura.
Texto noqueado de Crisman Noble
Este es un estilo CSS ordenado que obliga a mostrar una imagen de fondo a través de letras en la página. Debo señalar que este efecto solo funcionará en los navegadores Webkit, así que úselo con moderación o en estudios de casos.
Sombra con rayas diagonales Por Lucas Bebber
Aquí hay otra sombra de texto CSS dinámico que utiliza guiones diagonales para el patrón. Están animados a fluctuar usando CSS3 e incluso pueden aplicarse a los bordes ubicados en la parte superior e inferior del texto.
Logotipo CSS3 Por Nate Scott
Alguna tipografía de logotipo real simple con bordes de plantilla. El texto tiene el estilo de imitar una junta de barbacoa con letras grandes y sombras paralelas similares.
Currículum creativo de Sara Soueidan
Este currículum tipográfico único en su tipo se basa en principios de diseño gráfico más tradicionales. El color de la fuente varía según la ubicación para designar áreas de la página para diferentes habilidades. Es una idea genial que podría usarse en un proyecto real con algunos ajustes.
4 efectos de sombra de texto por Jorge Epuñan
Hemos visto algunas sombras de texto en otros lápices, pero este fragmento ofrece 4 estilos CSS únicos para crear sombras de texto. Encontrará una sombra larga «plana», sombra 3D, sombra insertada y sombra de línea delgada retro.
Geek Badge de Rachel Nabors
Al principio, esto puede no parecer mucho, pero en realidad es una cinta compuesta por nada más que HTML / CSS. El texto sesgado y el contenedor girado se crearon con propiedades dinámicas CSS3.
SCSS subrayado apretado por el Sr. Pirrera
Los subrayados típicos de CSS abarcarán la totalidad de una palabra y mantendrán la ubicación según la altura de la línea. Este fragmento genera una imagen de fondo delgada que queda detrás de las letras, creando así un subrayado que no corta los descendientes.
Sombra de texto enmascarado de Daniel Riemer
Aquí hay una sombra CSS interesante que se basa en el enmascaramiento para crear el efecto. Las máscaras CSS no son totalmente compatibles con la mayoría de los navegadores, pero pueden ser muy potentes cuando se usan correctamente.
Texto llenado de agua por xiaodong
Cuando encontré este bolígrafo por primera vez, pensé que tenía que estar usando JavaScript. Lo creas o no, este efecto de agua animado se crea exclusivamente con CSS al reemplazar las imágenes de fondo a través de fotogramas clave de animación CSS.
La correcta pronunciación de Daniel Burrows
Aquí tenemos un tipo de letra genial con una interesante sombra paralela. Pero mi parte favorita de este fragmento es el símbolo de sección girada (§) utilizado como divisor estético. Simplemente muestra que realmente puedes construir cualquier cosa con un poco de ingenio creativo.
Tipografía sesgada por Kurt Emch
El texto del cómic suele ser audaz, largo y sesgado en alguna dirección. Este fragmento de código utiliza la fuente Bangers en combinación con CSS3 para crear un efecto de texto de estilo superhéroe proporcionalmente sesgado.
Insignia de texto circular de Jack Armley
Toda esta página fue creada sin imágenes ni JavaScript. El texto redondeado, la insignia circular y los BG texturizados se crearon con CSS3 puro.
Sombra de texto punteado por Travis Benton
Otra sombra de texto única que usa puntos como los que encontraría en una impresora matricial. El patrón de puntos se genera a través del código base64, por lo que no hay imágenes externas en absoluto.
Efecto 3D coloreado por Brian Guerrero
Las gafas 3D pueden hacer que las imágenes digitales se vean extrañas y coloridas en 3D. Bueno, este efecto CSS recrea el aspecto 3D, sin gafas.
Las sombras se combinan en una propiedad, por lo que tenemos 2 sombras diferentes renderizadas en el mismo texto.
Perspectiva del texto por Nathaniel Watson
Aquí hay otro efecto 3D interesante que depende de transformaciones CSS3 puras. La propiedad de transformación de perspectiva es poderosa cuando se usa en las condiciones adecuadas.
Tipo 3D multicolor de Carlos Centeno
Un fragmento interesante y muy creativo: letras mayúsculas cuadradas alineadas entre sí con sombras de texto de colores únicos. No tengo idea de cuánto tiempo tardó en escribir el código para este efecto de texto, pero se ve magnífico.
Clausura
Algunos de estos textos con efecto CSS3 pueden resultar útiles en proyectos futuros, mientras que otros nunca pueden ser replicables en un entorno profesional. CodePen es solo un lugar divertido para que los desarrolladores exploren idiomas y vean lo que es posible en el mundo del desarrollo frontend. Siéntase libre de jugar con cualquiera de estos fragmentos de código y ver qué más puede crear.
