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



DevForum chia sẻ anh em code làm Chữ 3D kiểu bóng đen lưới với HTML CSS và Javascript

1. HTML

							

DevForum

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



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.