css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
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

Pure css hipster-ish typographic dashed shadow

Comments

  1. Nice idea. But you should look better into your code. "pt" is not for displays.

  2. In case you're wondering where all the views are coming from (aside from being featured on the homepage): https://www.facebook.com/smashmag/posts/10152013824707490

  3. @qbahamutp It hit hacker news too! pretty cool. Great work @lbebber

  4. @qbahamutp Hey thanks man, I really was wondering, hahah @chriscoyier Thanks dude :D

  5. Animation on hover does not work in IE10. Requires a fix: .dashed-shadow:hover {} /* fix IE10 bug */ See http://stackoverflow.com/questions/16015371/why-does-ie10-require-the-presence-of-a-phover-rule-for-transitions-to-work for details

  6. @Luch Hey thanks! I didn't know about that, very useful!

  7. Love this. Is there any way to solve the resize issue that causes the lines to jump down because of the positioning? To see what I mean, resize down till the text touches the window edge, and the stripes will jump down a line before the solid text does.

  8. @jessewallace Hey, thanks for pointing it out! There is probably a way for fixing that, I'm going to try when I have more spare time! (or in case anyone wants to try and fix that, be my guest!)

  9. This is excellent. Took me a couple minutes of inspecting to wrap my head around it. Good work, @lbebber .

  10. @kbav Hahah thanks! It's a little bit tricky but kinda simple in the end!

  11. Say, do you know how to implement this on a background image? It's a lovely technique. :)

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

You must be logged in to comment.
Loading...
Loading...