Meneroka Kekuatan Kreatif Penapis CSS dan Pengadunan

penapis CSS dan mod pengadunan: alat yang berkuasa untuk meningkatkan kesan visual web

mata teras

Penapis CSS menyediakan pelbagai kesan visual, seperti skala kelabu, kabur, kontras, kecerahan, dan tan, yang dapat meningkatkan daya tarikan visual kandungan laman web dan menggunakannya dalam kombinasi untuk mencapai kesan yang rumit.
mod campuran CSS membolehkan interaksi visual antara unsur -unsur untuk menghasilkan kesan yang luar biasa. Mod pengadunan yang biasa digunakan termasuk penyusunan positif, penapisan warna, overlaying, perbezaan dan pengecualian, dan lain -lain. Mereka mengendalikan nilai warna elemen bertindih dengan cara yang berbeza.
Apabila menggunakan penapis dan mod campuran, aksesibiliti dan keserasian penyemak imbas perlu dipertimbangkan. Kontras warna yang cukup, kejelasan teks, teks alternatif imej dan reka bentuk responsif adalah kunci untuk memastikan kandungan tersedia dan mudah difahami untuk pelbagai kumpulan pengguna.
Kesalahan umum dalam menggunakan penapis CSS dan mod pengadunan termasuk penapis yang berlebihan, memohon penapis kepada unsur -unsur interaktif tanpa mempertimbangkan interaksi pengguna, dan mengabaikan kesan prestasi penapis kompleks atau kombinasi. Mengimbangi penggunaan dan mengutamakan kejelasan membantu mengelakkan perangkap ini.
Penapis CSS dan mod campuran menyediakan kemungkinan kreatif yang tidak berkesudahan, yang membolehkan pemaju web membuat antara muka pengguna yang menarik dan dinamik. Mencuba kombinasi yang berbeza boleh menghasilkan kesan unik, menambah kecanggihan visual ke laman web.

Artikel ini akan meneroka penapis CSS dan mod campuran yang menawarkan pelbagai kemungkinan kreatif yang dapat meningkatkan keindahan laman web.

belajar dari penapis CSS

Penapis CSS menyediakan cara untuk menggunakan kesan visual pada elemen web. Kesan ini boleh terdiri daripada pelarasan mudah (seperti mengubah kecerahan atau kontras imej) kepada penukaran yang lebih kompleks (seperti kabur atau menambahkan nada tan).

mari kita menyelam beberapa penapis CSS yang biasa digunakan dan meneroka bagaimana mereka meningkatkan daya tarikan visual kandungan web.

1

Penapis menukar warna ke bayang -bayang kelabu, memberikan imej rupa monokromatik dan klasik. Anda boleh mengawal intensiti kesan dengan menyatakan peratusan:

grayscale()

<code class="language-html"><div class="image-container">
  <img src="https://img.php.cn/upload/article/000/000/000/173897569358040.jpg" alt="Exploring the Creative Power of CSS Filters and Blending ">
</div></code>

Dengan menambahkan

<code class="language-css">.image-container {
  width: 300px;
  filter: grayscale(100%);
}

.image-container img {
  width: 100%;
}</code>

ke bekas

, kami mengarahkan pelayar untuk menggunakan kesan kelabu kepada segala -galanya dalam bekas ini, termasuk imej. Akibatnya, imej yang dipaparkan dalam bekas akan dipaparkan dalam bayang -bayang kelabu dan bukannya warna asalnya. Dengan menetapkan harta <div> ke <code>filter: grayscale(), kami menunjukkan bahawa kami mahu menukar imej ke skala kelabu dengan intensiti penuh. filter grayscale(100%) CODEPEN Contoh

2

Penapis membuat kesan lembut dan fokus. Ini amat berguna untuk imej latar belakang atau elemen yang kita mahu melemahkan:

<code class="language-html"><div class="image-container">
  <img src="https://img.php.cn/upload/article/000/000/000/173897569358040.jpg" alt="Exploring the Creative Power of CSS Filters and Blending ">
</div></code>

di sini, kami mengarahkan penyemak imbas untuk memohon penapis kabur ke segala -galanya di dalam bekas ini, termasuk imej. Akibatnya, imej yang dipaparkan di dalam bekas akan mempunyai kesan yang lembut dari fokus, seolah-olah ia sedikit kabur. Dengan menetapkan blur(5px), kami menunjukkan bahawa kami mahu menggunakan kesan kabur kepada imej dengan radius kabur 5-piksel.

