Esta página es un html brutalista y verdaderamente desnudo.

Aquí hay una página divertida proveniente de secretGeek.net. Normalmente no piensas que el minimalismo brutalista es “divertido”, pero el truco de CSS que hace que funcionar en esta página es ciertamente eso.

El HTML se muestra literalmente en la página como etiquetas. Entonces, en cierto sentido, el HTML es tanto el marcado de la página como el contenido. ¡El diseño es tan minimalista (o “desnudo”) que su código se filtra! Muy genial.

La página explica el truco, pero lo parafraseará aquí:

  • Todo es un elemento a nivel de bloque a través de* { display:block; }
  • …excepto anclajes, código, énfasis y fuerte, que permanecen en línea cona,code,em,strong {display:inline}
  • Utilice ::beforey ::afterpara mostrar las etiquetas HTML como contenido (p. ej p::before { content: 'p'}.)

La página termina con un bonito fragmento extraído de “58 bytes de CSS para lucir genial en casi todas partes” de Josh Li:

html {  max-width: 70ch;  padding: 2ch;  margin: auto;  color: #333;  font-size: 1.2em;}

Deja un comentario

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

Subir