Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS only 3D paper fold text effect

CSS only 3D paper fold text effect

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/

A Pen by Mandy Michael on CodePen.

License.

<div class="wrapper">
<h1 contenteditable data-heading="Folded">Folded</h1>
</div>
// JS for content editable trick from Chris Coyier
var h1 = document.querySelector("h1");
h1.addEventListener("input", function() {
this.setAttribute("data-heading", this.innerText);
});
$bg: #e6e2df;
html, body {
height: 100%;
}
body {
background: linear-gradient(45deg, $bg 80%,#c2c1bd 100%);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.wrapper {
width: 100%;
font-family: 'Source Code Pro', monospace;
margin: 0 auto;
height: 100%;
h1 {
text-transform: uppercase;
transform: translate(-50%, -50%) skew(10deg) rotate(-10deg);
font-size: 20vw;
top: 50%;
left: 50%;
margin: 0;
position: absolute;
text-rendering: optimizeLegibility;
font-weight: 900;
color: rgba(#ff9eb1, 0.5);
text-shadow: 1px 4px 6px $bg, 0 0 0 #66303a, 1px 4px 6px $bg;
white-space: nowrap;
&:before {
content: attr(data-heading);
position: absolute;
left: 0;
top: -4.8%;
overflow: hidden;
width: 100%;
height: 50%;
color: #fbf7f4;
transform: translate(1.6vw, 0) skew(-13deg) scale(1, 1.2);
z-index: 2;
text-shadow: 2px -1px 6px rgba(0,0,0,0.2);
}
&:after {
content: attr(data-heading);
position: absolute;
left: 0;
top: 0;
overflow: hidden;
width: 100%;
height: 100%;
z-index: 1;
color: #d3cfcc;
transform: translate(0vw, 0) skew(13deg) scale(1, 0.8);
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
text-shadow: 2px -1px 6px rgba(0,0,0,0.3);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment