CSS: fitur menarik dari radius batas

Apa yang dapat dilakukan dengan properti border-radius CSS? Penulis bahan, terjemahan yang kami terbitkan, mengatakan bahwa lebih dari yang terlihat pada pandangan pertama. Secara khusus, kita berbicara tentang fakta bahwa sudut elemen yang dibulatkan oleh properti ini dapat memiliki bentuk yang sangat menarik.


Kami menyarankan untuk membicarakan seluk-beluk penggunaan border-radius .

Properti lama dan desain web modern

Tahun ini, di Frontend Conference Zurich , Rachel Andrew membuat presentasi tentang kemungkinan teknologi CSS Grid. Di akhir presentasi, dia mengatakan sesuatu tentang properti CSS lama dan kata-katanya menarik perhatian saya. Yaitu, itu terdengar seperti ini: "Gambar dibuat bulat secara eksklusif menggunakan properti border-radius didukung dengan baik. Ingat bahwa CSS lama masih ada dan masih bisa bermanfaat. Anda tidak harus selalu menggunakan sesuatu yang sama sekali baru untuk membuat efek apa pun. "

Beberapa waktu setelah pertunjukan ini, terpikir oleh saya bahwa lingkaran hanyalah sebagian kecil dari apa yang dapat dilakukan dengan border-radius . Terpesona oleh ide ini, saya memutuskan untuk menangani properti ini dengan benar.

Menguasai batas-radius

Meaning Arti tunggal

Mari kita mulai dengan dasar-dasarnya. Saya harap Anda tidak bosan dengan contoh ini. Anda mungkin akrab dengan CSS, dan properti border-radius juga. Ini telah ada selama beberapa waktu, dan mereka menggunakannya terutama untuk menunjukkan satu makna. Ini terlihat seperti ini: border-radius: 1em . Mungkin ini adalah salah satu fitur CSS3 yang paling banyak dibicarakan di 2010, ketika css3please.com adalah sahabat perancang.

Saat menggunakan nilai tunggal untuk border-radius sudut elemen dibulatkan menurut nilai ini.


Membulatkan semua sudut kuadrat ke nilai batas-radius tunggal

Seperti yang Anda lihat dari contoh di atas, Anda dapat menetapkan nilai tetap tidak hanya dengan menentukan satuan ukuran setelah angka, seperti px , rem atau em , tetapi juga tanda persen. Ini biasanya digunakan untuk membuat lingkaran berbasis persegi ketika border-radius diatur ke 50%. Nilai persentase didasarkan pada lebar dan tinggi elemen. Oleh karena itu, ketika diterapkan pada persegi panjang, sudut yang dihasilkan tidak akan simetris. Berikut adalah contoh yang menunjukkan perbedaan antara border-radius: 110px dan border-radius: 30% properti diterapkan pada persegi panjang.


Membulatkan sudut-sudut persegi panjang

Perhatikan fakta bahwa sudut-sudut persegi panjang kanan asimetris dan ingat ini. Ini akan bermanfaat bagi kita nanti.

▍ Empat nilai terpisah

Saat menggunakan lebih dari satu nilai border-radius , Anda menyesuaikan pengaturan untuk setiap sudut, mulai dari kiri atas dan bergerak searah jarum jam. Di sini, sekali lagi, Anda dapat menggunakan nilai persentase. Mereka juga dapat dicampur dengan nilai-nilai tetap.


Pengaturan parameter untuk empat sudut elemen

▍Eight nilai dipisahkan oleh garis miring

Saya pikir banyak dari Anda sudah mencoba semua yang kita bicarakan di atas. Sekarang adalah waktunya untuk beberapa eksperimen yang sangat menarik. Apa yang terjadi jika nilai dipisahkan oleh garis miring dan hingga delapan ditentukan? Pertama, lihat spesifikasinya . Ini memberitahu kita bahwa jika nilai diberikan sebelum dan setelah slash, maka nilai sebelum slash menentukan radius horizontal, dan nilai setelah vertikal. Jika tidak ada garis miring, maka kedua jari-jari akan sama.

Jadi, nilai sebelum garis miring bertanggung jawab untuk jarak horizontal, dan nilai setelah garis miring bertanggung jawab untuk vertikal. Semua ini baik, tetapi di sini muncul pertanyaan logis: "Apa yang kita bicarakan?" Ingat nilai persentase pembulatan sudut yang ditetapkan untuk bentuk persegi panjang? Nilai absolut yang berbeda untuk jarak vertikal dan horizontal diterapkan di sana dan sudut bulat asimetris hadir. Ini persis apa yang dapat Anda capai dengan menggunakan garis miring ketika menetapkan border-radius .

Mari kita bandingkan efek yang diberikan oleh pengaturan berikut: border-radius: 4em 8em dan border-radius: 4em / 8em . Hasilnya akan sangat berbeda.


Sudut simetris elemen kiri adalah seperempat lingkaran, dan sudut asimetris elemen kiri adalah bagian dari elips

Sejujurnya, angka yang diperoleh sebagai hasil dari penerapan pengaturan di atas terlihat aneh. Namun, jangan lupa bahwa lingkaran dibuat menggunakan parameter berikut: border-radius: 50% . Lingkaran diperoleh karena fakta bahwa dua nilai yang menentukan satu sisi ditambahkan dan 100% (50% + 50% = 100%) diperoleh dan tidak ada garis lurus dari kotak asli. Jika Anda berpikir dengan semangat yang sama tentang delapan nilai yang digunakan untuk mengatur properti border-radius , ternyata dengan bantuan mereka Anda dapat menggambarkan sosok yang terlihat seperti pick gitar atau sel dalam organisme hidup.


Gambar yang dihasilkan dari penerapan 8 nilai yang dipisahkan oleh garis miring


Empat elips yang tumpang tindih membentuk sebuah bentuk

Butuh beberapa saat untuk membiasakan diri. Terkadang semua konstruksi ini sulit dipahami. Jika Anda tertarik pada bentuk kompleks elemen yang dapat disesuaikan dengan border-radius , Anda dapat menggunakan alat kecil ini .

Ringkasan

Sekarang Anda tahu bahwa ketika menetapkan border-radius Anda dapat menggunakan 8 nilai, maka jika Anda mencoba alat tersebut, Anda dapat merasakan sedikit kekecewaan, karena tidak memungkinkan Anda untuk mengontrol setiap nilai secara mandiri. Jika demikian, maka di sini , terutama untuk Anda, versinya yang mendukung konfigurasi independen dari semua delapan nilai. Sebelum Anda menggunakannya, ingat satu percakapan dari film Ghostbusters 1984:

- Jangan menyeberangi stream.
- Kenapa?
- Tapi itu akan buruk.

Faktanya adalah bahwa jika Anda memindahkan manipulator sehingga mereka berpotongan di satu sisi gambar, maka itu akan mulai berperilaku ... Katakan saja - itu akan mulai berperilaku tak terduga. Apa yang bisa saya katakan - lihat sendiri. Pada akhirnya, ini tidak akan menyebabkan bencana universal, tetapi ketika melakukan ini, ingatlah bahwa kami memperingatkan Anda.

Pembaca yang budiman! Apakah Anda menggunakan properti CSS radius batas?