Selasa, Maret 03, 2015

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. :)



Categories: ,

Senin, Maret 02, 2015

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. :) 



Categories: ,

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. :) 



Categories: ,

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 :)


Categories: ,

Membuat Tombol Search Dengan Warna Feminin


Hi... Sahabat, bagaimana kabar sahabat hari ini? Semoga selalu baik ya.... Hari ini bikin tutorial apa lagi yaaa??? Hehehe... Sahabat pasti sudah pada jago bikin tombol search, iya kan?? Iya dong... Cara sederhananya sangat mudah sekali, sahabat bisa langsung mengetikkan kode HTML seperti dibawah ini.
 
Maka hasilnya akan tampil berupa text box dan tombol submit. Tapi, apalah artinya HTML jika tanpa CSS. Bagaikan kepompong yang tiada berubah menjadi kupu-kupu. Cieellaahhh pribahasanya cakep bener yak? :D Nah, agar kode HTML nya bisa berubah cantik seperti kupu-kupu, tentunya kita harus menyulap tampilannya dengan memberikan style CSS. Jadi, mari kita sulap tombol search menjadi tampilan yang lebih indah. Caranya adalah, silahkan sahabat ketikkan kode HTML sebagai berikut. 


Kemudian, ketikkan kode CSS nya sebagai berikut.






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


Wowww.. feminine sekali bukan? :D Untuk backgroundnya silahkan sahabat bisa menggunakan gambar yang sahabat sukai. Sampai disini dulu pertemuan kita, dan sampai jumpa di tulisan berikutnya. Keep loving me :)


Categories: ,

Membuat Effek Box Shadow Pada CSS3


Hallo sahabat, senang rasanya tiap hari bisa menulis sesuatu yang semoga bisa menjadi inspirasi sahabat dan tentunya bermanfaat. Pada tulisan kali ini, saya akan membuat effek box shadow dengan CSS3. Kita mulai saja ya, silahkan sahabat ketikkan kode HTML nya


sebagai berikut. Kemudian berikan style CSS nya sebagai berikut.



Untuk memberikan efek shadownya, silahkan ketikkan pada file CSS nya sebagai berikut.


Setelah selesai, silahkan jalankan file .html nya di browser kesayangan anda. Maka hasilnya akan seperti ini.

Bagaimana? Mudah bukan? Silahkan sahabat berkreasi lagi dengan merubah warna atau posisi shadownya. Sampai jumpa di tulisan berikutnya :)


Categories: ,

luvne.com resepkuekeringku.com desainrumahnya.com yayasanbabysitterku.com

Copyright © Nela Mulsifa | Design by Anders Noren

Up ↑