logo dotConferences

dotCSS logo in only one div

Tim Carry at dotCSS 2016

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.


To see the slides, you can click here

More details

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