Text 3D kiểu bóng đen lưới với HTML CSS và Javascript

Chia sẻ

---

1. HTML

<h1 data-heading="DevForum">
		<span contenteditable data-heading="DevForum">DevForum</span>
	</h1>

2. CSS

html,
		body {
			background: #e4e2f2;
			width: 100%;
			height: 100%;
		}

		h1 {
			font-family: "Rig Bold Face", sans-serif;
			text-transform: uppercase;
			font-size: 12vw;
			text-align: center;
			font-weight: normal;
			margin: 0;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			position: absolute;
			color: #91d4ff;
		}
		h1:before, h1:after,
		h1 span:before,
		h1 span:after {
			content: attr(data-heading);
			position: absolute;
			overflow: hidden;
			left: 0;
			top: 0;
			width: 100%;
			z-index: 5;
			font-weight: normal;
			text-shadow: none;
		}
		h1:before {
			color: #fff;
			font-family: "Rig Bold Inline", sans-serif;
		}
		h1:after {
			font-family: "Rig Bold Coarse", sans-serif;
			color: #040351;
		}

		span::before {
			font-family: "Rig Bold Shadow", sans-serif;
			color: #cbc7e3;
			z-index: -1;
		}
		span::after {
			font-family: "Rig Bold Extrude", sans-serif;
			color: #4d8bea;
			z-index: -1;
		}

		@font-face {
			font-family: "Rig Bold Coarse";
			src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Rig-BoldCoarse.otf");
		}
		@font-face {
			font-family: "Rig Bold Extrude";
			src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Rig-BoldExtrude.otf");
		}
		@font-face {
			font-family: "Rig Bold Shadow";
			src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Rig-BoldShadow.otf");
		}
		@font-face {
			font-family: "Rig Bold Face";
			src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Rig-BoldFace.otf");
		}
		@font-face {
			font-family: "Rig Bold Inline";
			src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Rig-BoldInline.otf");
		}

3. JAVASCRIPT

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

		span.addEventListener("input", function () {
			var text = this.innerText;
			this.setAttribute("data-heading", text);
			this.parentElement.setAttribute("data-heading", text);
		});

---