Cara membuat background warna gradasi

4
,
A+ A-
Print Email
http://tutorialbloggermasnoer.blogspot.com/2011/04/cara-membuat-background-warna-gradasi_28.html
Untuk membuat background dengan warna gradasi, kita tidak perlu lagi menggunakan gambar sebagai backgroundnya. Tapi sekarang kita bisa menggunakan salah satu dari fitur CSS. Selain tampilan web menjadi lebih ringan, fitur CSS lebih mudah untuk mengatur pemilihan warna, nilai posisi warna, ketebalan warna, untuk membuat background dengan warna gradasi sesuai selera.
Dibawah ini beberapa contoh gradasi beserta kodenya, silahkan anda bisa mencoba untuk mengubah nilai - nilainya sesuai kebutuhan anda.

1. Gradasi warna terang atas


TEKS DISINI

Berikut kodenya :
<style type="text/css">
div.terang-atas
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center top, #ffffff 0%, #c4d69f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#ffffff),color-stop(1,#c4d69f));
}
</style>

<div class="terang-atas">TEKS DISINI</div>


2. Gradasi warna terang bawah


TEKS DISINI

Berikut kodenya :
<style type="text/css">
div.terang-bawah
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center top, #c4d69f 0%,#ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff),color-stop(1, #c4d69f));
}
</style>

<div class="terang-bawah">TEKS DISINI</div>


3. Gradasi Horisontal warna terang tengah


TEKS DISINI

Berikut kodenya :
<style type="text/css">
div.Horisontal-terang-tengah
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center top, #c4d69f 0%,#ffffff 50%,#c4d69f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c4d69f),color-stop(0.5, #ffffff),color-stop(1, #c4d69f));
}
</style>

<div class="Horisontal-terang-tengah">TEKS DISINI</div>


4. Gradasi Horisontal warna terang atas bawah


TEKS DISINI

Berikut kodenya :
<style type="text/css">
div.Horisontal-terang-atas-bawah
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center top, #ffffff 0%,#c4d69f 50%,#ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff),color-stop(0.5, #c4d69f),color-stop(1, #ffffff));
}
</style>

<div class="Horisontal-terang-atas-bawah">TEKS DISINI</div>


5. Gradasi Vertikal warna terang tengah


TEKS DISINI

Berikut kodenya :
<style type="text/css">
div.vertikal-terang-tengah
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center left, #c4d69f 0%,#ffffff 50%,#c4d69f 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #c4d69f),color-stop(0.5, #ffffff),color-stop(1, #c4d69f));
}
</style>

<div class="vertikal-terang-tengah">TEKS DISINI</div>


6. Gradasi Vertikal warna terang kanan kiri


TEKS DISINI

Berikut kodenya :
<style type="text/css">
div.vertikal-terang-kanan-kiri
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center left, #ffffff 0%,#c4d69f 50%,#ffffff 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop
(0, #ffffff),color-stop(0.5, #c4d69f),color-stop(1, #ffffff));
}

</style>

<div class="vertikal-terang-kanan-kiri">TEKS DISINI</div>


7. Gradasi Vertikal warna terang kiri


TEKS DISINI

Berikut kodenya :
<style type="text/css">
div.vertikal-terang-kiri
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center left, #ffffff 0%,#c4d69f 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #ffffff),color-stop(1, #c4d69f));
}
</style>

<div class="vertikal-terang-kiri">TEKS DISINI</div>


8. Gradasi Vertikal warna terang kanan


TEKS DISINI

Berikut kodenya :
<style type="text/css">
div.vertikal-terang-kanan
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center left, #c4d69f 0%,#ffffff 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #c4d69f),color-stop(1, #ffffff));
}
</style>

<div class="vertikal-terang-kanan">TEKS DISINI</div>


9. Gradasi Vertikal warna terang kanan


CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.

Berikut kodenya :
<style type="text/css">
div.ellip-terang-kanan
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius-topright: 700px 300px;
-webkit-border-radius-topright: 700px 300px;
-moz-border-radius-topleft: 700px 300px;
-webkit-border-radius-topleft: 700px 300px;
-moz-border-radius-bottomright: 700px 300px;
-webkit-border-radius-bottomright: 700px 300px;
-moz-border-radius-bottomleft: 700px 300px;
-webkit-border-radius-bottomrleft: 700px 300px;
padding: 40px;
margin-left: 60px;
background: -moz-linear-gradient(center left, #c4d69f 0%,#ffffff 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #c4d69f),color-stop(1, #ffffff));
}
</style>

