Membuat Gradasi dengan CSS

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 temanteman 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 (,)

Css Shadow
CSS shadow adalah salah satu cara termudah untuk membuat effect bayangan untuk sebuat objek tertentu. Pada postingan kali ini saya akan mencoba membuat efek bayangan pada text dan objek dengan perintah CSS yang tidak jauh berbeda. BOX SHADOW Box shadow dibagi menjadi 2 jenis yaitu offset shadow dan inner shadow, untuk membuat offset shadow kita bisa membuat kode CSS seperti di bawah ini: .shadow { box-shadow: 5px 5px 7px #222; -moz-box-shadow: 5px 5px 7px #222; -webkit-box-shadow: 5px 5px 7px #222; } Keterangan: 5px adalah ukuran x-offset 5px adalah ukuran y-offset 7px Tingkat blur shadow #222 adalah warna bayangan

Contoh hasil bayangan ini bisa dilihat di gambar awal postingan ini.

Sedangkan untuk membuat inner shadow kita tinggal menambahkan kode inset seperti di bawah ini: .inner-shadow { box-shadow: inset 0 5px 7px #222; -moz-box-shadow: inset 0 5px 7px #222; -webkit-box-shadow: inset 0 5px 7px #222; } Contoh hasil CSS inner shadow bisa dilihat di bawah ini: Keterangan: 0 adalah ukuran x-inset 5px adalah ukuran y-inset 7px Tingkat blur shadow #222 adalah warna bayangan

TEXT SHADOW Cara menggunakan dan sistem kerja text shadow sebenarnya tidak berbeda dengan box shadow, perbedaannya kita tinggal merubah tulisan box-shadow menjadi text-shadow. Berikut ini contohnya: .textshadow { text-shadow: 5px 5px 7px #222; -moz-text-shadow: 5px 5px 7px #222; -webkit-text-shadow: 5px 5px 7px #222; } dan untuk inner text shadow menjadi seperti ini: .inner-textshadow { text-shadow: inset 0 5px 7px #222; -moz-text-shadow: inset 0 5px 7px #222; -webkit-text-shadow: inset 0 5px 7px #222; }

Membuat Search Form

Search form yang akan saya buat dibawah ini 100% menggunakan fungsi CSS tanpa menggunakan image sebagai background. Search form dibawah ini sangat cocok digunakan bila teman-teman ingin mengurangi penggunaan image pada web atau blog untuk sedikit meringankan loading blog tetapi tetap mempertimbangkan tampilan yang indah. kode CSS yang saya buat sudah disesuaikan dengan browser-browser yang tidak mensupport CSS3, jadi tampilan search form akan tetap proporsional apabila blog atau web kita diakses melalui browser yang tidak mensupport CSS3 walaupun tampilan search form sedikit berbeda. Ok tanpa basa-basi lagi silahkan copy kode dibawah ini untuk membuat search form menggunakan CSS3. Kode CSS:
/* CSS3 search form -------------------------------------- */ .searchform { background: #111111; background: -webkit-gradient(linear, left top, left bottom, from(#111111), to(#555555)); /* CSS gradient */ background: -moz-linear-gradient(top, #111111, #555555); /* CSS gradient */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', endColorstr='#555555'); /* CSS gradient ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', endColorstr='#555555'); /* CSS gradient ie8 */ display: inline-block; zoom: 1; /* hack untuk ie7 */ *display: inline;

border: solid 1px #555555; padding: 3px 5px; -webkit-border-radius: 20px; /* rounded corner */ -moz-border-radius: 20px; /* rounded corner */ border-radius: 20px; /* rounded corner */ -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1); /* CSS shadow */ -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); /* CSS shadow */ box-shadow: 0 1px 0px rgba(0,0,0,.1); /* CSS shadow */ } .searchform input { font: normal 12px Arial, Helvetica, sans-serif; } .searchfield { background: #ededed; padding: 6px 6px 6px 8px; width: 200px; border: solid 1px #222222; outline: none; -webkit-border-radius: 20px; /* rounded corner */ -moz-border-radius: 20px; /* rounded corner */ border-radius: 20px; /* rounded corner */ -moz-box-shadow: inset 0 1px 3px #222222; /* CSS shadow */ -webkit-box-shadow: inset 0 1px 3px #222222; /* CSS shadow */ box-shadow: inset 0 1px 3px #222222; /* CSS shadow */ } .searchbutton { color: #fff; border: solid 1px #b80000; font-size: 11px; height: 28px; width: 55px; text-shadow: 0 1px 1px #222222; /* CSS text shadow */ -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #ff0000; background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#b80000)); /* CSS gradient */ background: -moz-linear-gradient(top, #ff0000, #b80000); /* CSS gradient */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#b80000'); /* CSS gradient ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#b80000'); /* CSS gradient ie8 */ }

Kode HTML:
<form class="searchform"> <input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" /> <input class="searchbutton" type="button" value="Search" /> </form>

Preview: