Bentuk CSS yang lebih baik menggunakan bentuk () – Bagian 3: Kurva – Beragampengetahuan

Jika Anda mengikuti, ini adalah artikel ketiga tentang seri CSS baru shape() Fungsi. Kami telah belajar cara menggambar garis dan busur, dan di bagian ketiga saya akan membahas curve Perintah – Perintah yang hilang yang perlu Anda ketahui untuk kontrol penuh shape() Fungsi. Sebenarnya ada lebih banyak perintah, tetapi Anda jarang membutuhkannya, dan Anda dapat dengan mudah memahaminya nanti dengan memeriksa dokumentasi.

ini curve Memesan

Dengan menentukan titik kontrol, perintah ini menambahkan kurva Bézier antara kedua titik. Kita dapat memiliki titik kontrol dan membuat kurva kuadratik atau dua titik kontrol dan membuat kurva kubik.

Bézier, kuadratik, kubik, titik kontrol? Apa? Lai

Bagi banyak dari Anda, definisi ini tidak jelas dan bahkan tidak berguna! Anda dapat mengambil beberapa menit untuk membaca tentang kurva Bézier, tetapi apakah itu benar -benar sepadan? Mungkin tidak, kecuali pekerjaan Anda adalah membuat bentuk sepanjang hari dan memiliki latar belakang yang kuat dalam geometri.

Kami sudah punya cubic-bezier() Sebagai fitur animasi yang longgar, tetapi jujur, siapa yang benar -benar mengerti cara kerjanya? Kami mengandalkan generator untuk mendapatkan kode atau membaca penjelasan “membosankan” yang kami lupa dalam dua menit. (Ngomong -ngomong, saya punya satu di sini!)

Jangan khawatir, posting ini tidak akan membosankan, karena saya terutama fokus pada contoh yang sebenarnya, melainkan kasus penggunaan sudut yang akan menjadi bentuk yang tidak teratur. Berikut adalah angka yang menggambarkan contoh kurva Bézier.

Dot biru adalah titik awal dan titik akhir (kami menyebutnya A dan B), sedangkan titik hitam adalah titik kontrol. Dan perhatikan bahwa kurva bersinggungan dengan garis putus -putus yang ditunjukkan dengan warna merah.

Dalam artikel ini, saya hanya akan mempertimbangkan satu titik kontrol. Sintaks akan mengikuti pola berikut:

clip-path: shape(
  from Xa Ya, 
  curve to Xb Yb with Xc Yc
);

arc Perintah dan curve Memesan

Kami telah melihatnya di bagian 1 dan bagian 2 arc Perintah berguna untuk membuat tepi dan sudut melingkar, tetapi tidak semua kasing tertutup. Itulah mengapa Anda membutuhkan curve Memesan. Bagian yang sulit adalah mengetahui kapan harus menggunakan semua orang, dan jawabannya adalah “tergantung”. Tidak ada aturan umum, tetapi saran saya adalah terlebih dahulu melihat apakah mungkin (mudah) untuk digunakan arc. Jika tidak, maka Anda harus menggunakan curve.

Untuk beberapa bentuk kita dapat menggunakan dua perintah ini untuk mendapatkan hasil yang sama, yang merupakan titik awal yang baik bagi kita untuk memahami perintah curve Perintah dan bandingkan arc.

Ambil contoh berikut:

Ini kode untuk bentuk pertama:

.shape {
  clip-path: shape(from 0 0,
    arc to 100% 100% of 100% cw,
    line to 0 100%)
}

Untuk yang kedua, kami memiliki:

.shape {
  clip-path: shape(from 0 0,
    curve to 100% 100% with 100% 0,
    line to 0 100%)
}

ini arc Perintah itu membutuhkan jari -jari (100% Dalam hal ini), bagaimanapun curve Perintah membutuhkan titik kontrol (ya 100% 0 dalam contoh ini).

Sekarang, jika Anda melihat lebih dekat, Anda akan melihat bahwa kedua hasilnya tidak persis sama. Gunakan bentuk pertama arc Perintah ini membuat seperempat lingkaran, menggunakan curve Perintahnya sedikit berbeda. Jika Anda menempatkan keduanya di atas satu sama lain, Anda dapat dengan jelas melihat perbedaannya.

Ini menarik karena itu berarti kita dapat menggunakan siapa saja arc atau a curvetetapi hasilnya sedikit berbeda. Mana yang lebih baik, Anda bertanya? Saya akan mengatakan itu tergantung pada preferensi visual Anda dan bentuk yang Anda buat.

Di Bagian 1, kami menggunakan arc Perintah, tapi kita bisa menggunakannya curve.

Bisakah Anda menemukan bedanya? Hampir tidak terlihat, tetapi di sana.

Perhatikan bagaimana saya menggunakannya by Perintahnya sama dengan cara saya arctetapi kali ini kami memiliki titik kontrol, yang juga relatif. Bagian ini bisa membingungkan, jadi awasi yang berikutnya.

Pertimbangkan yang berikut:

shape(from Xa Ya, curve by Xb Yb with Xc Yc)

