Buat Image Header Cantik dgn CSS Linear Radial Gradient

Salah satu keunggulan dan kelebihan mengganti Image Header dengan CSS linear radial gradient ini adalah loading blog meningkat lebih cepat karena berkurangnya jumlah http request berupa gambar header yang biasanya ukurannya cukup besar. Hal ini bisa disiasati dengan membuat tampilan Header yang tetap cantik dan menarik karena kita dapat menggunakan Efek linear ataupun radial gradient melalui CSS.

Linear Gradient / Gradasi Warna Linear

Efek Linear Gradient atau gradasi warna linear adalah sebuah visual effect yang dihasilkan oleh perubahan dan bergeseran warna (gradasi) diatara 2 warna atau lebih. Arah gradasi atau perubahan warna ini dapat terjadi secara vertical (dari atas ke bawah atau dari bawah ke atas), secara horizontal (dari kiri ke kanan atau kanan ke kiri). Berikut beberapa contoh Linear Gradient dan kodenya:

Contoh Linear Gradient Vertical 2 Warna

Kode Linear Gradient Vertical 2 Warna adalah sebagai berikut:

#dvs_linear_vertical{
	background:#0F466E;
	background:-webkit-linear-gradient(top,#0F466E 0%,#387AAB 75%);
	background:-moz-linear-gradient(top,#0F466E 0%,#387AAB 75%);
	background:-o-linear-gradient(top,#0F466E 0%,#387AAB 75%);
	background:-ms-linear-gradient(top,#0F466E 0%,#387AAB 75%);	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0F466E',endColorstr='#387AAB',GradientType=0);
	height:100px;
}

Pada baris kedua terdapat kode “background:#0F466E”, ini adalah fallback color yang berfungsi untuk menampilkan warna dasar jika browser tidak mampu menerjemahkan filter yang ada. Browser modern dan populer saat ini kebanyakan sudah dapat menterjemahkan sintak CSS ini sesuai dengan filternya masing-masing. Sebut saja Browser Google Chrome dan Apple Safari memakai webkit-filter sebagai acuan visual effect-nya. Dan selanjutnya secara berurutan sesuai kode di atas filter tersebut berlaku untuk Mozilla Firefox (Gecko), Opera dan Internet Explorer (line 6,7).

Contoh Linear Gradient Horizontal 2 Warna

Kode Linear Gradient Horizontal 2 Warna:

#dvs_linear_horizontal{
	background:#0F466E;
	background:-webkit-linear-gradient(right,#0F466E 0%,#5093C4 75%);
	background:-moz-linear-gradient(right,#0F466E 0%,#5093C4 75%);
	background:-o-linear-gradient(right,#0F466E 0%,#5093C4 75%);
	background:-ms-linear-gradient(right,#0F466E 0%,#5093C4 75%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5093C4',endColorstr='#0F466E',GradientType=1);
	height:100px;
}

Berbeda dengan filter lainnya, khusus untuk Internet Explorer gradient horizontal menggunakan tipe gradient 1 (lihat baris 7)

Contoh Linear Gradient Horizontal 4 Warna

Kode Linear Gradient Horizontal 4 Warna:

#dvs_linear_horizontal_rainbow{
	background:#0F466E;
	background:-moz-linear-gradient(right, red 10%, lime 33%, blue 67%, black 100%);
	background:-webkit-linear-gradient(right, red 10%, lime 33%, blue 67%, black 100%);
	background:-o-linear-gradient(right, red 10%, lime 33%, blue 67%, black 100%);
	height:100px;
}

Sayangnya sampai saat ini saya belum menemukan gradient lebih dari 2 warna untuk IE, bagi yang sudah menemukan silahkan menambahkan.

Radial Gradient / Gradasi Warna Radial

Efek Radial Gradient atau gradient warna radial adalah sebuah visual effect yang dihasilkan oleh perubahan satu warna ke warna lainnya dengan arah gradasi radial. Adapun bentuk warna radial terdiri dari bulat (circle) dan juga pipih (ellipse). Berikut beberapa contoh Radial Gradient dan kode CSS-nya:

Contoh Circle Radial Gradient 3 Warna

Kode Circle (bulat) Radial Gradient 3 Warna:

#dvs_radial_circle{
	background:orange;
	background:-webkit-radial-gradient(center, circle, orange 5%, red 45%, black 100%);
	background:-moz-radial-gradient(center, circle, orange 5%, red 45%, black 100%);
	background:-o-radial-gradient(center, circle, orange 5%, red 45%, black 100%);
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0, finishopacity=100, style=2);
	height:100px;
}

Lagi-lagi untuk Internet Explorer belum mendukung visual effect penggunaan lebih dari 2 warna gradien dan warnanyapun selalu berakhir dengan nilai opacity warna dasar, sehingga gradasi yang terjadi adalah perubahan warna dasar ke transparan (memutih).

Contoh Ellipse Radial Gradient 3 Warna

Kode Ellipse (elips/ pipih) Radial Gradient 3 Warna:

#dvs_radial_ellipse{
	background:orange;
	background:-webkit-radial-gradient(center, ellipse, orange 5%, red 45%, black 100%);
	background:-moz-radial-gradient(center, ellipse, orange 5%, red 45%, black 100%);
	background:-o-radial-gradient(center, ellipse, orange 5%, red 45%, black 100%);
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0, finishopacity=100, style=3);
}

Tipe gradien ellipse radial untuk IE adalah default dan belum support tipe radial circle atau bulat. Namun IE memiliki tipe radial unik dan cantik dengan arah gradasi/ perubahan warna dari setiap penjuru ke tengah. Tipe ini dapat dibuat dengan style=3 (lihat baris 6)

Menggabungkan CSS Linear dan Radial Gradient

Kembali ke tema utama artikel ini, kita dapat membuat CSS dengan memanfaatkan Linear dan Radial Gradient sebagai pengganti Image Header. Ya, walaupun sebenarnya bisa digunakan untuk menghias bagian-bagian lain guna mempercantik tampilan blog Anda. Dan kebetulan trick yang saya temukan kali ini adalah menggabungkan efek linear dan radial bersamaan. Style CSS yang saya temukan kali ini saya beri nama Vertical Horizon Header, seperti nama band ya hehee 🙂 Meski sesungguhnya visual efek yang saya pakai hanya linear gradient (horizontal) dan radial gradient (ellipse).
Kenapa style ini saya beri nama Vertical Horizon Header? Well, karena menurut mata saya, efek yang dihasilkan seperti pemandangan awan di kaki langit (horizon) yang tersapu angin lembut sepoi-sepoi pada saat matahari terbit atau tenggelam (lebay mode:on). Style ini saya pakai dan dapat dilihat pada bagian atas (header) blog ini. Bagi Anda yang tertarik, berikut kode dan contohnya:

DVS Vertical Horizon Header – Right

Pada contoh ini ellipse radial gradient disimpan di sebelah kanan. Kode CSS yang digunakan untuk membuat Vertical Horizon Header ini adalah:

#dvs_vertical_horizon_header {
	background:#0F466E;
	background:-webkit-linear-gradient(top,#0F466E 0%,#387AAB 75%);
	background:linear-gradient(top,#0F466E 0%,#387AAB 75%);
	background:-moz-linear-gradient(top,#0F466E 0%,#387AAB 75%);
	background:-o-linear-gradient(top,#0F466E 0%,#387AAB 75%);
	background:-ms-linear-gradient(top,#0F466E 0%,#387AAB 75%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0F466E',endColorstr='#387AAB',GradientType=0);
	height:120px;
	overflow:hidden;}
#dvs_vertical_horizon_inner{
	background:#0F466E;
	background:-moz-radial-gradient(right, #0F466E 25%, transparent 55%, transparent 100%);
	background:-webkit-radial-gradient(right, #0F466E 25%, transparent 55%, transparent 100%);
	background:-o-radial-gradient(right, #0F466E 45%, transparent 55%, #0F466E 100%);
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0, finishopacity=100, style=2);
	height:190px;
	overflow:hidden;}

Hasilnya sepert nampak di bawah:

DVS Vertical Horizon Header – Left

Berbanding terbalik dengan contoh di atas, kali ini ellipse radial disimpan di sebelah kanan. Kode CSS untuk membuat Vertical Horizon Header tipe ini adalah:

#dvs_vertical_horizon_header {
	background:#0F466E;
	background:-webkit-linear-gradient(top,#0F466E 0%,#387AAB 75%);
	background:linear-gradient(top,#0F466E 0%,#387AAB 75%);
	background:-moz-linear-gradient(top,#0F466E 0%,#387AAB 75%);
	background:-o-linear-gradient(top,#0F466E 0%,#387AAB 75%);
	background:-ms-linear-gradient(top,#0F466E 0%,#387AAB 75%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0F466E',endColorstr='#387AAB',GradientType=0);
	height:120px;
	overflow:hidden;}
#dvs_vertical_horizon_inner2{
	background:#0F466E;
	background:-moz-radial-gradient(left, #0F466E 25%, transparent 55%, transparent 100%);
	background:-webkit-radial-gradient(left, #0F466E 25%, transparent 55%, transparent 100%);
	background:-o-radial-gradient(left, #0F466E 45%, transparent 55%, #0F466E 100%);
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0, finishopacity=100, style=2);
	height:190px;
	overflow:hidden;}

Hasilnya seperti ini:

DVS Vertical Horizon Header – Center

Lain lagi dengan contoh berikut. Kali ini ellipse radial disimpan di bagian bawah tengah sehingga, hasilnya si kaki langit terbentuk melengkung di tengah. Anda juga bisa menambahkan warna lain, misalnya membuat pelangi atau lainnya. Berikut kode dan contoh Vertical Horizon Header Center ini:

#dvs_vertical_horizon_header {
	background:#0F466E;
	background:-webkit-linear-gradient(top,#0F466E 0%,#387AAB 75%);
	background:linear-gradient(top,#0F466E 0%,#387AAB 75%);
	background:-moz-linear-gradient(top,#0F466E 0%,#387AAB 75%);
	background:-o-linear-gradient(top,#0F466E 0%,#387AAB 75%);
	background:-ms-linear-gradient(top,#0F466E 0%,#387AAB 75%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0F466E',endColorstr='#387AAB',GradientType=0);
	height:120px;
	overflow:hidden;}
#dvs_vertical_horizon_inner3{
	background:#0F466E;
	background:-webkit-radial-gradient(center, #0F466E 25%, transparent 55%, transparent 100%);
	background:-moz-radial-gradient(center, #0F466E 25%, transparent 55%, transparent 100%);
	background:-o-radial-gradient(center, #0F466E 45%, transparent 55%, #0F466E 100%);
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0, finishopacity=100, style=3);
	height:190px;
	overflow:hidden;}

Baca juga Membuat Video Animasi Keren di Android

Trik atau rahasia dari visual efek pada DVS Vertical Horizon Header ini terletak pada menyisipkan CSS radial gradient pada background dasar (vertical linear gradient), atau dengan kata lain radial gradient ini ditumpuk di atas linear gradient. Sementara itu agar warnanya tidak terlihat menumpuk, maka gradasi atau pergeseran warna dibuat transparan.
Huffthhhh…. Akhirnya selesai sudah, capek juga ternyata. Oke deh, silahkan mencoba dan silahkan gunakan style vertical horizon ala DVS ini jika Anda tertarik. Anda boleh memakai style CSSnya sekehendak Anda tapi tidak dengan artikelnya, lumayan capek lho bikin tulisan sepanjang ini. Apalagi saya sering menemukan artikel saya disalin mentah-mentah, ngeselin dan merusak banget tuh! Blogger juga manusia, hicks… (Saya yakin sahabat DVS tidak akan berbuat seperti itu)
Oh iya, ada yang lupa cara pasang css ini dibahas 😀 Mudah saja kok, cukup tambahkan kode CSS yang sobat suka dari kode dan contoh di atas pada CSS template Anda. Kemudian untuk memanggilnya dalam HTML atau jika ingin mengganti header lama dengan style ini, maka cari bagian header pada template. Catatan, namanya mungkin tidak persis sama tapi biasanya muncul setelah kode wrap (ini juga tidak selalu sama). Yang penting adalah Anda harus mengetahui bagian header pada CSS, kalau bagian headernya memakai gambar maka lebih mudah mencarinya. Ganti atau tambahkan dengan kode CSS di atas. Setelah itu jangan lupa untuk mengganti bagian (divisi) pada template dan menyesuaikan kode dengan CSS-nya. Perhatikan, dan adaptasi seperti kode ini:

<div id="dvs_vertical_horizon_header">
	<div id="dvs_vertical_horizon_inner">
	... isi header berupa nama blog, tagline dan lain-lain...
	</div>
</div>

Lihat baris pertama, saya asumsikan itu adalah kode header lama Anda. Setelah itu jangan lupa tambahkan kode pada baris kedua, fungsinya adalah untuk menggabungkan (menumpuk) efek gradient radial di atas linear gradient. Sudah, semudah itu kok.
Keuntungan utamanya jelas dengan hanya menggunakan CSS Linear Radial Gradient sebagai alternatif pengganti header memakai image/ gambar, kode CSS jauh lebih kecil ukurannya, apalagi jika CSS itupun dikompress (lihat caranya pada cara menggabungkan dan mengkompress CSS), selain itu jumlah http request-pun akan berkurang.
Demikian artikel tentang Linear dan Radial Gradient sebagai pengganti Image Header. Selamat mencoba dan semoga bermanfaat ya…