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

Liked this talk? Share it!

Comments

comments powered by Disqus