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

Just a little experiment with pseudo elements. Semantic HTML is maintained. No boilerplate elements.

Blog post


  1. I like this. Cool!

  2. Thanks! Glad you like it!

  3. Looks like the lower quarter of the right side activates "Bottom > Top" instead of "Right > Left"

  4. That is very clever!! A+

  5. nice, though it does break if you attack it quickly from multiple sides

  6. that is great work. why you did use SCSS why not just CSS.

  7. Very awesome!

  8. Thanks for the kind words! @HeartDesign I am writing nearly all my CSS in SCSS now. Ther is no special reason.

  9. I was looking at doing this just from left to right, but this really is next level. Really clever CSS. Nice work Fabrice

  10. @hugo Thanks! @seanjacob Great finding! In my version you can style each "direction" and add content to it. The linked version just shows colors created with box-shadow.

  11. DOUBLE HEART! - this is awesome!

  12. neat! Would really love a blog post on this :)

  13. no idea how you did it, but it's great. Good job =)

  14. Very nicely done... I like this a lot.

  15. Outside the box thinking - I like :)

  16. this is not leave direction aware

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

You must be logged in to comment.