cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
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.

  17. Hello! Noah,

    Nice & Cool....!
    Th@nk you very much, for sharing....

    All the best,

  18. As a huuuuuge fan of typography, that is just so completely cool!!!!! I'm forking excited!

  19. THX Noah. It's amazing work! But I have one problem. In Firefox and Chrome, the animation is displayed correctly but in IE I have problems. The movement is not about 150 degrees but only 60 and the text is not 3D, only 2D. Please help me what can I do that IE display the animation correctly? Thank you and best regards.

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

You must be logged in to comment.