Ini berarti (Xb,Yb) Dan (Xc,Yc) Ini adalah koordinat relatif yang dihitung dari koordinat titik awal. Gunakan yang setara di atas to Perintahnya adalah:

shape(from Xa Ya, curve to (Xa + Xb) (Ya + Yb) with (Xa + Xc) (Yb + Yc))

Kita dapat mengubah referensi titik kontrol dengan menambahkan satu from menginstruksikan. Kita bisa menggunakannya start (nilai default), endatau origin.

shape(from Xa Ya, curve by Xb Yb with Xc Yc from end)

Di atas berarti bahwa titik kontrol sekarang akan mempertimbangkan titik akhir daripada titik awal. Hasilnya mirip dengan:

shape(from Xa Ya, curve to (Xa + Xb) (Ya + Yb) with (Xa + Xb + Xc) (Ya + Yb + Yc))

Jika Anda menggunakannya originreferensi akan menjadi asal, sehingga koordinat titik kontrol lebih absolut daripada relatif.

ini from Arahan dapat menambah kompleksitas pada kode dan perhitungan, jadi jangan ganggu diri sendiri. Ketahuilah itu ada untuk berjaga -jaga, tetapi tetap menggunakan nilai default.

Saya pikir sudah waktunya melakukan pekerjaan rumah pertama Anda! Mirip dengan latihan meja melingkar, cobalah untuk membuat bentuk jari -jari terbalik yang kami gunakan di Bagian 1 curve Alih-alih arc. Ini adalah dua versi untuk referensi Anda, tetapi jika Anda dapat mencoba melakukannya tanpa mengintip terlebih dahulu.

Mari kita gambar lebih banyak bentuk!

Sekarang kami memiliki gambaran yang baik curve Perintah, mari kita pertimbangkan bentuk yang lebih kompleks arc Ini tidak akan membantu kami melewati sudut -sudut, satu -satunya solusi adalah menggambar kurva. Mempertimbangkan bahwa setiap bentuk itu unik, saya akan fokus pada teknologi, bukan pada kode itu sendiri.

Tepi miring

Mari kita mulai dengan bentuk persegi panjang dengan tepi miring.

Mendapatkan bentuk di sebelah kiri sangat sederhana, tetapi bentuk di sebelah kanan agak rumit. Kita bisa menggunakan sederhana border-radiustetapi untuk tepi miring yang akan kami gunakan shape() dan dua curve Memesan.

Langkah pertama adalah menulis kode untuk bentuk tanpa sudut bulat (sudut kiri), yang sederhana karena kami hanya menggunakan line Memesan:

.shape {
  --s: 90px;  /* slant size */

  clip-path: 
    shape(from 0 0,
    line to calc(100% - var(--s)) 0,
    line to 100% 100%,
    line to 0 100%
    );
}

Kemudian, kami pergi di setiap sudut, mencoba melampirkannya dengan memodifikasi kode. Berikut adalah nomor yang menggambarkan teknologi yang ingin saya gunakan di setiap sudut.

Kami mendefinisikan jarak, RKontrol jari -jari. Dari setiap sisi titik sudut, saya bergerak sepanjang jarak itu untuk membuat dua titik baru, dengan contoh merah di atas. Lalu, saya menggambar milik saya curve Ambil titik baru sebagai titik awal dan titik akhir. Titik sudut akan menjadi titik kontrol.

Kode menjadi:

.shape {
  --s: 90px;  /* slant size */

  clip-path: 
    shape(from 0 0,
    Line  to Xa Ya,
    curve to Xb Yb with calc(100% - var(--s)) 0,
    line to 100% 100%,
    line to 0 100%
    );
}

Perhatikan bagaimana curve Koordinat titik sudut digunakan with Instruksi, kami memiliki dua A dan B. baru

Sejauh ini, teknologinya tidak rumit. Untuk setiap titik sudut, Anda mengganti line Memesan line + curve Dimana perintahnya curve Perintah itu diulangi di titik lama with menginstruksikan.

Jika kami menerapkan logika yang sama ke sudut lain, kami akan mendapatkan yang berikut:

.shape {
  --s: 90px;  /* slant size */

  clip-path: 
    shape(from 0 0,
    line  to Xa Ya, 
    curve to Xb Yb with calc(100% - var(--s)) 0,
    line  to Xc Yc,
    curve to Xd Yd with 100% 100%,
    line to 0 100%
    );
}

Sekarang, kita perlu menghitung koordinat poin baru. Ini adalah bagian yang rumit karena tidak selalu sederhana dan mungkin memerlukan beberapa perhitungan yang kompleks. Bahkan jika saya menjelaskan tentang hal ini, logikanya juga berbeda untuk bentuk lain yang kami buat, jadi saya akan melewatkan bagian matematika dan memberi Anda kode akhir:

.box {
  --h: 200px; /* element height */
  --s: 90px;  /* slant size */
  --r: 20px;  /* radius */
  
  height: var(--h);
  border-radius: var(--r) 0 0 var(--r);
  --_a: atan2(var(--s), var(--h));
  clip-path: 
    shape(from 0 0,
    line  to calc(100% - var(--s) - var(--r)) 0,
    curve by calc(var(--r) * (1 + sin(var(--_a)))) 
              calc(var(--r) * cos(var(--_a)))
    with var(--r) 0,
    line  to calc(100% - var(--r) * sin(var(--_a))) 
              calc(100% - var(--r) * cos(var(--_a))),
    curve to calc(100% - var(--r)) 100%  with 100% 100%,
    line to 0 100%
    );
}

Saya tahu kodenya terlihat agak menakutkan, tetapi kabar baiknya adalah menggunakan variabel CSS, kodenya juga mudah dikendalikan. Jadi, bahkan jika matematika tidak mudah dikuasai, Anda tidak harus menghadapinya. Perlu dicatat bahwa saya perlu mengetahui ketinggian koordinat yang dapat menghitung, yang berarti solusinya tidak sempurna karena ketinggiannya adalah nilai tetap.

Kotak panah

Ini adalah bentuk yang sama, tetapi kali ini kami memiliki tiga sudut untuk digunakan curve Memesan.

Kode akhir masih rumit, tetapi saya mengikuti langkah yang sama. Saya akan mulai dari sekarang:

.shape {
  --s: 90px; 

  clip-path: 
    shape(from 0 0,
    /* corner #1 */
    line to calc(100% - var(--s)) 0,
    /* corner #2 */
    line to 100% 50%,
    /* corner #3 */
    line to calc(100% - var(--s)) 100%,

    line to 0 100%
    );
}

Lalu saya memodifikasinya menjadi:

.shape {
  --s: 90px; 

  clip-path: 
    shape(from 0 0,
    /* corner #1 */
    line  to Xa Ya
    curve to Xb Yb with calc(100% - var(--s)) 0,
    /* corner #2 */
    line  to Xa Ya
    curve to Xb Yb with 100% 50%,
    /* corner #3 */
    line  to Xa Yb
    curve to Xb Yb with calc(100% - var(--s)) 100%,

    line to 0 100%
    );
}

Akhirnya, saya menggunakan pena dan kertas untuk melakukan semua perhitungan.

Anda mungkin berpikir bahwa jika Anda tidak pandai matematika dan geometri, maka teknik ini tidak berguna, bukan? Tidak demikian, karena Anda masih dapat mengambil kode dan menggunakannya dengan mudah, karena dioptimalkan dengan variabel CSS. Juga, Anda tidak memiliki kewajiban untuk menjadi super akurat dan akurat. Anda dapat mengandalkan teknik yang disebutkan di atas dan menggunakan coba -coba untuk memperkirakan koordinat. Ini bisa membutuhkan waktu lebih sedikit daripada menyelesaikan semua matematika.

Poligon melingkar

Saya tahu Anda menunggu ini, bukan? Terima kasih untuk yang baru shape() Dan curve Perintah, kita sekarang dapat memiliki bentuk poligon melingkar!

Berikut adalah implementasi saya menggunakan SASS di mana Anda dapat mengontrol rotasi jari -jari, jumlah sisi dan bentuknya:

Jika kita menghilangkan bagian geometris yang kompleks, loopnya sangat sederhana karena tergantung pada teknik yang sama line + curve Setiap sudut.

$n: 9; /* number of sides*/
$r: .2; /* control the radius [0 1] */
$a: 15deg; /* control the rotation */

.poly {
  aspect-ratio: 1;
  $m: ();
  @for $i from 0 through ($n - 1) {
    $m: append($m, line  to Xai Yai, comma);
    $m: append($m, curve to Xbi Ybi with Xci Yci, comma);
  } 
  clip-path: shape(#{$m});
}

Berikut adalah implementasi lain dari saya yang mendefinisikan variabel di CSS, bukan Sass:

Memiliki variabel di CSS sangat nyaman, terutama jika Anda ingin memiliki beberapa animasi. Berikut adalah contoh efek hover keren yang cocok untuk bentuk heksagonal:

Saya juga memperbarui generator online saya untuk menambahkan parameter radius. Jika Anda tidak terbiasa dengan Sass, Anda dapat dengan mudah menyalin kode CSS dari sana. Anda juga akan menemukan versi-hanya dan memotong versi!

sebagai kesimpulan

Kami sudah selesai curve Memesan? Mungkin tidak, tetapi kami memiliki gambaran yang baik tentang potensinya dan semua bentuk kompleks yang dapat kami gunakan. Adapun kode, saya tahu kami telah mencapai level yang tidak mudah. Saya bisa memperluas deskripsi dengan menguraikan matematika secara eksplisit shape() Lebih sulit dari sebelumnya.

Yang mengatakan, sebagian besar bentuk kode saya terus diperbarui dan dioptimalkan dalam koleksi online saya, sehingga Anda dapat dengan mudah mendapatkan kode untuk bentuk apa pun!

Jika Anda ingin menindaklanjuti artikel ini dengan baik, saya menulis artikel untuk Master Frontend curve Memesan.