<div class="ellip-terang-kanan">CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.</div>

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.
Diposting oleh

Related

85-27-2011

Cara membuat gambar memutar

85-27-2011

Fitur CSS memungkinkan kita untuk membuat banyak hal khususnya membuat tampilan halaman web ataupun blog menjadi lebih menarik. Pada waktu yang lalu saya sudah banyak mengulas tentang fitur CSS dan co...

85-27-2011
45-4-2011

Cara membuat Tooltip

45-4-2011

Tooltip adalah sebuah tool yang melekat pada sebuah link dan berfungsi memberikan keterangan atau petunjuk kepada pengunjung mengenai isi suatu dokumen atau sebuah halaman web atau blog yang akan ditu...

45-4-2011
125-4-2011

Cara membuat slide dengan efek marquee

125-4-2011

Animasi slide foto atau gambar dengan menggunakan efek marquee, tidak kalah menarik bila dibanding dengan animasi flash. Selain lebih ringan, animasi slide ini dilengkapi efek onmouseover, sehingga pa...

125-4-2011
Posting Lebih Baru Posting Lama Beranda item
Posting Lebih Baru Cara membuat daftar isi dengan drop down
Posting Lama Cara buat blog

Posting Komentar

emo-but-icon
:noprob:
:smile:
:shy:
:trope:
:sneered:
:happy:
:escort:
:rapt:
:love:
:heart:
:angry:
:hate:
:sad:
:sigh:
:disappointed:
:cry:
:fear:
:surprise:
:unbelieve:
:shit:
:like:
:dislike:
:clap:
:cuff:
:fist:
:ok:
:file:
:link:
:place:
:contact:

Tabs

Hot in weekRecentComments

Hot in week

Recent

366-6-2012

Slide down random post

366-6-2012

Satu lagi pengembangan fitur slide show terbaru dari saya. Fitur ini saya beri nama "Slide down random post", sebab fitur ini saya adopsi dan saya kembangkan dari aplikasi recent post yang tampil seca...

366-6-2012
324-10-2012

Slice Random Recent Post

324-10-2012

Dilihat sekilas memang recent post ini tampak seperti biasa, dan hanya tampil judul artikel saja. Tapi sebenarnya recent post ini memiliki tampilan yang lebih, yaitu effek slice atau sebuah lapisan ya...

324-10-2012
914-7-2012

Buat Toko Online dengan blogger tidak kalah Profesional

914-7-2012

Bersamaan dengan Lounching Perdana Toko Online "Jogja Smart", saya ingin berbagi pengalaman  dan pengetahuan tentang blogger kepada sobat - sobat blogger yang mampir di blog tercinta ini.Kendati ...

914-7-2012
323-15-2012

Cara mengaktifkan Thread Comments blogger

323-15-2012

Melihat penggunaan Thread Comments yang ada pada template bawaan blogger, buat saya sangat disayangkan bila dilewatkan. Sebab Thread Comments ini memiliki fitur yang lebih dibanding form komentar yang...

323-15-2012
353-12-2012

Cara Pasang Rating Bintang Rich Snippets

353-12-2012

Bagi yang belum atau masih kesulitan memasang Rating Bintang dan Rich Snippets, berikut langkah yang paling pas dan mudah untuk memasang Rating Bintang dan Rich Snippets.Sebelum menuju caranya, sebaik...

353-12-2012

Comments

10-14-2020

VektorSagara:

10-14-2020

Thanks Bray, work..2020.

10-14-2020
8-16-2019

Manly tours:

8-16-2019

artikel ini beserta kode kodenya untuk di passang di website blogger ya mas keren juga mas saya kepingin tapi saya tidak menggunakan website blogger yang saya gunakan website word press, kalau begitu...

8-16-2019
4-11-2015

peluang usaha:

4-11-2015

wah.. keren nih..tanks gan dah share

4-11-2015
3-1-2015

muhammad isra:

3-1-2015

kalau batas waktu 10, apa tidak terlalu cepat gan....salam sukses selalu...ditunggu kunjungan balik dan kritik sarannya......

3-1-2015
2-25-2015

agen wsc biolo:

2-25-2015

thanks very much

2-25-2015
item