Tag

, , , , , , ,

saya bukan seorang expert, tapi kalau ada teman yang bertanya akan suatu hal yang kebetulan saya lebih dulu tau (saya teringat ucapan guru saya di smp “ga ada orang pintar atau bodoh, tapi hanya ada orang yang lebih dulu tau sesuatu sebelum orang lain tau”) pasti saya akan sharing.

seperti yang pernah saya sampaikan sebagian besar saya belajar secara ortodidak. saya banyak cari referensi dari internet, kuncinya sedikit kemampuan berbahasa inggris dan google hacking. bahasa inggris penting karena referensi ga harus melulu dari indonesia, ebook, video tutorial dari youtube menggunakan bahasa ingggris sebagai bahasa pengantarnya. lalu kenapa harus belajar google hacking?? dengan teknik google hacking pencarian di mesin goole akan semakin efektif, misal kita ingin mencari tutorial cara membuat web, maka ketik “cara membuat web” filetype:pdf hasilnya link file pdf yang siap di download.

sudah hampir 4 minggu saya dipercaya menjadi pengajar di sebuah lembaga kursus di tangerang. disana saya sharing mengenai pembuatan web dasar. materi yang saya sampaikan diantaranya tentang dasar-dasar html dan css. pernah suatu hari seorang siswa bertanya cara membuat halaman transparan dengan background gambar tertentu. dari hasil googling ternyata cukup mudah hanya dengan menambahakn background: rgba(255,255,255,.25); pada style css div yang mau kita buat transparan

2012-05-15_224505

hasilnya:

2012-05-15_220304

2012-05-15_220244

pada contoh diatas saya buat div wrapper dengan padding 20px background:rgba(255,255,255, .25)
artinya div wrapper saya tambahakan keluar tiap sisi 20px(bingkai) dengan background 255,255,255(warna putih dalam hexa) dan opacity 0.25(range 1-0, semakin kecil maka semakin transparan). tapi perhatikan sudut setiap div berbentuk rounded

2012-05-15_225456

untuk membuat div rounded perhatikan script dibawah

2012-05-15_230129

bagaimana membuat rounded div bawah(footer) ganti top menjadi bottom, nah kalau kita mau buat sebuah div rounded semua sisinya ga perlu menulis top dan bottom cukup ketik border-radius:20px;

2012-05-15_230609

Iklan