Here’s a fun page coming from secretGeek.net. You don’t normally think “fun” with brutalist minimalism but the CSS trickery that makes it work on this page is certainly that.
The HTML is literally displayed on the page as tags. So, in a sense, the HTML is both the page markup and the content. The design is so minimal (or “naked”) that it’s code leaks through! Very cool.
The page explains the trick, but I’ll paraphrase it here:
- Everything is a block-level element via
* { display:block; }
- …except for anchors, code, emphasis and strong, which remain inline with
a,code,em,strong {display:inline}
- Use
::before
and::after
to display the HTML tags as content (e.g.p::before { content: '<p>'}
)
The page ends with a nice snippet culled from Josh Li’s “58 bytes of css to look great nearly everywhere”:
html {
max-width: 70ch;
padding: 2ch;
margin: auto;
color: #333;
font-size: 1.2em;
}
Thanks Css-Tricks, I am very proud to be featured by you.
Note there is a significant typo in your explanation: a missing asterisk right before the “{ display:block }
…it’s quite significant as it is the main css-trick!
Oh yes! Thanks for that. :)
I see 959 B of CSS on his site.
Were you expecting more or less? The technique in the post is all about using CSS to get the quine effect.
This is cool!
I failed to happily scroll past the 28 “offensively repetitive lines”, decided to see if it could be done with fewer:
Quite pleased with 17 lines