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



DevForum chia sẻ anh em code làm Chữ 3D kiểu Giấy cắt với HTML CSS và Javascript

1. HTML

							

DevForum

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



Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.