Alvaro Montoro Presents: Seronok dengan Bendera… dengan CSS

Dalam artikel ini, kami akan menyemak kecerunan CSS dengan mencipta bendera yang berbeza menggunakan satu elemen HTML untuk setiap satu daripadanya. Sebagai sebahagian daripada pengalaman, kami juga akan menyemak ::before dan ::after pseudo-elements dan sifat clip-path.

Kami akan mengekodkan bendera mudah dan mengelakkan pengekodan jata kerana ia akan menjadi sukar dalam CSS. Ia tidak mustahil, tetapi ia juga bukan tugas yang patut dilakukan. Gunakan SVG untuk itu.

Saya menggunakan halaman Wikipedia untuk bendera yang berbeza untuk mendapatkan dimensi, saiz, kedudukan dan warna. Saya memohon maaf terlebih dahulu jika terdapat sebarang kesilapan.

Menetapkan Pentas

Mari kita mulakan dengan menambah apa yang akan menjadi kod HTML bendera kita, dan beberapa penggayaan biasa:

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

Berikut ialah penjelasan ringkas tentang perkara yang mereka lakukan:

• display: inline-grid: Ini akan merawat elemen (hampir) seperti imej dan memaparkannya sejajar dengan teks. Menggunakan inline-flex atau inline-grid akan memberikan kemungkinan penjajaran yang lebih berkuasa.
• ketinggian: 1em: Bendera yang berbeza mempunyai saiz yang berbeza. Dengan menetapkan ketinggian tetap, kami boleh menambah sifat nisbah aspek untuk menjana lebar yang sesuai, sambil mengekalkan semua bendera dengan ketinggian yang konsisten.
• position: relative: Jika kita memerlukan pseudo-element, ia mungkin memerlukan kedudukan mutlak dan kita mahu menjadikan bendera kita sebagai titik rujukan untuk kedudukan mutlak tersebut.
• limpahan: tersembunyi: Jika unsur pseudo melimpahi bekas atas sebarang sebab, kami mahu menyembunyikan limpahan daripada pandangan.
• penjajaran menegak: atas: meletakkan bendera sejajar dengan teks akan menjadikannya kelihatan lebih bagus, kerana penjajarannya akan menjadi "lebih semula jadi".

Sesetengah daripada ini adalah terlalu kejuruteraan –ya, anda boleh terlalu kejuruteraan CSS– kerana kebanyakan bendera tidak memerlukannya. Terutamanya yang akan kami kodkan dalam artikel ini… tetapi akhirnya anda akan menemui beberapa yang memerlukan sifat, dan mengapa tidak mempunyainya terus dalam kelas, dan bukannya perlu menambahkannya secara individu beberapa kali?

---

Kecerunan Linear

Kecerunan linear mencipta peralihan warna progresif dalam satu arah (di sepanjang garis, dengan itu namanya). Secara lalai, arahnya menegak dari atas ke bawah, yang menjadikan pembuatan bendera menjadi mudah.

Poland

Mari kita mulakan dengan bendera Poland. Ia mempunyai dua warna yang menduduki ketinggian yang sama: bahagian atas berwarna putih, dan bahagian bawah berwarna merah. Ini ialah salah satu kecerunan paling mudah yang anda akan temui.

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

Kecerunan ini menetapkan warna putih sebagai warna dari atas sehingga mencapai 50% (separuh bendera), dan kemudian ia bertukar kepada merah, yang bermula pada 50% juga.

Kami juga menambah nisbah bidang: 8 / 5; kerana itu adalah bahagian rasmi untuk bendera Poland (5:8). Jangan teragak-agak untuk mengabaikan sifat itu dalam contoh berikut, tetapi ingat untuk menambahnya atau bendera tidak akan mempunyai lebar dan tidak akan kelihatan!

---

Jerman

Kecerunan CSS tidak terhad kepada dua warna, ia boleh mempunyai seberapa banyak yang anda mahu –tetapi perhatikan bahawa sesetengah penyemak imbas mungkin tidak memaparkan kecerunan dengan betul jika terdapat terlalu banyak warna.

Salah satu contoh perkara ini ialah bendera Jerman, di mana kita akan mempunyai tiga warna dari atas ke bawah:

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

