Sunday, July 15, 2012

Cara Membuat Background Radial


Kalau post sebelumnya saya post tentang bagaimana cara Membuat Background Linear menggunakan CSS. Kali ini saya akan menerangkan sedikit bagaimana cara Membuat Warna Background Radial.
Seperti biasa, misal kita ingin membuat background radial seperti di bawah ini:


Maka kode yang harus kita buat seperti di bawah ini:
background:-webkit-radial-gradient(circle, red 25%, green 50%, blue 100%);
background:-moz-radial-gradient(circle, red 25%, green 50%, blue 100%);
background:-ms-radial-gradient(circle, red 25%, green 50%, blue 100%);
background:-o-radial-gradient(circle, red 25%, green 50%, blue 100%);
background:radial-gradient(circle, red 25%, green 50%, blue 100%);
height:100px;
width:400px;
Dari kode CSS di atas dapat dijelaskan bahwa background di atas menggunakan type radial background, untuk circle yaitu yang membentuk bulat berwarna merah lalu seperti pada artikel sebelumnya red, green, dan blue adalah warna yang meliputi backgroundnya mungkin sudah mengerti jika sudah membaca pada artikel sebelumnya.

Lalu selain itu cara di atas juga dapat di modifikasi sedikit tampilannya seperti di bawah ini:


Dan script/kodenya di bawah ini:
background:-webkit-radial-gradient(top, circle, red 25%, green 50%, blue 100%);
background:-moz-radial-gradient(top, circle, red 25%, green 50%, blue 100%);
background:-ms-radial-gradient(top, circle, red 25%, green 50%, blue 100%);
background:-o-radial-gradient(top, circle, red 25%, green 50%, blue 100%);
background:radial-gradient(top, circle, red 25%, green 50%, blue 100%);
height:100px;
width:400px;
Hampir sama dengan yang tadi, hanya saja ditambahkan kode top sebelum kode circle dengan memberi tanda koma setiap batas kode.
Ada juga bentuk lainnya seperti ini:


Caranya:
background:-webkit-radial-gradient(top left, circle, red 25%, green 50%, blue 100%);
background:-moz-radial-gradient(top left, circle, red 25%, green 50%, blue 100%);
background:-ms-radial-gradient(top left, circle, red 25%, green 50%, blue 100%);
background:-o-radial-gradient(top left, circle, red 25%, green 50%, blue 100%);
background:radial-gradient(top left, circle, red 25%, green 50%, blue 100%);
height:100px;
width:400px;
Sedikit tambahan dari yang tadi hanya menambahkan kode left sesudah kode top tanpa koma yang artinya sebelah kiri atas yang membentuk bulatan/circle.
Sudah deh selesai Cara Membuat Warna Background Radial, semoga bermanfaat.

6 comments:

  1. mungkin lebih baiknya di mulai dari radial 2 warna.
    klo diatas itu radial 3 warna.

    ReplyDelete
    Replies
    1. oh iya betul2, dapet bahan lgi nih. :D

      Delete
    2. 2 warna yang agak sama dikit lebih enak dipandang. Kayak bg login-nya twitter :-d

      Delete