CODEPEN Contoh

3 Penapis

meningkatkan atau mengurangkan perbezaan antara kawasan cerah dan gelap dari elemen, menjadikannya lebih menarik secara visual: contrast()

<code class="language-css">.image-container {
  width: 300px;
  filter: grayscale(100%);
}

.image-container img {
  width: 100%;
}</code>

di sini, perbezaan antara kawasan cerah dan gelap imej dalam bekas akan ditingkatkan, menjadikannya lebih menarik secara visual. Dengan menetapkannya kepada

, kami mengatakan bahawa kami ingin meningkatkan kontras imej sebanyak 150%. contrast(150%)

CODEPEN Contoh

4

Penapis mengawal kecerahan keseluruhan elemen. Kecerahan yang meningkat dapat menjadikan warna lebih jelas, sementara kecerahan yang dikurangkan dapat menghasilkan kesan lembut atau gelap:

brightness()

Di sini, kecerahan keseluruhan imej dalam bekas akan diselaraskan. Dengan menetapkannya kepada

<code class="language-css">.image-container {
  filter: blur(5px);
}</code>

, kami mengatakan bahawa kami ingin meningkatkan kecerahan imej sebanyak 20%.

brightness(120%)

CODEPEN Contoh

5 Penapis

memberikan elemen nada tan hangat, mewujudkan rasa nostalgia atau retro:

sepia() di sini imej akan dibentangkan dengan nada tan hangat, mengingatkan foto lama. Menetapkannya ke

bermakna kita mahu menggunakan kesan tan kepada imej pada intensiti 80%. Melaraskan nilai peratusan membolehkan kita mengawal intensiti kesan tan yang digunakan pada imej.

<code class="language-css">.image-container {
  filter: contrast(150%);
}</code>

sepia(80%) CODEPEN Contoh

kombinasi penapis CSS

Salah satu kelebihan penapis CSS adalah gabungan mereka. Kami boleh memohon pelbagai penapis untuk mencapai kesan visual yang kompleks:

Di sini, kami menggunakan pelbagai penapis untuk elemen dalam bekas untuk mencapai kesan visual komposit. Pelbagai penapis dipisahkan oleh ruang dalam nilai atribut

. Setiap penapis digunakan dari kiri ke kanan dalam urutan yang ditentukan:

<code class="language-css">.image-container {
  filter: brightness(120%);
}</code>

filter

Penapis menukarkan warna elemen ke bayang -bayang kelabu dengan intensiti 30%.

1. grayscale(30%) Penapis menambah kesan kabur dengan elemen radial kabur 3-piksel.
Penapis
2. blur(3px) meningkatkan kontras unsur sebanyak 150%.
3. contrast(150%) Dengan menggabungkan penapis ini, anda boleh mencapai kesan visual yang kompleks yang meningkatkan penampilan kandungan web. Melaraskan parameter setiap penapis membolehkan anda menyesuaikan kesan badan untuk memenuhi keutamaan reka bentuk anda.

Dalam contoh ini, elemen ini akan mempunyai kesan kelabu halus, sedikit kabur dan kontras yang lebih tinggi, menghasilkan rupa yang unik dan artistik.

CODEPEN Contoh

Lebih banyak penapis

anda boleh mencuba lebih banyak penapis CSS termasuk drop-shadow(), hue-rotate(), invert(), opacity(), saturate() dan backdrop-filter. Terdapat juga harta

yang menggabungkan latar belakang lut dengan imej latar belakang di belakangnya.

Anda boleh mengetahui lebih lanjut mengenai ciri -ciri ini di MDN. (Pautan MDN harus dimasukkan di sini)

Gunakan kuasa mod hibrid CSS

mod campuran CSS membolehkan unsur-unsur berinteraksi secara visual, mewujudkan kesan melampaui penumpukan tradisional z-paksi. Mod campuran memproses nilai warna elemen bertindih, menghasilkan hasil yang luar biasa. Mari kita meneroka beberapa mod hibrid yang biasa digunakan dan belajar bagaimana untuk melaksanakannya.

1

