Cara Menggunakan Function ellipse() pada CSS

Function ellipse() adalah fungsi bentuk yang digunakan untuk menentukan <basic-shape>.

Nilai CSS <basic-shape> mewakili bentuk dasar yang didefinisikan menggunakan fungsi bentuk. Bentuk dasar kemudian dapat diteruskan sebagai nilai ke properti seperti properti bentuk-luar, atau properti jalur klip, yang digunakan untuk menerapkan bentuk ke elemen untuk mengubah aliran konten di sekitarnya, atau untuk klip elemen ke bentuk yang ditentukan, masing-masing.

ellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? )
/* where.. */
<shape-radius> = <length> | <percentage> | closest-side | farthest-side

Function ellipse() mendefinisikan bentuk ellipse. Dibutuhkan daftar argumen dan nilai yang sama dengan fungsi circle (), kecuali bahwa alih-alih mengambil satu nilai radius bentuk, dibutuhkan dua jari-jari, rx dan ry, yang mewakili jari-jari sumbu x dan sumbu y dari elips, di pesanan itu. Juga, nilai persentase di sini diselesaikan terhadap lebar yang digunakan (untuk nilai rx) dan tinggi yang digunakan (untuk nilai ry) dari kotak referensi.

Lihat deskripsi fungsi circle () di entri <basic-shape> untuk informasi lebih lanjut tentang argumen yang mungkin, artinya, dan nilai yang mungkin.

Catatan tentang sisi terdekat: Untuk lingkaran, ini adalah sisi terdekat dalam dimensi apa pun. Untuk elips, ini adalah sisi terdekat dalam dimensi jari-jari.

Catatan tentang sisi terjauh: Untuk lingkaran, ini adalah sisi terjauh dalam dimensi apa pun. Untuk elips, ini adalah sisi terjauh dalam dimensi jari-jari.

Berikut ini semua deklarasi bentuk elips () yang valid:

ellipse();
/* use default values */

ellipse(100px 50px at 30% 50%);
/* ellipse of x-radius 100px and y-radius 50px
positioned at 30% horizontally and 50% vertically */

ellipse(farthest-side closest-side at 25% 25%);
/* defines an ellipse whose x-radius is half the length
of the longest side, and whose y-radius is half the length
of the shorter side, positioned at the point of
coordinates 25% 25% on the element’s coordinate system*/

ellipse(10em 10em at 500px 300px);
/* defines a ellipse whose center is positioned at 500px
horizontally and 300px vertically, with both x and y
radii of 10em (this is basically a circle) */

 

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *