Membuat Gradasi Warna Cantik CSS Linear / Radial Gradient ~ LPMD Balaroa Pewunu

Silahkan bagikan :

۞ السَّــــــلاَمُ عَلَيْــــــكُمْ وَرَحْمَــةُ اللــــهِ وَبَرَكَاتُــــــــــهُ ۞

۞ بســـــــــــــم اللّـــه الرّحمٰن الرّحيـــــــــــــم ۞

-----------------------------------------------------------------------

Membuat Gradasi Warna Cantik CSS Linear / Radial Gradient

Linear Gradient / Gradasi Warna Linear

Efek Linear Gradient atau gradasi warna linear adalah sebuah visual effect yang dihasilkan olehperubahan 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;}