multiply Mod Blending menggabungkannya dengan "mendarabkan" nilai warna elemen bertindih. Ia mewujudkan campuran yang lebih gelap dengan mengalikan nilai RGB (merah, hijau, biru) setiap piksel pada lapisan atas dengan piksel yang sepadan pada lapisan bawah. Ini akan menghasilkan campuran di mana kawasan umum menjadi lebih gelap dan warna unik setiap lapisan masih kelihatan:

<code class="language-html"><div class="image-container">
  <img src="https://img.php.cn/upload/article/000/000/000/173897569358040.jpg" alt="Exploring the Creative Power of CSS Filters and Blending ">
</div></code>

CODEPEN Contoh

2

Mod campuran dalam CSS menentukan bagaimana warna elemen dicampur dengan warna elemen asasnya. Ia akan mencerahkan warna lapisan atas dan menghasilkan campuran yang lebih cerah. screen

Berikut adalah cara

mod campuran berfungsi: screen

Pengiraan Warna:
1. Untuk setiap piksel di lapisan atas, nilai RGB (merah, hijau, biru) terbalik.
   • kemudian kalikan nilai warna terbalik dengan nilai RGB yang sepadan pada lapisan bawah.
   Hasil:
2. Hasilnya adalah campuran di mana kawasan umum lapisan menjadi lebih cerah, mengakibatkan kesan cerah.
   • semakin tepu lapisan atas, semakin kuat kesannya.

<code class="language-css">.image-container {
  width: 300px;
  filter: grayscale(100%);
}

.image-container img {
  width: 100%;
}</code>

CODEPEN Contoh

3

Mod campuran dalam

CSS menggabungkan

dan

mod campuran untuk menghasilkan visual yang kaya dan berbeza. Inilah caranya overlay mod campuran berfungsi: multiply screen overlay Pengiraan Warna:

Jika warna asas (b) lebih cerah daripada 0.5, hasilnya dikira menggunakan Formula 2

b
1. t, di mana B adalah warna yang mendasari dan T adalah warna atas.
   • Jika warna asas adalah sama dengan atau lebih gelap daripada 0.5, hasilnya dikira menggunakan Formula 1 - 2 (1 - B) (1 - t).
   • Hasil:
   Mod campuran
menggabungkan kesan gelap mod
2. pada warna gelap dan kesan cerah mod
   pada warna terang.
   • overlay Hasilnya adalah campuran yang meningkatkan kontras dan ketepuan. Kawasan gelap menjadi lebih gelap dan kawasan cerah menjadi lebih cerah, mewujudkan kesan menarik secara visual. multiply screen
CODEPEN Contoh

<code class="language-css">.image-container {
  filter: blur(5px);
}</code>

4

Mod campuran mengira perbezaan mutlak antara nilai warna atas dan bawah setiap piksel. Ia mewujudkan kesan kontras yang tinggi dengan menekankan perbezaan warna antara elemen bertindih. Inilah caranya difference mod campuran berfungsi: difference

Pengiraan Warna:
1. Untuk setiap piksel di lapisan atas, hitung perbezaan mutlak antara nilai atas dan bawah RGB (merah, hijau, biru).
   • Hasilnya menunjukkan perbezaan warna antara kedua -dua lapisan.
   Hasil:
2. Kawasan dengan warna yang sama atau sama akan menghasilkan nada yang lebih gelap.
   • Kawasan dengan warna yang berbeza akan menghasilkan nada yang lebih cerah.
   • Jika warna adalah sama, hasilnya akan menjadi hitam (nilai RGB adalah 0).

<code class="language-html"><div class="image-container">
  <img src="https://img.php.cn/upload/article/000/000/000/173897569358040.jpg" alt="Exploring the Creative Power of CSS Filters and Blending ">
</div></code>

CODEPEN Contoh

5

Mod campuran menghasilkan kesan yang sama dengan mod campuran

, tetapi cenderung menghasilkan hasil yang lebih lembut dan kurang kontras. Ia sering digunakan untuk mencampurkan warna -warna yang bertindih dari elemen bertindih dengan cara yang membolehkan kedua -dua warna yang sama dan warna yang berbeza untuk menyumbang kepada penampilan akhir. Inilah caranya

mod campuran berfungsi: exclusion difference exclusion Pengiraan Warna:

Untuk setiap piksel di lapisan atas, gunakan formula b t - 2

b
1. t, di mana b ialah nilai warna lapisan bawah dan t ialah nilai warna lapisan atas.
   • Hasilnya menunjukkan gabungan perbezaan antara nilai warna kedua -dua lapisan.
   • Hasil:
   Kawasan dengan warna yang sama atau sama akan mempunyai penampilan yang gelap.
2. Kawasan dengan warna yang berbeza akan menghasilkan kesan campuran dan melembutkan dan bukannya kontras yang kuat yang dilihat dalam mod campuran
   .
   Kesan ini sering lebih halus dan sering digunakan untuk membuat campuran warna harmoni.
   • difference
CODEPEN Contoh

<code class="language-css">.image-container {
  width: 300px;
  filter: grayscale(100%);
}

.image-container img {
  width: 100%;
}</code>

lebih banyak mod pengadunan Terdapat banyak mod hibrid lain untuk kita cuba, termasuk

,

,

,

, darken, lighten, color-dodge, color-burn, hard-light , , , , , , soft-light, hue, saturation dan color. luminosity plus-darker Anda boleh mengetahui lebih lanjut mengenai bagaimana mereka bekerja di MDN. (Pautan MDN harus dimasukkan di sini) plus-lighter

Beberapa langkah berjaga -jaga

Selalu ada pengguna akhir yang akan mendapati bahawa penapis CSS dan mod pengadunan boleh menyebabkan kesukaran. Mari lihat beberapa contoh.

Sokongan penyemak imbas

Sokongan untuk penapis CSS dan mod campuran sangat luas, tetapi untuk memastikan pengguna akhir anda akan mendapat hasil yang memuaskan, anda mungkin ingin mempertimbangkan pelan sandaran. Contohnya:

Kebolehcapaian

Apabila menggunakan penapis dan campuran dalam reka bentuk atau pembangunan, adalah penting untuk mempertimbangkan kebolehcapaian untuk memastikan kandungan anda tersedia dan mudah difahami untuk pelbagai kumpulan pengguna, termasuk mereka yang kurang upaya. Berikut adalah beberapa perkara penting yang perlu diperhatikan:

<code class="language-css">.image-container {
  filter: blur(5px);
}</code>

1. kontras warna. Pastikan terdapat perbezaan yang cukup antara teks dan warna latar belakang, terutamanya apabila menggunakan penapis atau mod pengadunan. Kontras yang rendah boleh menjadikan sukar bagi pengguna dengan gangguan visual untuk membaca teks. Uji reka bentuk anda dengan alat yang mensimulasikan pelbagai jenis buta warna untuk memastikan pengguna kecacatan penglihatan warna dapat dibaca.
2. kejelasan teks. Elakkan penapis atau mod campuran yang boleh mengurangkan kejelasan teks. Sebagai contoh, beberapa mod pengadunan boleh membuat teks kelihatan kabur atau tidak jelas, yang menjadikannya sukar bagi pengguna yang cacat penglihatan untuk dibaca.
3. teks alternatif. Menyediakan teks alternatif untuk imej dan grafik yang mungkin dipengaruhi oleh penapis atau mod pengadunan. Pembaca skrin bergantung pada teks alternatif untuk menggambarkan kandungan kepada pengguna yang cacat penglihatan.
4. Animasi dan peralihan. Jika anda menggunakan penapis atau mod pengadunan ke elemen animasi, pastikan animasi tidak terlalu mengganggu atau cepat, kerana ini boleh menjadi masalah bagi pengguna dengan gangguan kognitif atau neurologi tertentu.
5. Reka bentuk responsif. Pastikan reka bentuk anda responsif dan berfungsi dengan baik pada peranti dan saiz skrin yang berbeza. Penapis yang berkesan atau mod campuran pada skrin yang lebih besar mungkin tidak berfungsi dengan baik pada skrin yang lebih kecil atau boleh menyebabkan masalah.
6. navigasi papan kekunci. Pastikan semua elemen interaktif boleh diakses dan digunakan melalui navigasi papan kekunci. Pengguna yang bergantung pada input papan kekunci atau teknologi bantuan harus dapat menavigasi dan berinteraksi dengan lancar dengan kandungan anda.
7. Ujian menggunakan teknologi bantuan. Uji reka bentuk anda menggunakan pelbagai teknologi bantuan seperti pembaca skrin dan perisian pengenalan suara untuk mengenal pasti dan menyelesaikan sebarang isu yang mungkin timbul kerana penapis atau mod hibrid.
8. kasar dipertingkatkan. Melaksanakan pendekatan reka bentuk yang mengikuti prinsip peningkatan secara beransur -ansur. Pastikan kandungan dan ciri teras masih tersedia walaupun mod penapis atau campuran tidak disokong atau dilumpuhkan.

