Cara Membuat Kecerunan CSS Conic untuk Carta Pai dan banyak lagi-tutorial css-php.cn

Cara Membuat Kecerunan CSS Conic untuk Carta Pai dan banyak lagi

Takeaways Key

Lebih banyak laman web menggunakan kecerunan dalam satu cara atau yang lain. Sesetengah laman web menggunakannya untuk komponen navigasi, sementara yang lain menggunakannya dalam elemen seperti butang, atau dengan imej untuk membuat beberapa kesan yang bagus.

Semua penyemak imbas mempunyai sokongan untuk kecerunan linear dan radial CSS asas untuk masa yang lama sekarang. Kecerunan CSS: Artikel Kursus Kemalangan Sintaks di Sitepoint memberi anda ringkasan ringkas sintaks yang diperlukan untuk mencipta kecerunan linear dan radial, serta cara menggunakan kecerunan berulang untuk membuat beberapa corak asas, yang bagus jika anda peduli dengan prestasi web dan cuba mengelakkan menggunakan imej apabila mungkin.

Selepas kecerunan linear dan radial, pelayar kini perlahan -lahan mula menyokong kecerunan Conic, yang pertama kali diperjuangkan oleh Lea Verou.

Dalam artikel ini, anda akan belajar tentang sintaks, kegunaan, dan sokongan penyemak imbas untuk kecerunan konik mudah dan mengulangi kecerunan konik.

Apakah kecerunan konik?

kecerunan conic dan radial adalah sama dalam erti kata bahawa kedua -dua mereka bermula dari titik yang ditentukan atau lalai sebagai pusat bulatan yang digunakan untuk menariknya. Perbezaan antara kedua-duanya ialah, dalam kes kecerunan radial, henti-henti warna diletakkan di sepanjang garis radial, manakala dalam kes kecerunan konik, warna berhenti diletakkan di sepanjang lilitan bulatan.

Kedudukan warna-henti untuk kecerunan conic boleh ditentukan sama ada dari segi peratusan atau dari segi darjah. Nilai 0% atau 0DEG merujuk kepada bahagian atas kecerunan konik. Nilai terus meningkat secara beransur -ansur apabila anda bergerak mengikut arah jam. Nilai 360Deg bersamaan dengan 0DEG. Mana-mana warna yang nilai berhenti warna lebih besar daripada 100% atau 360deg tidak akan ditarik pada kecerunan konik tetapi ia masih akan menjejaskan pengagihan warna.

Imej berikut menunjukkan kecerunan konik yang bermula dengan warna kuning dan berakhir dengan oren.

Cara Membuat Kecerunan CSS Conic untuk Carta Pai dan banyak lagi

sukar untuk tidak melihat peralihan tajam yang memisahkan oren pada 360deg dari kuning pada 0DEG. Ingatlah bahawa kecerunan conic sentiasa menghasilkan peralihan ini apabila warna permulaan dan akhir kecerunan conic sangat berbeza. Salah satu cara untuk mengelakkannya ialah menetapkan warna permulaan dan berakhir dengan nilai yang sama.

sintaks untuk kecerunan conic

kecerunan conic membolehkan anda menentukan sudut permulaan mereka serta kedudukan pusat mereka. Apabila nilai -nilai ini ditinggalkan, sudut mungkir kepada sifar dan kedudukan mungkir ke pusat. Inilah sintaks untuk kecerunan konik:

<span>conic-gradient([ from <angle> ]? [ at <position> ]?,  <angular-color-stop-list>)</span>

Salin selepas log masuk

Sudut warna-henti untuk warna pertama dan terakhir diandaikan masing-masing 0Deg dan 360deg, jika tidak ditentukan. Kecerunan conic kuning-oren dari bahagian sebelumnya boleh dibuat menggunakan mana-mana versi berikut:

<span>background: conic-gradient(from 0deg at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at 50% 50%, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(from 0deg, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow, orange);</span>

Salin selepas log masuk

Daripada menggunakan darjah, anda juga boleh menggunakan peratusan. Seperti yang telah saya sebutkan tadi, nilai 100% adalah sama dengan 360deg. Jadi nilai 50% akan sama dengan 180deg. Sekiranya anda tahu apa bahagian bulatan yang anda mahu tutup dengan warna tertentu, menggunakan peratusan mungkin lebih mudah. Begitu juga, kedudukan pusat kecerunan konik juga boleh ditentukan dari segi peratusan. Mana -mana nilai kecerunan konik di atas akan menghasilkan hasil berikut:

lihat pena membuat kecerunan konik oleh sitepoint (@sitePoint) pada codepen.

Tidak semua pelayar menyokong kecerunan Conic pada masa ini, jadi saya akan memasukkan imej rujukan dengan setiap contoh untuk menunjukkan hasil akhir yang sepatutnya kelihatan seperti.

penggunaan kecerunan konik

Anda boleh menggunakan kecerunan konik untuk mencipta pelbagai jenis roda warna. Sebagai contoh, demo berikut menggunakan warna pelangi dalam kecerunan conic untuk mencipta roda pelangi.

<span><span>.wheel</span> {
</span>  <span>background: conic-gradient(from 90deg, violet, indigo,  blue, green, yellow, orange, red, violet);
</span>  <span>border-radius: 50%;
</span><span>}</span>

Salin selepas log masuk

Perhatikan bagaimana saya telah menetapkan kedua -dua warna permulaan dan akhir kecerunan konik kepada Violet untuk mengelakkan peralihan secara tiba -tiba.

Lihat pena membuat kecerunan konik - Rainbow Wheel oleh Sitepoint (@SitePoint) pada Codepen.

menggunakan kecerunan CSS conic untuk carta pai

Satu lagi manfaat kecerunan Conic adalah keupayaan untuk membuat carta pai dengan mudah. Proses untuk membuat carta pai sebenarnya sangat mudah. Apa yang anda perlu lakukan ialah memberikan beberapa nilai berhenti warna keras untuk warna yang berbeza. Setiap warna kecerunan boleh diberikan sudut permulaan dan akhir. Apabila nilai sudut permulaan untuk warna seterusnya adalah kurang daripada atau sama dengan nilai sudut akhir untuk warna semasa, mereka akan memaparkan dalam perubahan warna yang sangat tajam dan segera yang mengakibatkan pembentukan sektor yang berbeza.

Terdapat dua cara untuk menentukan nilai-nilai berhenti warna ini. Yang pertama adalah untuk sentiasa menetapkan sudut permulaan untuk setiap warna menjadi sifar.

Kaedah kedua adalah untuk menetapkan sudut permulaan warna seterusnya sama dengan sudut akhir warna sebelumnya.

apa yang akhirnya anda memutuskan untuk lakukan adalah perkara keutamaan.

Coretan kod berikut menunjukkan nilai kecerunan konik untuk kedua -dua kaedah ini bersebelahan untuk perbandingan:

<span>conic-gradient([ from <angle> ]? [ at <position> ]?,  <angular-color-stop-list>)</span>

Salin selepas log masuk

Anda boleh menghilangkan sudut permulaan untuk warna pertama dan sudut akhir anda untuk warna terakhir anda kerana ia akan ditetapkan kepada 0% dan 100% masing -masing secara lalai:

Lihat pena membuat kecerunan konik - carta pai oleh SitePoint (@SitePoint) pada codepen.

menggunakan kecerunan CSS conic untuk membuat carta donat

Mewujudkan carta donat hanyalah satu perkara yang memohon kecerunan radial tambahan pada elemen anda dengan hentian warna keras. Warna dalaman kecerunan radial boleh ditetapkan ke putih dan bahagian luar boleh dibuat telus.

<span>background: conic-gradient(from 0deg at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at 50% 50%, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(from 0deg, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow, orange);</span>

Salin selepas log masuk

Lihat pena membuat kecerunan konik - carta donat oleh SitePoint (@SitePoint) pada codepen.

mengulangi kecerunan conic

Kecerunan konik yang mengulangi menerima semua nilai yang sama sebagai kecerunan konik biasa. Satu -satunya perbezaan adalah bahawa kali ini ia akan terus mengulangi sendiri sehingga keseluruhan 360 darjah telah dilindungi. Anda boleh menggunakan pengulangan ini untuk membuat beberapa corak imej biasa yang sebelum ini memerlukan penggunaan imej.

Anda boleh mengubah suai carta pai dengan mudah untuk membuat latar belakang seperti Starburst. Apa yang anda perlu lakukan ialah menggunakan gradien berulang-konik dan mengurangkan lebar setiap segmen warna dengan jumlah yang sesuai.

<span>conic-gradient([ from <angle> ]? [ at <position> ]?,  <angular-color-stop-list>)</span>

Salin selepas log masuk

Begitu juga, anda boleh membuat corak papan semak dengan mudah dengan menetapkan lebar setiap sektor menjadi 25% dan menetapkan saiz latar belakang.

Imej berikut menunjukkan bagaimana memperluaskan kecerunan konik dengan empat sektor 90 darjah di atas kawasan segi empat tepat atau persegi boleh membuat papan semak:

Berikut adalah CSS untuk membuat corak papan semak:

<span>background: conic-gradient(from 0deg at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at 50% 50%, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(from 0deg, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow, orange);</span>

Salin selepas log masuk

Lihat pena mengulangi kecerunan konik - papan semak oleh SitePoint (@SitePoint) pada codepen.

anda boleh membuat lebih banyak corak dengan mengubah saiz sektor yang berbeza serta mengubah dari sudut untuk kecerunan.

sokongan penyemak imbas dan polyfills

Pada masa menulis artikel ini, kecerunan Conic disokong dalam Chrome 59 dan Opera 46 di belakang bendera "Ciri -ciri Platform Web Eksperimen". Tiada pelayar lain yang menyokong standard baru ini, sama ada secara lalai atau di belakang beberapa bendera. Ini bermakna anda perlu menunggu sedikit sebelum ada sokongan penyemak imbas yang cukup.

Walau bagaimanapun, anda boleh mula menggunakan kecerunan CSS conic hari ini dengan bantuan CSS conic-gradient () polyfill yang dibuat oleh Lea Verou. Terdapat juga plugin kecerunan Conic PostCSS yang secara automatik menambah sandaran kecerunan conic ke fail CSS anda.

Pemikiran Akhir

Tutorial ini menunjukkan kepada anda cara membuat carta pai dan donat menggunakan kecerunan konik. Selepas itu, anda belajar bagaimana untuk membuat corak latar belakang yang berbeza menggunakan CSS hanya dengan bantuan mengulangi kecerunan konik. Sebaik sahaja sokongan penyemak imbas cukup baik, anda tidak lagi perlu bergantung pada perpustakaan atau imej yang besar untuk menyelesaikan tugas -tugas ini.

Untuk mengetahui lebih lanjut mengenai kecerunan konik, jangan terlepas sumber -sumber ini:

Bolehkah anda mencadangkan sebarang kegunaan unik untuk kecerunan conic di web? Beritahu kami dalam komen.

Soalan Lazim (Soalan Lazim) Mengenai Kecerunan CSS Conic dan Carta Pai

Apakah kepentingan nilai stop warna dalam kecerunan conic CSS? Ia dinyatakan sebagai peratusan atau sudut. Sebagai contoh, nilai berhenti warna 25% atau 90deg bermakna warna akan berakhir pada satu perempat daripada bulatan atau pada 90 darjah masing-masing. Memanipulasi nilai -nilai ini membolehkan anda membuat kesan kecerunan yang unik.

Bagaimana saya boleh membuat peralihan yang lancar antara warna dalam kecerunan konik?

Untuk mewujudkan peralihan yang lancar antara warna dalam kecerunan conic, anda boleh menggunakan pelbagai nilai berhenti warna. Dengan meletakkan warna berhenti bersama, anda boleh membuat peralihan yang lancar dan beransur-ansur antara warna. Semakin dekat dengan warna, yang lebih lancar peralihan akan. Bagaimanakah? Dengan menetapkan nilai berhenti warna yang berbeza, anda boleh membuat bahagian warna yang berbeza yang menyerupai carta pai. Anda kemudian boleh menggunakan bahagian ini untuk mewakili titik data yang berbeza.

Kenapa kecerunan konik saya tidak memaparkan dengan betul dalam beberapa pelayar? Sebagai contoh, Internet Explorer dan beberapa versi Microsoft Edge tidak menyokong mereka. Untuk memastikan kecerunan anda dipaparkan dengan betul di semua penyemak imbas, pertimbangkan untuk menggunakan warna latar belakang balik atau polyfill. Kecerunan yang memancar di sekitar titik tengah, kecerunan radial CSS mewujudkan kecerunan yang memancarkan dari titik tengah. Untuk mewujudkan kecerunan radial, anda akan menggunakan fungsi radial-gradien () dan bukannya fungsi conic-gradient (). boleh menggunakan pembolehubah CSS dengan kecerunan konik. Ini membolehkan anda membuat gaya yang lebih dinamik dan fleksibel. Anda boleh menentukan pemboleh ubah CSS dengan nilai tertentu dan kemudian menggunakan pembolehubah itu dalam kecerunan konik anda. Animasi atau peralihan CSS. Sebagai contoh, anda boleh menghidupkan putaran kecerunan, atau menghidupkan nilai-nilai berhenti warna untuk mencipta kecerunan yang berubah dari masa ke masa. > Ya, anda boleh menggunakan warna telus dalam kecerunan CSS conic. Ini boleh mewujudkan kesan visual yang menarik, seperti kecerunan yang memudar ke dalam ketelusan. Fungsi Conic-Gradient (). Ini membolehkan anda membuat corak kecerunan yang mengulangi di sekeliling bulatan. Sebagai contoh, anda boleh menggunakan kecerunan konik sebagai latar belakang elemen teks, dan kemudian memohon sifat CSS yang lain untuk teks itu, seperti warna, saiz fon, dan bayang-bayang teks.

Atas ialah kandungan terperinci Cara Membuat Kecerunan CSS Conic untuk Carta Pai dan banyak lagi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!