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

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

Blog post

Comments

  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.
Loading...
Loading...