5 Langkah Mudah Membuat Sticky Notes Menggunakan HTML5 dan CSS3

31/01/2014    Faizal Ryza    1281     Website

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

sticky_notes_html5_css3_1

sticky_notes_html5_css3_2

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

sticky_notes_3

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

sticky_notes_4

sticky_notes_5

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

sticky_notes_6

sticky_notes_7

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

sticky_notes_9

sticky_notes_10

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

sticky_notes_11

sticky_notes_12

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

stickey_notes_13

stickey_notes_14

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

stickey_notes_15

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

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More