Text 3D kiểu Paper với HTML CSS và Javascript

Chia sẻ

---

1. HTML

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

2. CSS

html, body {
			height: 100%;
		}

		body {
			background: linear-gradient(45deg, #e6e2df 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%;
		}
		.wrapper h1 {
			text-transform: uppercase;
			-webkit-transform: translate(-50%, -50%) skew(10deg) rotate(-10deg);
			transform: translate(-50%, -50%) skew(10deg) rotate(-10deg);
			font-size: 16vw;
			top: 50%;
			left: 50%;
			margin: 0;
			position: absolute;
			text-rendering: optimizeLegibility;
			font-weight: 700;
			color: rgba(255, 158, 177, 0.5);
			text-shadow: 1px 4px 6px #e6e2df, 0 0 0 #66303a, 1px 4px 6px #e6e2df;
			white-space: nowrap;
		}
		.wrapper h1:before {
			content: attr(data-heading);
			position: absolute;
			left: 0;
			top: -4.8%;
			overflow: hidden;
			width: 100%;
			height: 50%;
			color: #fbf7f4;
			-webkit-transform: translate(1.6vw, 0) skew(-13deg) scale(1, 1.2);
			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);
		}
		.wrapper h1:after {
			content: attr(data-heading);
			position: absolute;
			left: 0;
			top: 0;
			overflow: hidden;
			width: 100%;
			height: 100%;
			z-index: 1;
			color: #d3cfcc;
			-webkit-transform: translate(0vw, 0) skew(13deg) scale(1, 0.8);
			transform: translate(0vw, 0) skew(13deg) scale(1, 0.8);
			-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
			clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
			text-shadow: 2px -1px 6px rgba(0, 0, 0, 0.3);
		}

3. JAVASCRIPT

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

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

---