Fuente de borde CSS | Programar Plus

Cada letra en esta “fuente” de Davor Suljic es un solo div y está dibujada solo con border. Eso significa emplear algunos trucos como border-radius con sintaxis exótica como border-radius: 100% 100% 0 0 / 37.5% 37.5% 0 0; que redondea justo la parte superior de un elemento con cierta frialdad que funciona aquí. Además, usando pseudo-elementos. Me encantan todas las variaciones extravagantes con colores, sombras y estilos de borde, apoyándome en los límites de CSS.

Dibujar cosas con CSS ha fascinado a la gente durante mucho tiempo. Los íconos son una opción popular (famosos, los íconos GUI de CSS puro de Nicolas Gallagher de 2010), ya que podemos dibujar muchas formas con CSS sin siquiera tener que apoyarnos en el todopoderoso clip-path.

Pero como nos enseñó Lynn Fisher, un solo div es apenas una limitación.

Enlace directo →