Tutorial Web Design

Mempercantik header dengan efek awan bergerak / berjalan cukup menarik untuk diterapkan di website yang sedang dikerjakan.
Membuatnya pun cukup mudah, hasilnya pun akan memberikan nilai plus untuk website kita, karena ini termasuk elemen yang bisa membuat orang betah berlama-lama di website anda sambil menikmati animasi tersebut (UX).

Photo by Kamil Porembiński

Untuk membuatnya kita sebenarnya hanya membutuhkan keterampilan menggunakan css, karena diperlukan sedikit pengetahuan tentang beberapa fungsi yang ada di css3, seperti box-shadow, animation, transform, border-radius.

Penerapannya bisa dimana saja, namun biasanya di header karena awan letaknya diatas, banyaknya awan bisa disesuaikan dengan kebutuhan website dan dibuat menyatu dengan website yang ada, bentuk awan pun bisa disesuaikan dengan kebutuhan

Start with HTML
Oke kita mulai saja dengan membuat sebuah file index.html dan tuliskan script html berikut ini.

	<div id="langit">
		<div class="awan no1"></div>
		<div class="awan no2"></div>
		<div class="awan no3"></div>
		<div class="awan no4"></div>
		<div class="awan no5"></div>
		<div class="bulan"></div>
		<h1>Tutorial Web Design Indonesia <small>&nbsp;&nbsp;<a href="http://www.tutorial-webdesign.com">http://www.tutorial-webdesign.com</a></small></h1>
	</div>
	<div class="main">
		<p>Tutorial-webdesign.com adalah Website untuk Web Designer & Web Developer Indonesia, Serta Graphic Designer Indonesia. </p>
		<p>Website ini berisi tutorial, tips & trik, artikel, inspirasi dan resources yang berkaitan dengan dunia desain.</p>
		<p>Semua orang bisa berpartisipasi menjadi penulis di sini</p>
		<br>
		<p><a href="http://www.tutorial-webdesign.com/membuat-animasi-awan-berjalan-dengan-css-css3">Back to tutorial</a></p>
	</div>

Disitu terlihat kalau kita membuat membuat ID #langit yang akan digunakan sebagai area mondar-mandir si awan, dan CLASS .main untuk konten website. ID #langit akan berisi 5 awan yang masing-masing diberi class dengan nomor nya.
Untuk bentuk layout bisa disesuaikan dengan keinginan dan kebutuhan anda.

Styling with CSS
Selanjutnya kita akan percantik dengan css agar semua bisa berfungsi sesuai yang diharapkan.

CSS untuk Langit

#langit{
	background: #000;
}