Whhhheeeewww.... Alhamdulillah kembali saya ucapkan kepada Allah SWT. Yang telah memberikan kreatifitas yang tiada ternilai pada kita sahabat Blogger sekalian. Sehingga kita masih tetap bisa berkarya sekecil apapun itu.

Baik, pemirsa Blogger sekalian dimanapun anda berada. Pada postingan saya kali ini, saya akan share dengan sahabat Blogger yang ganteng dan cantik-cantik ini (Hehehehehe...) yang pada kesempatan ini, saya mencoba membagi ilmu berupa tekhnik mempercantik, memoles, mendandani, memake-up, menghias tampilan background kita. Aduh... Capek nyebutinnya broo... Kebanyakan... Fuih... Maksudnya dam? Maksudnya itu, gini lho, background pada border, kolom, dan lain sebagainya itu kita hias menggunakan tekhnik gradient yang sering kita pakai pada software-software desain grafis komputer pada umumnya. Wooooww!! Gimana tuh caranya? Mau... Mau... Mau... Mau...

Sebelum saya ajak anda untuk mengulas lebih dalam, ada baiknya anda harus melihat dulu contohnya seperti apa sih maksudnya si adam ini? Cokodot frenn...

Pada Header Menu diatas, coba arahkan mouse anda pada "Menu Tekhnologi", kemudian arahkan mouse anda pada sub menunya "PF Tutorial". Apa yang anda lihat? Nah, pada tampilan selanjutnya yang berisi kumpulan dari postingan PF Tutorial, seperti itulah salah satu contoh penerepan dari efek gradient. Hayoooooo.... Gimana... Tertarik ga ni? Siiiippp.... Lah... Mari ikuti langkah saya.

Yang pertama, pelototin mata anda. Sudah? Siiiippp...
Lalu perhatikan script dibawah ini.

Dokumen Resmi muhammadadamfirdaus.com


background:#000000 none repeat scroll 0 0;
filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr='#FFFFFF', endColorstr='#000000');
background:-moz-radial-gradient(left, #FFFFFF, #000000);background:-webkit-gradient(linear, left top, right bottom, from(#FFF), to( #000));

• Script diatas merupakan script gradient-nya. Nah, biasanya pada tampilan background pada umumnya, anda hanya menemukan script seperti ini saja, "background:#000000;" --> #000000 itu kode warnanya.


• Jika anda ingin mempercantik background dengan gradient, maka anda tambahkan script diatas, kemudian replace, atau paste pada kode warna #000000, sebelum tanda (;).


• Apa maksudnya -moz-radial-gradient, lalu ada -webkit-gradient? Kalau -moz-radial, digunakan agar efeknya dapat tampil pada web browser Mozilla Firefox. Sedangkan -webkit, digunakan agar efeknya dapat tampil pada web browser Chrome. Jika anda belum jelas tentang aturan penulisan di masing-masing web browser, anda dapat melihat tabelnya disini.

• Untuk menambahkan efek radial gradient pada background kumpulan artikel PF Tutorial diatas, maka cara penulisannya seperti ini.
  
  background: none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#000000');background:-moz-radial-gradient(left, #FFFFFF, #000000);background:-webkit-gradient(linear, left top, right bottom, from(#FFF), to( #000));

  setelah tandai semua, tekan ctrl+c, lalu paste di blog anda

Saya akan berikan beberapa contoh yang lain, agar blog anda tampil lebih atraktif.
Misalnya ini:

adam's linear theme 1

Tahukah anda bahwa border diatas juga hanya menggunakan CSS loh? Padahal yang muncul jadi seperti "love" pada pojok kiri-bawah, dan kanan-atasnya yah? Itu hanya terbentuk dari pengaturan width-nya saja, dan ketebalan border-nya saja. Atur width-nya hanya cukup 200px saja. Nah, cara penulisannya kurang lebih seperti ini.



background: none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FF00', endColorstr='#FFF700');background:-moz-linear-gradient(left, #00FF00, #FFF700);background:-webkit-gradient(linear, left top, right bottom, from(#00FF00), to( #FFF700)); color:#FFFFFF; border:10.5px dotted #000000;
setelah tandai semua, tekan ctrl+c, lalu paste di blog anda



adam's linear theme 2




background: none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF00FF', endColorstr='#000000');background:-moz-linear-gradient(left, #FF00FF, #000000);background:-webkit-gradient(linear, left top, right bottom, from(#FF00FF), to( #000000));
setelah tandai semua, tekan ctrl+c, lalu paste di blog anda

Belum paham? Langsung saja tanya pada saya?