Hi kali ini kita akan mencoba mempelajari bagaimana kita bisa memberikan warna pada website atau aplikasi kita dengan bentuk warna yang lebih kaya dan tidak membosankan. Tentunya dengan tujuan membuat tampilan aplikasi atau web kita lebih menawan.
Selain menempatkan satu jenis warna pada suatu objek dengan CSS, melalui gradien pada CSS kita bisa mencampurkan warna-warna yang kita sukai pada suatu objek. Bukan hanya sekedar memberi warna saja, kita bisa mengatur tata letak dan bentuk pencampuran warna tersebut. Santai aja sebentar lagi hal tersebut menjadi hal yang mudah, kita sama-sama belajar di sini hehe.
Oh iya di sini ada dua bentuk gradien yang akan kita pelajari. Pertama Linear Gradient, dan kedua, Radial Gradient.
 |
| Radius and Linear Gradient |
Syntax dasar dari Linear Gradient adalah -webkit-gradient: linear, titik_mulai, titik_akhir, color-stop(posisi, warna), from(warna mulai), to(warna akhir).
Syntax dasar dari Radius Gradient adalah -webkit-gradient: radius, inner_center(titik mulai), inner_radius(besar radius mulai), outer_center(titi akhir), outer radius(besar radius akhir), color-stop(posisi, warna), from(warna mulai), to(warna akhir)
Sekarang kita terapkan rumus syntax dasar tersebut ke dalam skrip CSS kita.
<style type="text/css">#linear{
height:150px;
width: 150px;
border-radius:12px;
display:block;
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, white), from(green), to(purple));
}
#radius{
height:150px;
width: 150px;
border-radius:12px;
display:block;
margin: 8px;
background: -webkit-gradient(radial, left top, 5, right bottom, 70, color-stop(50%, white), from(green), to(purple));
}
</style>
Berikut ini adalah tag pada kode html untuk CSS di atas:
<div class="wrapper">
<div id="linear">Gradien Linear</div>
<div id="radius">Gradien Radius</div></div>
Pembahasan kita terfokus pada properti background yang memiliki rule -webkit-gradient yang mendefinisikan argumennya dalam tanda kurung "()". Urutan argumen dalam tanda kurung tersebut kita susun berdasarkan rumus, supaya lebih mudah dipahami.
Skrip dan properti lainya adalah pelengkap yang dapat kita pelajari pada pembahasan di halaman lainnya. Jadi jelajahi saja web saya ini hehe
Ini adalah final kode untuk kode html dan CSS kita
Itulah bentuk yang kita hasilkan dari skrip CSS kita. Coba kamu oprek-oprek skrip tersebut dan perhatikan rumus yang telah saya berikan (skrip dasar). Insya Allah gampang kok kalo sering-sering dicoba.
Download source kode eksperimen kita barusan di sini. Saya memisahkan script CSS dan html (.css dan .html)
Semoga bermanfaat :)
0 komentar:
Post a Comment