Kami sengaja membuat tatatanda contoh ini berbilang baris dan lebih panjang. Perhatikan bagaimana kami menambah dua nilai selepas nilai. Ia adalah hentian permulaan dan akhir untuk setiap warna masing-masing. Dalam contoh di atas, hitam akan bermula dari atas (0%) dan pergi ke satu pertiga daripada bendera (33.33%), merah akan bermula terus selepas (33.33%) dan pergi ke dua pertiga daripada bendera (66.66% ), dan akhirnya, kuning akan bermula terus selepas 66.66% dan pergi ke bahagian bawah bendera (100%). Dalam kes bendera, nilai permulaan akhir dan seterusnya akan sepadan, tetapi jika tidak, penyemak imbas akan menukar warna secara berperingkat.

Memandangkan warna pertama akan bermula pada 0, dan yang terakhir akan berakhir pada 100% secara lalai, kami boleh menghapuskan nilai tersebut daripada kecerunan linear. Selain itu, sebarang nilai permulaan yang lebih rendah daripada penghujung sebelumnya akan menyebabkan perhentian mendadak antara warna. Kami mahu itu untuk bendera kami dan tidak mahu menaip terlalu banyak, jadi kami hanya boleh meletakkan nilai terendah yang kami boleh untuk nilai permulaan: 0% atau hanya 0. Dengan cara itu, CSS di atas akan dikurangkan kepada sesuatu yang menghasilkan hasil yang serupa, tetapi itu jauh lebih pendek:

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

---

Belgium

Membosankan –dan tidak berguna– jika kita hanya boleh menjana kecerunan linear menegak. Terdapat cara untuk menukar arah kecerunan akan dilukis. Mari semak beberapa daripadanya:

• Menentukan arah dengan kata kunci: adakah anda mahu warna pergi dari kanan ke kiri? Tunjukkannya dengan kata kunci ke kiri sebelum senarai warna. Dari bawah ke atas? ke atas. Secara menyerong dari kiri bawah ke kanan atas? Gunakan di sebelah kanan atas. Ia sangat mudah!
• Menentukan sudut tindakan: mungkin sukar, tetapi ia menawarkan lebih banyak kemungkinan daripada pilihan sebelumnya. Anda boleh memilih mana-mana arah dengan menunjukkan sudut tindakan, bukannya terhad kepada lapan. Dalam kes ini, 0deg akan dari bawah ke atas, 90deg akan kiri-ke-kanan, 180deg atas-bawah dan 270deg (atau -90deg) akan menjadi kanan-ke-kiri.

Mari kita ambil bendera Belgium sebagai contoh. Warna tidak disusun secara menegak tetapi secara mendatar: hitam, kuning dan merah masing-masing dari kiri ke kanan. Kita boleh mencapai ini dalam sekurang-kurangnya dua cara berbeza:

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

---

Kecerunan Jejari

Kecerunan jejari mencipta peralihan warna progresif dari satu titik asal ke semua arah, menghasilkan kesan jejarian yang kelihatan seperti elips warna (atau bulatan jika sisinya sama). Secara lalai, titik itu ialah pusat mutlak elemen –mendatar dan menegak.

Beberapa perkara penting yang perlu diambil kira:

• Ia menjana elips, bukan bulatan. Jika bekas itu berbentuk segi empat tepat, ia akan kelihatan seperti elips. Jika bekas itu segi empat sama, ia akan kelihatan seperti bulatan. Terdapat kata kunci (bulatan) untuk menjamin bahawa bentuk yang terhasil adalah bulat dan bukan elips.
• Saiz elips berbeza mengikut bekas dan kedudukannya (lebih lanjut mengenai ini sebentar lagi). 0% akan menjadi titik asal dan 100% akan menjadi sudut paling jauh ke asal itu. Kita boleh menggunakan kata kunci (sebelah paling dekat, sebelah paling jauh, sudut paling hampir, dll.) untuk menukar ini.

Dengan pemikiran awal ini (dan kata kunci), mari buat beberapa bendera!

Jepun

Bendera Jepun ialah bulatan merah besar di tengah-tengah bendera putih. Ini ialah salah satu kecerunan jejari paling mudah yang boleh kami temui dan kami akan dapat menggunakan kata kunci bulatan yang kami semak sebelum ini, kerana bendera adalah segi empat tepat dan jika kami tidak menggunakannya, kami akan mendapat elips sebaliknya.

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

