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.

View the slides

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

About the speaker

Tim Carry
Tim Carry
Developer Advocate at Algolia

About the conference

dotCSS 2016
The largest CSS conference in Europe
Next edition: dotCSS 2017 in Paris, France. Tickets available now!

Liked this talk? Share it!


comments powered by Disqus