Recent Post

Sponsored

Labels

addressbook Membuat Gradient Effect dengan CSS

Diposting oleh dev | , , | 17 komentar »

CSS GradientPostingan ini adalah postingan pertama saya di domain baru www.devbook.net. Tampilan blog ini pun sedikit saya rubah untuk menyesuaikan dengan tema baru blog ini yang lebih bersifat personal blog. Design dan warna blog ini pun saya buat secara custom dan "suka-suka" untuk menyesuaikan dengan karakter pribadi saya. Untuk kedepannya insya allah blog ini akan lebih fokus membahas mengenai tutorial blog dan tutorial web design walaupun tentu saja di selingi dengan beberapa review untuk tetap menghidupi blog ini :D Mudah-mudahan saja kedepannya blog ini bisa lebih bermanfaat buat teman-teman blogger semua.

Pada postingan kali ini saya akan membahas bagaimana cara membuat efek gradasi dengan menggunakan CSS. Permainan warna tentu saja jadi kunci utama dalam mendesign tampilan sebuah web ataupun blog, buat saya sendiri CSS merupakan kode yang menurut saya sangat brilian, bayangkan saja dari 1 buah layout HTML kita dapat membuat beribu-ribu tampilan web yang berbeda-beda hanya dengan mengedit kode CSS-nya. Salah satu contohnya adalah situs social network friendster yang dulu sempat booming, dari 1 buah kode layout, member dapat merubah tampilan profile mereka hanya dengan memodifikasi kode CSS. Dari beribu-ribu kode CSS yang ada, ternyata ada beberapa fitur baru CSS yang masih jarang sekali digunakan, salah satunya adalah fungsi CSS gradient yang akan saya terangkan dibawah ini.

Untuk membuat efek gradasi kebanyakan orang menggunakan background image yang telah mereka buat di photoshop atau software-software image editing lainnya. Kekurangannya tentu saja akan memperlambat loading web atau blog kita. Sebenarnya CSS telah menambahkan fitur gradient yang dapat mempermudah kita dalam membuat effect gradient, hanya saja fitur ini baru disupport oleh browser-browser versi baru, untuk mozilla sendiri fitur CSS gradient baru bisa digunakan di versi 3.6 ke atas. Dibawah ini kode yang bisa teman-teman gunakan untuk membuat efek gradasi dengan CSS.
background: #222;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#222222');
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#222));
background: -moz-linear-gradient(top, #000, #222);


Keterangan:
background: #222;Berfungsi menampilkan warna background solid bila browser tidak mendukung.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#222222');Berfungsi untuk internet explorer. startColorstr adalah warna awal gradasi dan endColorstr adalah warna akhir gradasi.

background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#222));Berfungsi untuk browser webkit seperti safari, chrome, dll. linear adalah tipe gradasi, dapat dirubah menjadi radial, angle, dll. from adalah warna awal gradasi dan to adalah warna akhir gradasi.

background: -moz-linear-gradient(top, #000, #222);Berfungsi untuk browser keluaran mozilla. linear adalah tipe gradasi, dapat dirubah menjadi radial, angle, dll. Warna awal gradasi ditulis pertama (#000) dan warna akhir gradasi ditulis kedua (#222) dipisahkan dengan koma (,)

Mudah-mudahan bermanfaaf buat teman-teman blogger semua, selamat mencoba dan selamat berkreasi :)

Related Posts by Categories

Silahkan klik di sini untuk membaca melalui feed reader anda. Atau masukkan alamat email anda di kolom dibawah ini untuk berlangganan artikel DevBook.net langsung ke alamat email anda.

feed

Page copy protected against web site content infringement by Copyscape

Ada 17komentar ke “Membuat Gradient Effect dengan CSS”
Anonymous said...
 date:

goodddd langsung dicobain mas.

abecho said...
 date:

warnanya jadi lebih bagus ya mas...

dev said...
 date:

@anonymous: silahkan mas..

@abecho: terima kasih mas :)

jamesaldo31 blo9 said...
 date:

mas..banner nya dah tak pasang...
banner balik ya...
oiya...tamplate yang mas buat "simple seo" saya pakai diblog saya...bagus banget tamplatenya...
thxz ya mas...

yudi said...
 date:

mas bisa gak ini di terapkan pada font yang kita pake di web. saya bikin design utk tulisan (font) di menu dengan menggunakan effect shadow dan gradient bisa gak ini diterapkan? atau caranya berbeda? tolong penjelasannya

dev said...
 date:

@yudi: kalo effect shadow bisa diterapkan di font dengan menggunakan text-shadow, lengkapnya bisa dibaca disini:
http://www.devbook.net/2010/06/css-shadow-membuat-bayangan-dengan-css.html

kalo untuk gradient kayanya belum bisa karena fungsi CSS gradient berjalan untuk background sebuah object. Tapi kalo mas yudi mau bikin text gradient dengan CSS mungkin bisa menggunakan background pada text dengan menggunakan span. mungkin kedepannya akan saya bahas lebih lengkap :)

adam said...
 date:

Wah... Baru aja mau nyari-nyari tutorial tentang fill warna pake css... Rupanya gak sengaja ketemu disini... Terima kasih banyak...

thiaghu said...
 date:

Really a great tutorial for gradient effect. am sure that am going to implement in my blog. Thanks for your post.

Zona Oke said...
 date:

Thanks tutornya gan...

Anonymous said...
 date:

makasih sangat membantu....lanjutkan...

Agus Pri said...
 date:

Waduh, saya gagal terus mas. kenapa ya? atw syntaxnya ada yg perlu dirubah y mas...? mohon bimbingannya, nuhun

Mohammad Roqib said...
 date:

bagus tutorialnya gan...
Oiya, buat yang IE kok gak kerja yea, pdhal udh pake IE9?
mohon pencerahannya gan....

An Nahal said...
 date:

mantaph om..
sy olah TKP dulu
terimakasih om
salam kenal

http://super-bee.blogspot.com/

Yogie said...
 date:

thanks buat sharingnya... keren bgt begitu di coba langsung ok... buat pengunjung bantuin dunk buat naikin trafik kunjungi di MyPassword Store

Yovi said...
 date:

Haha. Udah .com tapi favicon masih aja punya Blogger. Sip! Hehehe.

Sobat Kriteria said...
 date:

Gan, sy sdh coba step by stepnya diblog ente.. tp msh belum bisa, knp ya Gan? Thx

dev said...
 date:

@sobat kriteria: sudah coba di upgrade browsernya?siapa tau browsernya yg ga support :)


leave comment
back to top
comment notes

Post a Comment

devbook.net