Kami menggabungkan kata kunci saiz bahagian paling hampir, dengan kata kunci bentuk bulatan untuk menjana bulatan yang 60% daripada ketinggian (kerana bahagian atas dan bawah lebih rapat daripada kiri dan kanan).

---

Bangladesh

Jika kita hanya boleh membuat bulatan dan elips daripada pusat elemen, kita boleh meniru beberapa bendera dengan CSS (cth. Laos atau Burundi). Namun, kami tidak dapat membangunkan orang lain dengan kalangan di luar pusat (mis. Costa Rica atau Ethiopia).

Kaedah radial-gradient() membolehkan kita menunjukkan titik asal kecerunan. Kami melakukannya dengan menggunakan di posX posY selepas kata kunci saiz dan bentuk (jika ada). Mari cuba buat bendera Bangladesh dengannya:

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

Apa yang berlaku apabila kita mula menggerakkan pusat kecerunan? Jarak ke sudut paling jauh berubah! Ini akan membawa kepada pengiraan trigonometri untuk melaraskan saiz dengan sewajarnya... atau sebaliknya, kami boleh mengenal pasti titik rujukan berbeza yang bukan sudut paling jauh (seperti bahagian paling hampir dalam kes ini).

Untuk mengelakkan ini, kami boleh menentukan saiz mutlak untuk lebar dan tinggi. Jika kita berbuat demikian, kita tidak akan dapat mengenal pasti sama ada ia bulatan atau elips kerana nilai mutlak tersebut akan menentukan bentuknya.

---

Kecerunan Kon

Kecerunan kon mencipta peralihan warna progresif daripada satu titik asal berputar mengelilinginya mengikut arah jam. Ia mungkin kedengaran rumit untuk digambarkan seperti itu, jadi saya lebih suka menggunakan contoh apabila saya menerangkannya kepada orang: bayangkan kecerunan linear biasa yang dicetak pada kertas (setakat ini, begitu baik); kini anda mengambil kertas itu, lipat satu sisi dan gulungkannya ke dalam kon (demikian namanya!) Angka yang terhasil akan kelihatan seperti kecerunan kon dari atas. Saya harap ia membantu.

Seperti kecerunan jejari, titik asal lalai kecerunan kon ialah pusat mutlak elemen. Juga sebagai kecerunan jejari, kita boleh menukar titik itu dengan menggunakan di posX posY.

Benin

Ini ialah bendera yang agak mudah untuk dibuat dengan kecerunan kon. Mula-mula, kita perlu meletakkan pusat pada 40% secara mendatar dan 50% secara menegak, kemudian nyatakan titik perhentian.

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

Seperti yang saya katakan, sekeping kek! Memandangkan tidak banyak perkara, berikut adalah fakta yang mungkin anda tidak tahu tentang bendera Benin: kuning melambangkan khazanah negara, merah melambangkan keberanian nenek moyang mereka, dan hijau melambangkan harapan demokrasi.

---

Republik Czech

Berdasarkan itu, mari kita lihat cara melukis bendera Republik Czech:

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

Ini berfungsi dengan baik, tetapi perhatikan cara kami menggunakan #fff dua kali. Alangkah bagusnya jika kita boleh menggunakannya sekali sahaja? Seperti yang anda duga, jawapannya ialah kita boleh! Kecerunan kecerunan tidak semestinya perlu bermula dari 0deg. Kita boleh menentukan kedudukan permulaan menggunakan dari [sudut].

Sebagai contoh, katakan kita mahu bermula dari warna merah:

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

Sudut boleh menjadi nilai positif atau negatif, kemudian kami akan menggerakkan titik permulaan mengikut arah jam atau lawan jam, masing-masing.

---

Menggabungkan Kecerunan

Kami telah mempelajari cara menggunakan kecerunan linear, jejari dan kon untuk menjana bendera yang agak mudah… tetapi kadangkala bendera boleh menjadi rumit dan kecerunan tunggal tidak berfungsi. Apa yang boleh kita lakukan dalam kes itu?

