Kali ini saya akan membahas mengenai warna atau pewarnaan menggunakan CSS, pada bahasan kali ini saya akan membahas tentang Background Linear Gradient di mana cara ini bisa diterapkan ke dalam background blog/web. Pertama yang saya bahas adalah saya ambil contoh cara memberi warna pada background blog sebenarnya tidak terpaku pada background blog saja tapi cara ini juga dapat diterapkan pada elemen lain seperti tombol navigasi dan lainnya.
Langsung saja pertama saya akan sedikit menbahas apa yang sudah saya ketahui mengenai background linear ini, di bawah ini contohnya:
background:-webkit-linear-gradient(red 25%, green 50%, blue 100%); background:-moz-linear-gradient(red 25%, green 50%, blue 100%); background:-ms-linear-gradient(red 25%, green 50%, blue 100%); background:-o-linear-gradient(red 25%, green 50%, blue 100%); background:linear-gradient(red 25%, green 50%, blue 100%); height:100px; width:400px;
Artinya dalam elemen tersebut dengan tinggi 100px dan lebar 400px, dengan warna background yang diterapkan yaitu warna merah 25%, warna hijau 50%, dan warna biru 100%. Jadi diantara batas warna merah dan hijau terdapat warna campuran antar warna merah dan hijau. Begitu juga dengan batas antara warna hijau dan biru.
Membuat batas antar warna
Selain itu kita juga dapat memberi batas pada masing-masing warna untuk lebih jelasnya dapat dilihat:background:-webkit-linear-gradient(red 35%, green 35%, green 65%, blue 65%); background:-moz-linear-gradient(red 35%, green 35%, green 65%, blue 65%); background:-ms-linear-gradient(red 35%, green 35%, green 65%, blue 65%); background:-o-linear-gradient(red 35%, green 35%, green 65%, blue 65%); background:linear-gradient(red 35%, green 35%, green 65%, blue 65%); height:100px; width:400px;
Hampir sama dengan yang tadi hanya saja terdapat batas antara warna satu dengan warna lainnya, warna merah 35% dan dibatasi dengan warna hijau 35% juga. Artinya background yang berwarna merah sebesar 35% dari tinggi elemen dan di berhentikan oleh warna hijau pada 35% nya lalu dilanjutkan dengan warna hijau dari 35% sampai 65% beigtu seterusnya. Kurang lebih seperti itulah begitu seterusnya. Dengan sedikit menambah kode maka background akan terlihat rapi.
Sampai sini saja dulu ntar kapan-kapan dilanjut :D
keren sob..! ada yg mirip bendera palestina....
ReplyDeletebtw.,cahaya putih yg letakx pd bagian atas tuh gmn klo dibikin kayak petir pasti terlihat lbh keren..! \o/
wkwkw ntar lah klo udah dapet ilmunya :D
Deletewow, ikutan belajar masbro :D
ReplyDeletecontent-wrappernya jadi main-wrapper yah mas? hihi. Kok kayaknya gak keikut mediaqueries T_T .Jadinya pas sy kecilkan dibawah 400 *kayaknya, jadi gak ke ikut melebar T_T
kayaknya ngga, klo ga salah #main-wrapper ada, #content-wrapper juga ada. jdi gmana nih solusinya?? :)
DeleteKalau nge-resizenya sehabis nge-toggle sidebar, media queries jadi rusak. Toggle sidebar nggak cocok untuk tema responsif.
Deleteowh, iya bener hihi :D
Deleteokok, tapi saya masih bingung sama fontnya pas di resize ga ikut berubah :(
pake flittext.js kan? atau pakai skala persen? :\
Deleteapanya mas?? ngga mksudnya font size nya saat di resize ga berubah.
Deleteehh mas... kok demonya dalam bentuk gambar...
ReplyDeletemungkin lebih bagusnya langsung live aja.
oh ya sih tadinya pengen langsung, thank's sarannya :)
Deleteikut nyimak diskusix para master..., :)
ReplyDeletesilahkan mas :)
Deletetambah keren sob blognya saya suka tampilanya
ReplyDeletehaha..
Deletemantep nih :)
ReplyDeletesip
Deletegradientnya bagus :D bisa kaya garis gitu kapan2 ngepost pake gradient yang kaya gini ah :D bosen pake linier gradient sama radial gradient sekali2 mau yang kaya gini :D nice posting bang mire tahu bacem *eh tempe. :p
ReplyDeleteemg baru tau gtu?? ahh brcandanya jelek :p
DeleteAku tahu yang lebih gampangnya, coba lewat ColorZilla
ReplyDeletehe,, he,, aku biasanya lewat situ kalau mau ngambil gradient :p
owh sip2, tpi saya lebih tertantang dengan manual supaya tambah stress :p
Deletewah mantap nih....
ReplyDeleteMakasih ilmunya bos. Sangat berguna.
sip.
Deletetisp yang berguna sobat, cocok untuk pengetahuan pengkodean warna,, top deh pokoknya..
ReplyDeletesory banget sobat baru bisa berkunjung,, maklum kesibukan (alasan aja ni)hahahahaahahhaa
santai saja :D
DeleteKang kok pas diliat di Home, tgl postingannya dah bulan Agustus ya wkwkwk padahal Puasa aja belum :p
ReplyDeleteSalam kenal btw
iya saya lupa setting tgl postingnya hehe
Deleteilmu ini baru saya dapatkan disini.. :D
ReplyDeletesip :)
Delete