Dengan menyimpan nota -nota ini, anda boleh membuat reka bentuk yang bukan sahaja menarik secara visual, tetapi juga boleh diakses oleh khalayak yang lebih luas, termasuk mereka yang kurang upaya.

perangkap biasa apabila menggunakan penapis CSS dan mod pengadunan

Berikut adalah kesilapan biasa yang mungkin dihadapi oleh pemaju dan bagaimana untuk mengelakkannya.

ralat 1: terlalu banyak penapis

Kesilapan yang biasa adalah untuk memohon terlalu banyak penapis, mengakibatkan susun atur yang luar biasa atau mengelirukan. Lebih berlebihan boleh membuat sukar bagi pengguna untuk memberi tumpuan kepada kandungan penting dan boleh membawa kepada pengalaman pengguna yang buruk.

Contoh:

<code class="language-html"><div class="image-container">
  <img src="https://img.php.cn/upload/article/000/000/000/173897569358040.jpg" alt="Exploring the Creative Power of CSS Filters and Blending ">
</div></code>

Dalam contoh ini, pelbagai penapis digunakan untuk elemen yang sama. Walaupun menggabungkan penapis boleh membuat kesan unik, adalah penting untuk menyerang keseimbangan dan memastikan reka bentuk keseluruhan tetap konsisten dan mesra pengguna. Pertimbangkan hierarki visual dan mengutamakan kejelasan.

ralat 2: Gunakan penapis pada elemen interaktif

Memohon penapis kepada elemen interaktif seperti butang atau pautan tanpa mempertimbangkan interaksi pengguna boleh membawa kepada pengalaman pengguna yang kurang intuitif dan mengelirukan.

Contoh:

<code class="language-css">.image-container {
  width: 300px;
  filter: grayscale(100%);
}

.image-container img {
  width: 100%;
}</code>

penapis boleh mengubah penampilan unsur -unsur interaktif, yang boleh menjejaskan pemahaman pengguna mengenai tujuan mereka. Pastikan penapis tidak menjejaskan kejelasan dan kebolehgunaan elemen interaktif.

ralat 3: Abaikan kesan prestasi

Memohon penapis kompleks atau kombinasi penapis boleh mempunyai kesan prestasi, terutamanya pada peranti lama atau penyemak imbas. Mengabaikan isu prestasi boleh menyebabkan masa pemuatan halaman melambatkan.

Contoh:

<code class="language-html"><div class="image-container">
  <img src="https://img.php.cn/upload/article/000/000/000/173897569358040.jpg" alt="Exploring the Creative Power of CSS Filters and Blending ">
</div></code>

Penapis kompleks mungkin memerlukan lebih banyak sumber pengkomputeran, yang akan mempengaruhi prestasi laman web. Prestasi ujian pada pelbagai peranti dan mengoptimumkan seperti yang diperlukan, dengan mengambil kira perdagangan antara kesan visual dan kelajuan halaman.

Kesimpulan

Penapis CSS dan mod campuran membolehkan pemaju web untuk menolak sempadan kreatif untuk mewujudkan antara muka pengguna yang menarik dan dinamik.

Dengan memahami dan menggabungkan ciri -ciri ini, anda dapat meningkatkan daya tarikan visual kandungan web anda, menjadikannya lebih menarik dan tidak dapat dilupakan kepada pengguna.

Apabila anda meneroka kreativiti penapis dan campuran CSS, jangan ragu untuk mencuba kombinasi yang berbeza untuk mengetahui kesan unik yang dapat anda capai.

Sama ada anda sedang membina laman web portfolio, blog atau e-dagang, menggabungkan teknologi ini boleh menambah rasa kecanggihan visual untuk membuat laman web anda menonjol.