cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

Renders best in Chrome.

This technique does work in Firefox, but text stroke is not supported.


  1. This is insane, nice work man :)

  2. Amazing work! Love it

  3. Agree with everyone. Amazing work!

  4. +1 for the animation names

  5. @keyframes ಠ_ಠ <--love this !

  6. simply beautifull, dude, congrats and thank you.

  7. This is so amazing! Can you tell me how or where i can learn that CSS style? Thanks for sharing

  8. That's really gorgeous!

    Is there a way to make it looks nice on Retina displays too?

    I tried it with Chrome and it was beautiful on standard display, but on a retina screen I got this: http://imgur.com/FqkAntx

  9. @jbilcke: Thanks for the comment! I'm thinking this is related to a strange rendering of text stroke when the font is very large. If you increased the size of this text to 250px or so, you'd probably see the same bug in Chrome on a standard display. That said, the way to fix is to either remove the text stroke or decrease the font size.

  10. real nice!

  11. Amazing!!!

  12. Very good sense of style

  13. Ah, it's beautiful but doesn't work on Apple Safari. I recommend you add Lea Verou's prefix_min (source: //cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js) into the head of your pen.

  14. "@keyframes ಠ_ಠ " - LOL

  15. How can I change the text?

  16. @KnifeBoss

    .layer:after {
    content: 'Pure\A    css!';

    In the content property. \A will give you a line break.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.