Ketika sebaris kode tak berhenti menatap dan tampak naksir kepada Anda.

CSS Border radius - Membuat Efek Tumpul pada Sudut-Sudut Area

BAB 1: Perkenalan CSS Border Radius

Berikut ini adalah kode CSS dasar untuk membuat efek tumpul pada sudut-sudut area:


-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;


Nilai 10px adalah ukuran radius ketumpulan sudut. Meskipun di sini Saya meletakkan properti -webkit-border-radius, -moz-border-radius dan border-radius sekaligus, namun pada dasarnya mereka semua mempunyai tugas yang sama persis. Setiap peramban mempunyai prefiks border radius tersendiri:

  • -webkit-border-radius: Properti ini milik Safari dan Chrome. Jika Safari/Chrome tidak bisa membaca properti border-radius, maka dia masih bisa membaca properti -webkit-border-radius.
  • -moz-border-radius: Properti ini milik Mozilla Firefox. Jika Firefox tidak bisa membaca properti border-radius, maka dia masih bisa membaca properti -moz-border-radius.
  • border-radius: Ini adalah standar W3C. Suatu saat semua peramban harus bisa membaca properti ini.


BAB 2: Dua Metode Pemecahan Sisi

Berikut ini adalah hasil-hasil tampilan penumpulan sudut pada semua peramban yang telah disebutkan di atas berdasarkan deklarasi-deklarasi yang diletakkan di dalam area. Ada satu hal penting yang mungkin akan terjadi di sini. Kemungkinan besar kalian tidak akan melihat efek-efek penumpulan sudut pada satu atau dua pembagian tipe peramban dalam daftar area di bawah ini, karena di sini Saya hanya menerapkan satu jenis prefiks pada masing-masing tipe peramban saja.
Misalnya begini: Jika saat ini kamu sedang melihat halaman ini dengan peramban Mozilla Firefox, maka kemungkinan kamu tidak akan melihat efek penumpulan sudut pada grup Chrome dan Safari. Untuk melihat efek penumpulan sudut pada grup Chrome dan Safari, maka kamu harus melihat halaman ini dengan peramban tersebut.

Spesifikasi W3C, Opera 10.5+
Metode 1: Dominasi ValueMetode 2: Dominasi Properti
border-radius: 20px 20px 20px 20px;
border-radius: 20px 0 0 0;
border-radius: 0 20px 0 0;
border-radius: 0 0 20px 0;
border-radius: 0 0 0 20px;
border-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;

Mozilla Firefox
Metode 1: Dominasi ValueMetode 2: Dominasi Properti
-moz-border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 0 0 0;
-moz-border-radius: 0 20px 0 0;
-moz-border-radius: 0 0 20px 0;
-moz-border-radius: 0 0 0 20px;
-moz-border-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;

Safari & Chrome
Metode 1: Dominasi ValueMetode 2: Dominasi Properti
-webkit-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 0 0 0;
-webkit-border-radius: 0 20px 0 0;
-webkit-border-radius: 0 0 20px 0;
-webkit-border-radius: 0 0 0 20px;
-webkit-border-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;


BAB 3: Penerapan Radius Asimetris

Untuk menerapkan hasil tampilan radius asimetris pada sudut-sudut area, digunakanlah logika sumbu-X dan sumbu-Y seperti ini:

css border radius
CSS Border Radius Asimetris


Radius vertikal diartikan sebagai sumbu-Y, sedangkan radius horizontal diartikan sebagai sumbu-X. Karena di sini kita akan menerapkan dua value sekaligus, maka cara yang paling tepat untuk menerapkannya adalah dengan menggunakan metode dominasi properti seperti ini:

div {
  -webkit-border-top-left-radius:(x) (y);
  -moz-border-radius-topleft:(x) (y);
  border-top-left-radius:(x) (y);
}

Jika kode (x) diubah menjadi 50px dan (y) menjadi 20px maka akan menghasilkan penampilan area seperti ini:

-webkit-border-top-left-radius: 50px 20px;
-moz-border-radius-topleft: 50px 20px;
border-top-left-radius: 50px 20px;


Bingung? Ingin Cara yang Lebih Praktis?

Gunakan generator CSS Border Radius » klik di sini
  

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

 7 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Komunitas

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Info
  1. http://www.dte.web.id/2013/12/daftar-salinan-berkas-widget-halaman.html
  2. http://www.dte.web.id/2013/02/hosting-file-dengan-google-code-dan.html
Tutup
Ke atas!