About Me

Agus Haryanto,
Android Trainner,
GoogleMaps (JavaScript) Trainer
JQuery and JQuery Mobile Trainer
Java, Java Script and PHP Trainer
Freelance Developer Android
Freelance Developer Blackberry
Freelance Developer Web (GIS Googlemaps)
Freelance Developer SMS Gateway

jika ingin contact saya bisa emali ke agus.superwriter@gmail.com

ym: agus_h23

Pin BB : 2AD38B33

Facebook : Agus Haryanto


Article

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

Nantikan seri belajar HTML5 selanjutnya.

Semoga Bermanfaat

Salam Hangat

Agus Haryanto

Sumber : http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects

Share

5 comments to Tutorial HTML5 Membuat Text Jadi Indah

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam protection by WP Captcha-Free