CSS membenarkan berbilang imej latar belakang (dan kecerunan) dalam elemen. Kita perlu memisahkan nilai mereka dengan koma. Memandangkan ia mungkin berlawanan dengan intuisi, satu perkara penting yang perlu diingat ialah latar belakang atas akan bertindih dan menyembunyikan latar belakang bawah.

Sweden

Bendera Sweden ialah salib kuning dengan latar belakang biru. Kita boleh menjana setiap bar kuning menggunakan kecerunan linear telus-kuning-telus:

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

Contoh ini mempunyai lebih daripada yang dapat dilihat: 

• Ia menunjukkan cara menggabungkan lebih daripada satu kecerunan –memisahkannya dengan koma.
• Ia menambah warna latar belakang. Perhatikan bagaimana warna akan sentiasa terakhir dalam senarai latar belakang. Jika anda meletakkannya di tempat lain dalam senarai, ia akan menjadi tidak sah dan tidak memaparkan sebarang latar belakang.
• Ia menggunakan unit mutlak. Kami telah menggunakan peratusan untuk kecerunan setakat ini, tetapi tiada sebab untuk tidak menggunakan unit lain apabila mudah.

---

Bahamas

Walaupun bendera sebelumnya menunjukkan berbilang kecerunan dalam tindakan, adalah tidak bagus untuk mempamerkan cara ia disusun kerana ia menggunakan ketelusan. Jadi, mari lihat contoh lain –Satu yang menggunakan berbilang kecerunan jenis yang berbeza.

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

Apabila menggabungkan latar belakang, anda tidak terhad kepada satu jenis kecerunan sahaja. Anda boleh menggunakan apa-apa jenis.

---

Menukar Saiz dan Kedudukan

Setakat ini, kami telah melihat kecerunan linear, jejari dan kon, serta cara ia boleh digabungkan. Tetapi dalam semua kes, kecerunan menduduki seluruh bendera. Sesetengah ketelusan mungkin tidak menjadikannya kelihatan seperti itu, tetapi saiz kecerunan sentiasa 100% daripada lebar dan tinggi.

Tetapi terdapat cara untuk menukar saiz kecerunan agar lebih sesuai dengan keperluan kita. Yang paling mudah ialah menentukan saiz latar belakang. Jika saiznya lebih kecil daripada bekas, latar belakang akan berulang (melainkan kami menggunakan sesuatu seperti background-repeat: tiada.)

Qatar

Mari kita semak contoh dengan bendera Qatar. Bendera mengulangi corak sembilan kali dan boleh direplikasi dengan mudah dengan kecerunan kon. Jika kami menentukan bahawa lebar kecerunan hendaklah 100% daripada bendera dan ketinggiannya satu per sembilan daripada ketinggian bendera, penyemak imbas akan mengulangi latar belakang sehingga bekas diisi, melengkapkan lukisan untuk kami.

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

---

Sweden... sekali lagi!

Sudah tentu, sebaik sahaja kami menentukan saiz, kami juga boleh menentukan kedudukan di mana kecerunan akan ditempatkan. Kami akan melakukannya dengan kedudukan latar belakang (dan di sinilah sifat ulangan latar belakang akan berguna).

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

Perhatikan bahawa kita tidak perlu menentukan saiz dan kedudukan untuk warna terakhir. Anda hanya boleh menetapkan satu yang akan menduduki keseluruhan bekas secara automatik.

Kami boleh memisahkan nilai imej latar belakang, saiz dan kedudukan dengan koma. Itu mudah apabila terdapat hanya beberapa daripada mereka, tetapi ia boleh menjadi sakit di leher jika kita mempunyai beberapa latar belakang. Mudah tersesat dan mencampurkan nilai.

Sebaliknya, kita boleh menggunakan bentuk pendek sifat latar belakang untuk menyediakan semua nilai sekaligus: latar belakang: kedudukan kecerunan / ulangan saiz, seperti ditunjukkan di bawah:

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

---

Kecerunan Berulang

Kami telah melihat kecerunan linear, jejari dan kon, tetapi setiap variasi membolehkan kami menambah "corak warna." Bendera sesuai untuk ini: banyak yang terdiri daripada garis mendatar berulang.

