Kejutan dari GOOGLE

Terimakasih google karena telah memberi kejutan di ulang tahun saya yang ke…… ahh sudah tidak perlu di sebut :P. Pada tanggal 10 April saya bertemu lagi dengan tanggal kelahiran saya. Saya sempat kaget ketika saya searching di google. And than tampilan logo google berubah jadi banyak cake lengkap dengan lilinnya. Saya penasaran kok tampilannya berubah? Memang siapa yang ulang tahun (fikir saya di dalam hati). Karena memang setiap ada hari-hari tertentu, pasti logo google berubah-ubah sesuai tema hari raya atau memperingati hari orang-orang yang berpengaruh di dunia. Ketika kita arahkan kursor pada logo, maka akan muncul deskripsinya.

Akhirnya saya dekatkan kursor dekat pada logo google, dannnn yang tampil adalah “Happy birthday Nela!” what??? Ternyata google secara pribadi mengdirect halaman tersebut khusus untuk saya. Hahahahaha… Jadi, intinya saya baru tahu kalo kita punya akun google, setiap ulang tahun kita akan di direct ke halaman pencarian khusus untuk kita. Wehehehehhee…. Nah, bagi teman-teman yang mempunyai akun google pasti akan mengalami hal yang sama seperti saya. Ini tampilan logo google yang khusus dipersembahkan untuk saya.

Read More

Membagi Kolom Menggunakan Multiple Kolom CSS3

Hallo sahabat… Apa kah sahabat tahu bahwa CSS3 memiliki fitur Multiple Kolom? Apa itu Multiple Kolom? Dan digunakan untuk apa? Pasti sahabat pernah membaca koran bukan? Coba perhatikan bagian arikelnya yang berisi tulisan-tulisan yang terbagi beberapa kolom. Nah inilah fungsi dari Multiple Kolom. Kita tidak perlu membuat sebuah table lagi untuk membagi paragraph menjadi beberapa kolom. Adapun parameter yang bisa kita gunakan saat membuat multiple kolom yaitu: 

1. column-count 

2. column-gap 

3. Column-rule 

Column-count berfungsi untuk menentukan jumlah kolom yang akan kita buat, column-gap berfungsi untuk memperlebar jarak antar kolom, dan column-rule berfungsi untuk menambahkan garis diantara kolom. Baiklah, untuk mempermudah sahabat dalam memahaminya, kita langsung praktikan saja. Silahkan sahabat buat sebuah div dengan class=”column” di file .html yang di dalamnya berisi tulisan. Misalnya seperti ini.

Setelah itu ketikkan kode CSS nya sebagai berikut.

Kemudian, silahkan sahabat jalankan file .html nya di browser, maka hasilnya akan seperti gambar di bawah ini.

Mudah sekali bukan? Selamat mencoba dan sampai jumpa di tutorial selanjutnya. :)

Read More

Perbedaan Visibility Hidden dengan Display None

Hallo sahabat Dumet, bagaimana kabar anda hari ini? Saya berharap sahabat pembaca disini sehat semua, aamiin :) Saya mau sedikit bercerita tentang pengalaman saya pada saat membuat menu dropdown. 

Pertama kali saya belajar menu dropdown, untuk menghilangkan menu sebelum di hover saya menggunakan property CSS yaitu “visibility:hidden”. Kemudian, saya melihat beberapa referensi untuk belajar menu dropdown yang mudah, ternyata ada perbedaan dalam penggunaan propertinya. Ternyata, selain menggunakan property“visibility:hidden” bisa juga menggunakan “display:none. 

Nah lalu letak perbedaannya dimana? Okay, sebelum membahasnya kita perlu tau terlebih dahulu apa itu visibility:hidden dan display:none. visibility:hidden adalah suatu property dalam CSS yang berfungsi untuk menghilangkan suatu objek tanpa menghilangkan ruang miliknya. display:none adalah suatu property dalam CSS yang berfungsi untuk menghilangkan suatu objek dengan menghilangkan ruang miliknya. 

Masih bingung?? Okay, saya akan menjelaskan dengan sebuah gambar seperti ini. 

Coba sahabat perhatikan gambar di atas. Ketika saya memberikan properti visibility:hidden pada text Profile, maka yang akan terjadi adalah seperti gambar di bawah ini. 

Beda halnya bila saya memberikan property display:none pada text Profile, maka yang akan terjadi adalah seperti gambar di bawah ini. 

Nah, sekarang sudah mudah dipahami kan? Jadi jangan bingung lagi apabila ada yang menggunakan property visibility:hidden atau display:none. 

Okay, sampai disini dulu dan sampai jumpa di tulisan selanjutnya. :) 

Read More

Merubah Icon List Menjadi Gambar Pada CSS

