Kalau diperhatikan, template asli yang saya pakai ini (rounder2) setiap box-nya ada lengkungan seperempat lingkaran. (well, kalau kamu liatnya sekarang sih, udah ga keliatan lagi yang aslinya, mungkin bisa coba liat blog lain yang menggunakan template sama yang masih asli) Kelihatannya memang menarik ya? Tampilan blog kita jadi tidak kaku, tapi tidak terlalu feminin. Saya sendiri, sejujurnya (pada awalnya), tidak suka menggunakan round corner begitu. Saya sudah berniat untuk menghapus saja garis lengkung itu. Tapi saya tiba-tiba punya pertanyaan, yang berubah jadi penasaran...
Untuk yang sudah menyadarinya, round corner yang dipakai oleh template asli ini ternyata adalah image. Gambar lengkung yang sewarna dengan background untuk kamuflase dipasang di atas box kotak. Pertanyaan yang sering muncul di benak saya adalah: Bagaimana cara untuk membuat round corner lebih mudah? (tanpa memanggil image)
Kita harus berterimakasih kepada orang yang menciptakan css karena dengan itu (dan kepada Budi yang sudah membagi ilmu pada saya), kita bisa membuat round corner dengan mudah. Caranya adalah dengan memasukkan sebaris code perintah di baris perintah untuk membuat box yang bersangkutan.
-moz-border-radius-topleft: 10px
topleft bisa diganti dengan topright, bottomleft, bottomright.
10px adalah ukuran pixel yang menyatakan besaran radius yang diinginkan.
and.. voila! box kita memiliki round corner yang rapi, bersih, cocok untuk yang suka tipe desain minimalis seperi saya. (yah kalau masih ada yang bingung, tinggal tanya saya aja, atau yang lain yang pastinya jauh lebih bisa daripada saya, atau liat aja di page source-nya) Enjoy!
catatan: saya menemukan adanya kasus garis lengkung ini tidak muncul di Microsoft Internet Explorer (versi lama keliatannya). jadi disarankan untuk menggunakan Mozilla Firefox.
No comments:
Post a Comment