123
user profile image

Attempt at a paper folding effect with text so that it looks like it's coming off the page.

Not supported in IE, or Firefox. This is using experimental clip-path property.

This pen was made using clip-path specifically for a demo I was making to provide some creative ways you can use clip-path, and pseudo elements with text effects. Inspired by a graphic I found on Design Tuts (https://design.tutsplus.com/tutorials/3d-paper-text-effect--cms-27962)

You can see my other experiments here: http://codepen.io/collection/DamKJW/

This Pen is a fork, but the parent Pen is now private.

Comments

  1. This is sweet Mandy!

  2. Hey Mandy, You can do this without using clip-path... and use Flexbox for positioning the pseudo:after element. This way it is supported in Firefox :)

    Adjustments to the :after { //remove clip-path display: flex; justify-content: flex-end; flex-direction: column; height: 50%; //position the text accordingly: left: 1.4%; top:45%; }

  3. Nice. I also thought it could be done without clip-path. I use line-height to hack it. http://codepen.io/madshensel/pen/aJOrPO?editors=1100

  4. @GregJacobs82 why did you choose to use flex-direction? It possible to do with just align-items? &: after { ... display: flex; align-items: flex-end; height: 50%; left: 1.4%; top:45%; }

  5. @madshensel @GregJacobs82 The flexbox was from another Codepen that I made that i forked this from, I don't really need it, I just didn't expect so many people to look at it so I never cleaned it up. I specifically built this to use clip-path for a presentation I was making. I'm sure there are plenty of ways this effect can be achieved, I look forward to seeing everyone else's ideas.

    :)

  6. @mandymichael I just read your description. Now I need to try clip-path out ;)

  7. This is so funny, I literally have this tutorial open on my next tab and I saw this in the newsletter. Good job making it so well in CSS! https://design.tutsplus.com/tutorials/3d-paper-text-effect--cms-27962

  8. This is great! Love your work!

  9. This is like black magic ! its amazing.

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

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