Saya bercakap tentang kecerunan berulang. Mereka berkelakuan sama seperti kecerunan biasa mereka mengulangi corak yang ditentukan sehingga mencapai 100% atau 360 darjah. Terdapat tiga kecerunan berulang:

• berulang-linear-gradient
• berulang-radial-gradient
• berulang-kon-kecerunan

Greece

Mari kita ambil bendera Yunani sebagai contoh. Kita boleh mempunyai 3 atau 4 kecerunan linear besar untuk mencapainya, atau kita boleh menggunakan tiga kecerunan linear berulang:

• Satu kecerunan linear berulang untuk menjana bahagian menegak salib (menggunakan lutsinar dan putih)
• Kecerunan linear berulang kedua untuk menjana bahagian mendatar salib (menggunakan biru dan putih)
• Satu kecerunan linear berulang terakhir untuk menarik sembilan palang di belakang.

Untuk mencapai pangkah di bahagian atas sebelah kiri, kita mesti menentukan kedua-dua kedudukan dan saiz untuk dua kecerunan linear pertama.

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(#000 33.33%, #f00 0 66.66%, #fc0 0);
}

---

Uganda

Bendera Uganda mempunyai kren bermahkota kelabu yang cantik yang kami tidak akan kodkan dalam CSS atas sebab praktikal. Kami akan menumpukan pada dua bahagian bendera yang lain: bulatan putih di tengah dan beberapa garisan mendatar berwarna hitam, kuning dan merah.

Gubahan ini boleh dicapai dalam dua cara berbeza:

• Menggunakan kecerunan-linear berulang yang menduduki keseluruhan ketinggian bendera; atau
• Dengan kecerunan linear tunggal yang hanya menduduki separuh daripada bendera, penyemak imbas akan mengulanginya secara automatik untuk mengisi ruang yang tinggal.

Pilihan pertama adalah seperti ini:

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

Pilihan kedua akan kelihatan seperti ini:

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

Tetapi kedua-dua pilihan akhirnya kelihatan sama. Adalah penting untuk diingat bahawa dalam CSS, seperti dalam gaya pengaturcaraan lain, biasanya terdapat lebih daripada satu cara untuk mencapai matlamat kami.

---

Menggunakan Pseudo-Elements

Istilah "bendera unsur tunggal" boleh mengelirukan. Semua elemen HTML bukan kosong termasuk –sekurang-kurangnya– dua elemen pseudo yang boleh kami gunakan untuk melukis juga: ::before dan ::after. Jadi kami benar-benar mempunyai tiga elemen yang boleh digayakan secara berasingan dan memberikan banyak kemungkinan:

• Lukisan yang memerlukan sedikit putaran. Satu had penggunaan latar belakang dalam CSS ialah ia tidak boleh diputar.
• Bentuk kompleks yang boleh mendapat manfaat daripada kuasa menggunakan jejari sempadan, laluan klip, topeng...
• Untuk menjadikan reka bentuk kelihatan lebih bersih: tepi laluan terpotong lebih licin daripada kecerunan.

Bahrain

Jika anda mengekodkan bendera Qatar menggunakan kecerunan seperti yang diterangkan di atas, anda mungkin perasan bahawa tepi segi tiga kecerunan kelihatan terlalu tajam dan hodoh pada sesetengah monitor. Terdapat banyak cara untuk menyelesaikannya, tetapi penyelesaian yang saya suka ialah menggunakan unsur pseudo dengan laluan klip untuk membuat garisan yang lebih lancar dan bersih.

Pilihan ini akan memudahkan kod berbanding menggunakan beberapa kecerunan linear dan helah perbezaan piksel yang dijelaskan dalam bahagian berikut.

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

Unsur pseudo dalam kes ini tidak perlu dihadkan kepada corak yang kompleks. Ambil contoh bendera Cuba, Bahamas, atau Jordan. Ia mempunyai segi tiga di sebelah kiri yang kami lukis menggunakan kecerunan kon. Kecerunan tersebut mempunyai masalah: tepi akan kelihatan terlalu keras atau berpixel pada monitor tertentu –terdapat helah untuk menyelesaikannya dengan kecerunan linear dalam bahagian berikut–. Sebaliknya, kita boleh mencipta segitiga dengan unsur pseudo (laluan poligon tiga titik) dan bahagian tepi akan kelihatan lebih licin. Serupa dengan bendera Bahrain di atas.

