What if we recreated the dotCSS logo with only CSS and one div? Tim uses some tricks involving invisible text, box-shadow, and line breaks to achieve it.
You can have a look at the code on GitHub: https://github.com/pixelastic/dotcss-onediv
The big yellow dot is made of a
:before pseudo-element, with
The black dots of the background are all made through
box-shadow, changing the size, color and positioning of the original big yellow dot.
The “dot” and “CSS” text are part of the
content of the
:before, with a new line added between the words (using
white-space:pre) which lets me target each word individually using
:first-line or not.
The “CSS” word is actually a white
text-shadow of the original word displayed with “invisible ink” (aka.
color: transparent) to position it where needed