>Mas Doyok!


> h1 a:hover {background-color:#888;color:#fff ! important;} div#emailbody table#itemcontentlist tr td div ul { list-style-type:square; padding-left:1em; } div#emailbody table#itemcontentlist tr td div blockquote { padding-left:6px; border-left: 6px solid #dadada; margin-left:1em; } div#emailbody table#itemcontentlist tr td div li { margin-bottom:1em; margin-left:1em; } table#itemcontentlist tr td a:link, table#itemcontentlist tr td a:visited, table#itemcontentlist tr td a:active, ul#summarylist li a { color:#000099; font-weight:bold; text-decoration:none; } img {border:none;}

Mas Doyok!


CSS Gradients – Membuat Background Linear Blogspot

Posted: 18 Apr 2011 07:25 PM PDT

Urusan background bisa jadi salah satu hal paling dasar untuk membuat blog terlihat menarik. Misalnya saja background dasar blog bagian body yang terletak paling belakang. Beberapa blogger memilih hanya bermain warna untuk loading ringan dan beberapa lagi memilih menggunakan gambar untuk loading yang tentu agak lebih barat. Background Linear Gradient bisa menjadi pilihan buat Anda yang ingin permak background blog Anda. Bukan terbatas untuk body saja, tapi Anda bisa terapkan di bagian yang Anda suka. Hari ini Anda akan bisa mendandani kepala blog Anda dengan topi kuning merah hijau dan memberi kaos kaki pelangi untuk kaki blog Anda.

CSS Gradient Atas ke Bawah


background:-moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
background:-webkit-linear-gradient(#2F2727, #1a82f7);
background:-o-linear-gradient(#2F2727, #1a82f7);

CSS Gradient Kiri ke Kanan

background:-moz-linear-gradient(left, #2F2727, #1a82f7);
background:-webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727));
background:-webkit-linear-gradient(left, #2F2727, #1a82f7);
background:-o-linear-gradient(left, #2F2727, #1a82f7);

CSS Gradient dengan Color Stop

Color Stop adalah warna pemberhenti effect gradient. Misalkan Anda membuat effect gradient dari hitam ke biru kemudian ke hitam lagi. Maka di tengah-tengah effect dari hitam ke biru, kemudian dari biru ke hitam, maka akan ada warna total biru sebagai pembatas effect.

background:-moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
background:-webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.75, #1a82f7), to(#2F2727));
background:-webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
background:-o-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);

CSS Gradient dengan Arbritary Stop Spesifik

Berbeda dengan color stop di atas yang warna pemberhentinya berada di tengah effect, dengan css ini Anda bisa tentukan posisi dimana warna pemberhenti akan ditempatkan.

background:-moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
background:-webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727));
background:-webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
background:-o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

CSS Radial Gradient, Gradasi ke Arah Tengah

background:-moz-radial-gradient(circle, #1a82f7, #2F2727);
background:-webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7),
background:-webkit-radial-gradient(circle, #1a82f7, #2F2727);

CSS Radial Gradient dengan Pengaturan Posisi

Jika pada point sebelumnya, warna gradasi akan tepat mengarah ke tengah membentuk seperti lingakaran penuh, maka dengan ini Anda bisa atur lokasinya agak ke kanan atas, kiri bawah atau tempat lain yang Anda suka dan otomatis bentuknya pun akan sedikit melonjong.

background:-moz-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
background:-webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#1a82f7), to(#2F2727));
background:-webkit-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);

Keterangan Tambahan
– Semua Effect CSS di atas support untuk Firefox 3.6 ke atas, Safari 4 ke atas, Chrome dan Opera 11.10 ke atas, kecuali effect radial gradient belum bisa diterima di opera.
– Untuk mengganti warna silahkan Anda ganti pada bagian yang diawali #, misal #000 adalah kode warna hitam dan #fff adalah kode warna putih. (Rujukan: daftar Kode Warna HTML)

Contoh Penerapan

Misalkan Anda ingin menerapakn effect CSS ini pada background blog Anda, maka silahkan Anda ikuti langkah berikut:
1. Login Blogger
2. Rancangan -> Edit HTML
3. Cari kode body {
4. Dan masukkan kode di atas seperti contoh berikut (saya gunakan contoh css gradient dengan warna pemberhenti pada posisi tertentu):

body {
background:-moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
background:-webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7),color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727));
background:-webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
background:-o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

}

5. Lakukan pengaturan seperlunya. #2F2727 dan #1a82f7 adalah warna untuk gradasi. 5% dan 0.05 adalah posisi warna pemberhenti dimunculkan (perbedaan prosentase dan koma karena perbedaan pembacaan browser). Left adalah posisi awal effect.
6. Simpan template Anda

Selanjutnya?

Silahkan Anda berkreasi sendiri dengan lebih banyak kombinasi warna, dan seperti saya katakan di awal.. hari ini Anda bisa mendandani kepala dan kaki blog Anda dengan topi dan kaus kaki berwarna-warni yang berbeda dari biasanya. Hanya dengan css yang super ringan… Silahkan mencoba…


CSS Code credit: http://css-tricks.com/examples/CSS3Gradient/ (lihat lebih jauh dengan demo)
Belajar CSS Dasar di mas doyok: http://www.masdoyok.co.cc/search/label/CSS


About lassun

The first child of three brothers who try to exist in the blogging world, to be able to search for identity

Posted on 19 April 2011, in Mas doyok. Bookmark the permalink. 2 Comments.

  1. >Mas, mas dapat Award dari saya silahkan di Ambil Di blog Amelia… http://fazarera-amelia.blogspot.com/

  2. >Mas, mas dapat Award dari saya silahkan di Ambil Di blog Amelia… http://fazarera-amelia.blogspot.com/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: