- Aunque
text-stroke de CSS solo acepta un valor, se puede crear un efecto retro de texto con múltiples contornos superponiendo varias capas de la misma letra y asignando a cada una un grosor de contorno y color distintos
- Al tomar como referencia el efecto de texto de Graphic Japan : from woodblock and zen to manga and kawaii y ajustar distintos
text-stroke-width en varios elementos, se obtiene un resultado más cercano
- Combinando
text-stroke-width, text-stroke-color y z-index por capa, se puede controlar el orden y el color de los contornos, y la forma original de la letra se mantiene incluso cuando aumenta el grosor
- El resultado de renderizado varía según el navegador, y Firefox se ve más suave que Chrome y Safari; si se colocan varias letras en una sola línea, sus formas terminan fusionándose
- El resultado depende mucho de la fuente elegida y puede aparecer parpadeo con
font-size grandes, así que funciona bien para experimentos o generación de imágenes con css-doodle, pero no es adecuado para uso en producción
Implementación
-webkit-text-stroke-color: @pn(--c, #f4e1e8);
-webkit-text-stroke-width: $em(.08n+.02(1-(-1)^n));
- Al dar un color distinto a cada capa y superponerlas en el orden deseado, se puede controlar el color y el orden de los contornos
-webkit-text-stroke-color: @pn(#f4e1e8, #cc0d55);
-webkit-text-stroke-width: @i(*3px);
Renderizado y limitaciones
- Firefox ofrece un renderizado más suave que Chrome y Safari
- Si se colocan varias letras en una sola línea, sus formas terminan fusionándose
@content: '秋收冬藏';
- Para experimentar rápidamente con distintas fuentes, se añadió la función
@google-font para acelerar la carga de fuentes
font-family: @google-font(Matemasie);
@content: 'b';
font-family: @google-font(Tangerine);
@content: 'Love';
font-family: @google-font('Cherry Bomb One');
@content: '+';
- El rendimiento no es tan bueno como con los filtros de CSS y, en particular, puede aparecer parpadeo a medida que aumenta
font-size
- Los ejemplos adicionales se generaron con css-doodle, y el CodePen del primer ejemplo puede verse en https://codepen.io/yuanchuan/pen/ogzarGo
1 comentarios
Comentarios en Hacker News
Este artículo fue hecho por el autor de css-doodle usando css-doodle. Este web component permite poner directamente dentro del HTML una sintaxis variante de CSS como la que usa en el blog
Los ejemplos se ven así:
@grid: 15 / 90%;border-radius: 50%;background: hsl(@t(/20), 70%, 60%);scale: sin(@atan2(@dx, @dy) + @ts);No se necesita JavaScript aparte de cargar la definición del componente, y funciona en HTML normal, Markdown, frameworks, etc.
https://css-doodle.com/
Buena parte del CSS de esta página me parece código cifrado. En una época con tantos estilos estandarizados, mis aplausos para el autor por publicar algo nuevo y genial
Me da curiosidad por qué el motor de renderizado CSS de Firefox prefiere manejarlo de una forma más suave. La implementación se ve dramáticamente distinta, aunque también podría parecer así por ser un caso límite del renderizado
Firefox decidió expandir según la distancia en todos los puntos, lo cual es una de las respuestas razonables y probablemente la forma más general. Por eso los cusp puntiagudos se expanden como curvas
Otros navegadores decidieron mantener el cusp, lo cual también puede ser razonable y parece tener un costo de cálculo mucho menor. Pero cuando se expande más allá del tamaño de la característica, es decir, de la distancia entre nodos, aparecen muchos casos degenerados, así que hacia el cuarto anillo rojo ya se ve claramente incorrecto
box-shadowtambién es otro caso donde ocurre expansión. Ese es el cuarto valor de longitud, el spread distance. Si la esquina es un cusp, la esquina de la sombra también será un cusp; si es redondeada, la esquina de la sombra también será redondeada. Hay una ilustración útil en https://drafts.csswg.org/css-backgrounds/#shadow-shapeCon un pequeño truco, si le das
0.1px border-radius, la caja sigue viéndose cuadrada, pero la sombra expandida se vuelve curva. A veces sirve. Volviendo al tema del artículo original, si usas una fuente con una curva muy sutil en lugar de nodos cusp, Chromium/Safari también se acercarán más a FirefoxIntuitivamente esperaría que el contorno de una forma de estrella se acercara a un hexágono común, pero ningún navegador logra eso
Las esquinas redondeadas de la primera capa estarían todas a la misma distancia de la esquina más cercana del carácter original
Me gusta muchísimo el diseño de este blog. Es simple, claro y centrado en el contenido
La serie Daily Sketch y también
CSS Animation with offset-pathson igual de entretenidosGracias a este artículo conocí https://css-doodle.com por primera vez
Hace unos meses estaba haciendo algo parecido con la HTML Canvas API, pero no sabía que también se podían hacer trabajitos divertidos como este con CSS. Me encanta
Probé cambiar el fiddle al logo y los colores de Apple, y el primer anillo se come parte de la manzana. La parte superior queda recortada, y me pregunto si alguien sabe por qué
--c: #5EBD3E,#FFB900,#F78200,#E23838,#973999,#009CDF;@content: '';Me pregunto cuál es la mejor forma de hacer texto con doble contorno sin usar caracteres Unicode llamativos y manteniendo la presentación recomendada por la fuente
Ahora mismo estoy usando caracteres llamativos en my blog, pero eso perjudica los resultados de búsqueda. Estoy migrando el blog de HTML manual a 11ty, así que también quiero mejorarlo de paso
Además, me gustaría recibir opiniones sobre el diseño actual del blog
Está genial. Solo da pena que la diferencia de renderizado entre navegadores sea tan grande
Me pregunto si también lo probaron con sombras. Parece que las sombras también se podrían apilar
Lo primero que se me ocurrió fue poner un emoji en el content. Pero solo apareció un cuadro de carácter desconocido. Supongo que esperaba algo mágico