Tutorial HTML5 Membuat Text Jadi Indah

Tutorial HTML5 kali ini akan membahas tentang mebuat text jadi indah. Selama ini jika kita ingin membuat kalimat dengan huruf yang indah kita membuatnya dengan image editor seperti GIMP, Adobe Photoshop, Corell Draw dan lainnya. Kepikiran juga masak kalau mau buat tulisan indah dan berwarna harus pakai gambar, makan waktu membuatnya dan makan bandwidth.

Tenang dengan kehadiran HTML5 dan CSS3 masalah ini dapat kita atasi, tidak percaya coba deh ketikan kode berikut lalu simpan dengan nama textbeauty.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Text Indah</title>
<style>
#divneon {
	padding: 20px;
	background: #000;
}

.neon {
	text-align: center;
	margin: 20px auto;
	font-family: "Museo";
	font-size: 70px;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px
		#ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0
		150px #ff00de;
}

#divinset {
	padding: 20px;
	background: #474747;
}

.inset {
	text-align: center;
	margin: 20px auto;
	font-family: "League-Gothic", Courier;
	font-size: 70px;
	text-transform: uppercase;
	color: #222;
	text-shadow: 0px 2px 3px #666;
}

#divanaglyphic {
	padding: 10px;
	background: #fff;
}

.anaglyphic {
	text-align: center;
	margin: 20px auto;
	font-family: "League-Gothic", Courier;
	font-size: 70px;
	text-transform: uppercase;
	color: rgba(0, 168, 255, 0.5);
	text-shadow: 8px 8px 0 rgba(255, 0, 180, 0.5);
}

#divfire {
	padding: 20px;
	background: #000;
}

.fire {
	text-align: center;
	margin: 50px auto;
	font-family: "League-Gothic", Courier;
	font-size: 70px;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px
		#ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px
		70px #973716, 10px -90px 80px #451b0e;
}

#divboardgame {
	padding: 20px;
	background: #eee;
}

.boardgame {
	text-align: center;
	margin: 20px auto;
	font-family: "League-Gothic", Courier;
	font-size: 70px;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0
		#ffd217, 40px 40px 0 #5ac7ff;
}
</style>
</head>
<body>
	<div id="divneon">
		<h1 class="neon">NEON</h1>
	</div>
	<div id="divinset">
		<h1 class="inset">Inset</h1>
	</div>

	<div id="divanaglyphic">
		<h1 class="anaglyphic">Anaglyphic</h1>
	</div>

	<div id="divfire">
		<h1 class="fire">Fire</h1>
	</div>

	<div id="divboardgame">
		<h1 class="boardgame">Board Game</h1>
	</div>

</body>
</html>

Masih tidak percaya bahwa HTML dan CSS3 mampu melakukannya. Mari kita buktikan dengan membukanya file textbeauty.html pada browser.

Sekarang sudah percayakan. Kalau kita cermati kode diatas ini adalah kesaktian dari CSS3 “text-shadow”