dotCSS logo in only one div

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 border-radius:50% and position:absolute. 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 \A and 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