5 Langkah Mudah Membuat Sticky Notes Menggunakan HTML5 dan CSS3

Hallo Dumenity, pasti sudah banyak yang tahu ya fungsi Sticky Notes pada Windows untuk apa?, ya fungsi Sticky Notes yang terdapat pada Windows berfungsi untuk membuat catatan Pekerjaan, No Telepon, Email dll. Nah Sticky Notes juga kita bisa buat pada HTML5 dan CSS3, fungsinya sama seperti Sticky Notes pada Windows. Caranya sangat mudah, mari kita bahas dan membuatnya bersama - sama.

1. Kita akan menggunakan Software Adobe Dreamweaver CS6
2. Kita buat File HTML5 baru dengan mengklik menu File > New, kita pilih Page Type HTML dan DocType HTML5 jika sudah klik Create

3. Step 1 Kita buat Tag HTML seperti ini gambar di bawah :

4. Step 1 lalu kita buat CSS seperti gambar di bawah ini :

5. Step 2 lalu kita buat CSS seperti gambar di bawah ini :

6. Step 3 lalu kita buat CSS seperti gambar di bawah ini :

7. Step 4 lalu kita buat CSS seperti gambar di bawah ini :

8. Step 5 lalu kita buat CSS seperti gambar di bawah ini :

9. Jika Sudah kita preview ke Browser kita, lihat hasilnya Sticky Notes versi HTML5 dan CSS3 sudah jadi.

Silahkan Mencoba. Berikut Link Source 5 Langkah Membuat Sticky Notes Menggunakan HTML5 dan CSS3 http://jsfiddle.net/Uk2HD/