CSS only 3D paper fold text effect

css-only-3d-paper-fold-text-effect.markdown

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.

index.html

<div class="wrapper">
	<h1 contenteditable data-heading="Folded">Folded</h1>
</div>

script.js

// JS for content editable trick from Chris Coyier

var h1 = document.querySelector("h1");

h1.addEventListener("input", function() {
  this.setAttribute("data-heading", this.innerText);
});

style.scss

$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);
		}
	}
}