Hallo Sahabat Dumet, pada pertemuan kali ini saya akan membuat tutorial bagaimana cara mengganti icon list menjadi sebuah gambar sesuai seperti apa yang kita inginkan. Secara default, icon list di HTML kan bentuknya bulat seperti ini. 

Nah, kalo tampilannya seperti itu kan kurang menarik. kita bisa merubahnya menggunakan gambar yang kita mau. Caranya mudah sekali loh… kita cukup memberikan style “list-style-image” pada CSS. Mari kita praktikan sama-sama ya… Silahkan Sahabat ketikkan kode HTML di bawah ini. 

Kemudian berikan style CSS nya seperti ini.

Jika sudah, silahkan sahabat jalankan file .html nya di browser. Maka hasilnya akan seperti ini.

Oiyaaa… sebelumnya sahabat siapkan dahulu image untuk dijadikan gambar list nya dengan ukuran yang kecil saja. Missal 20pixel x 20pixel. Kemudian pada pada property list-style-image tinggal di brows filenya. 

Okay, sampai jumpa di tulisan selanjutnya yaa sahabat. :) 

Read More

Efek Jelly Bean Pada Text

Hallo sahabat Dumet yang selalu saya rindukan…:) Siapa diantara sahabat Dumet yang suka sama Jelly bean?? Agar-agar yang berbentuk kacang buncis, yang lucu, imut dan manis. Saya menemukan sebuah artikel yang menarik, yaitu membuat efek jelly bean pada text dengan Photoshop. Saya jadi terinspirasi ingin membuatnya juga, akhirnya saya coba-coba dan ternyata bisa. Yeyy :D Untuk itu, saya ingin sekali berbagi dengan sahabat, bagaimana caranya membuat text dengan efek jelly bean di Photoshop. 

Caranya mudah, walaupun lumayan panjang step-stepnya. Tapi engga apa-apa, sahabat harus tetap semangat yaaaa….. Silahkan perhatikan langkah-langkahnya di bawah ini. 

1. Buatlah sebuah file baru di Photoshop dengan ukuran 500px X 500px. Sahabat boleh menggunakan ukuran canvasnya sesuai yang sahabat inginkan. 

2. Kemudian, pilihlah Eclipse Tool. Beri ukuran 175px X 385px dan jangan lupa pilih shape pada pick tool mode. Pada pengaturan, pilih fixed size dan tandai from center nya. Maka tampilannya akan seperti ni. 

3. Pilih Direct Selection Tool, click disekitar eclipse. Maka akan muncul garis seperti dibawah ini.

4. Drag secara vertical seperti ini.

5. Pilih Edit -> Transform Point -> Scale. Kemudian drag kotak kecil yang berada ditengah ke sebelah kanan seperti ini. 

6. Aturlah bentuknya hingga menyerupai bentuk bean seperti ini.

7. Setelah selesai, silahkan pilih Edit -> Define Brush Preset. Maka akan muncul kotak dialog seperti di bawah ini. 

Kemudian pilih OK. 8. Bukalah sebuah gambar apa saja untuk dijadikan sebuah background nantinya. Misal saya gunakan gambar seperti ini. 

9. Ketikkan Text apa saja, missal saya menulis nama saya “Nela”. Font yang saya gunakan adalah “Insaniburger with cheese”, anda bisa mendownloadnya di eyang google. Berikan pengaturan text seperti gambar di bawah ini. 

10. Kemudian, pada text layer klik kanan pilih Creat Work Path.

11. Buat layer baru, beri nama stroke.

12. Pilih Brush Tool, kemudina bukalah panel brush dengan memilih Window ->Brush.

13. Berikan pengaturan sebagai berikut.

14. Silahkan sahabat ENTER, dan hapus layer text. Maka tampilannya text akan berubah menjadi seperti ini. 

15. Pada layer stroke, silahkan sahabat berikan layer style dengan pengaturan sebagai berikut. 

Untuk patternnya, silahkan anda download disini http://subtlepatterns.com/white-sand/

16. Jika sudah selesai, klik kanan pada layer stroke dan Copy Layer Style. 

17. Buatlah layer baru dan beri nama HIJAU. Kemudian klik kanan pada layer hijau, pilih Paste Layer Style. Ubahlah warna pada Color Overlay di layer style dengan warna hijau #6cc623. Kemudian berikan brush jelly di dalam text seperti ini. 

18. Lakukan hal yang sama seperti langkah no. 17, hanya rubah warna pada Color Overlay dengan warna yang sahabat suka. Dan tempatkan jelly hingga memenuhi bagian dalam text seperti ini.

Jadi deh Text Jelly nya, selamat mencoba dan sampai jumpa lagi di tutorial selanjutnya sahabat :)

Read More