---

Panama

Saya mendapat anggaran titik titik bucu untuk bintang lima mata dan menggunakannya menggunakan laluan klip dalam ::sebelum dan ::selepas unsur pseudo. Ramai artis CSS akan mempertimbangkan untuk menggunakan penipuan laluan klip, dan bintang boleh dilukis dengan kecerunan kon. Tetapi untuk memudahkan, saya akan meninggalkannya sebagai laluan klip.

Menambah kecerunan kon sebagai latar belakang bendera dan bintang dalam unsur pseudo, kita boleh melukis bendera Panama dalam masa yang singkat:

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

---

Peringatan dan Petua

Menyusun Kecerunan

Ingat bahawa apabila anda menggabungkan latar belakang, ia akan disusun mengikut susunan yang disenaraikan. Ini bermakna, yang pertama akan berada di atas dan bertindih dengan yang di bawah, dan seterusnya.

Walaupun ia masuk akal dari perspektif reka bentuk, ia mungkin berlawanan dari sudut pandangan CSS, di mana lata menjadikan penampilan terakhir harta atau kelas diutamakan berbanding yang ditakrifkan sebelum ini.

Trik Perbezaan 1px

Dalam artikel itu, saya menyebut cara tepi kecerunan mungkin kelihatan terlalu tajam atau berpiksel. Ini berlaku kerana cara penyemak imbas memaparkan kecerunan –dan ia menjengkelkan, terutamanya kerana ia tidak berlaku untuk tepi henti-henti pada SVG.

Sebagai contoh, talian di sini mungkin tidak kelihatan hebat pada semua monitor:

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

Helah untuk mengelakkan perkara ini ialah menambahkan perbezaan piksel antara titik akhir dan titik permulaan seterusnya. Sama ada dengan menolak atau menambah 0.5px masing-masing daripada setiap satu atau, lebih mudah, hanya menolak/menambah 1px daripada salah satu daripadanya. Garisan ini akan kelihatan lancar pada semua monitor:

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

Jangan Lupakan 0 dalam Kecerunan Berulang

Kesilapan biasa apabila bekerja dengan kecerunan berulang ialah tidak menambah titik mula untuk warna pertama. Ini akan menyebabkan kecerunan kelihatan funky. Jika kecerunan berulang anda tidak berfungsi seperti yang diharapkan, sentiasa sahkan bahawa anda menambahkan 0 (atau apa-apa nilai) di sana!

Jangan Takut dengan Unsur Pseudo

Elemen pseudo boleh menakutkan pada mulanya, tetapi ia tidak lebih berbeza daripada elemen lain, ia hanya dilekatkan pada elemen HTML dengannya.

Jangan lupa untuk menambah sifat kandungan dengan nilai (rentetan kosong adalah perkara biasa apabila anda hanya mahu ia muncul). Jika tidak, unsur pseudo tidak akan kelihatan!

Clip-Path ialah Rakan Anda

Apabila melukis dalam CSS dan mencipta Seni CSS, ramai orang akan mendakwa bahawa menggunakan sifat laluan klip adalah menipu. Ia menjadikan perkara lebih mudah dan merupakan alat yang berguna dalam tali pinggang anda. Saya tidak akan membuangnya hanya kerana ia "menipu."

Ketahui cara menggunakan laluan klip –dan topeng!– Ia akhirnya akan berguna dalam projek.

Kesimpulan

Kini tiba masanya untuk anda berlatih kecerunan CSS. Sila cuba dan cuba buat semula beberapa bendera sendiri. Berikut ialah senarai negara dengan bendera yang bagus untuk diamalkan (diisihkan mengikut kerumitan):

• Monaco
• Yaman
• Emiriah Arab Bersatu
• Laos
• Iceland
• Republik Dominika (tanpa jata)
• Saint Lucia

Dan ingat: tidak ada cara unik untuk mengekodkan bendera. Setiap daripada mereka boleh dilakukan dalam pelbagai cara. Gunakan kecerunan yang anda lebih selesa atau tahu akan kelihatan terbaik.

Atas ialah kandungan terperinci Alvaro Montoro Presents: Seronok dengan Bendera… dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!