Kecerunan Grainy-tutorial css-php.cn

Kecerunan Grainy

Semak imbas Dribbble atau Behance dan anda akan mendapati pereka menggunakan helah mudah untuk menambah tekstur ke imej: bunyi bising. Menambah bunyi bising membuat warna pepejal pada asalnya atau kecerunan licin (seperti bayang -bayang) lebih realistik. Tetapi sementara pereka seperti tekstur, bunyi jarang digunakan dalam reka bentuk web.

Artikel ini hanya akan menggunakan sedikit CSS dan SVG untuk menghasilkan bunyi bising dan menambah tekstur kepada kecerunan. Ok, mari buat bunyi bising!

Taman Permainan Interaktif

Klik di sini untuk melihat. Cara terpantas untuk memahami apa yang sedang berlaku ialah menyesuaikan parameter yang membentuk lapisan.

Petua: Bunyi SVG dan kecerunan CSS

Teknologi teras artikel ini didasarkan pada jawapan Chris Pachl kepada Stack Overflow Soalan: Bolehkah anda menambah bunyi bising kepada kecerunan CSS?

Caranya adalah untuk membuat bunyi menggunakan penapis SVG dan kemudian gunakan bunyi itu sebagai latar belakang. Letakkannya di bawah kecerunan untuk meningkatkan kecerahan dan kontras, dan itu sahaja - anda mendapat kecerunan yang tersebar secara beransur -ansur.

Bahan -bahan utama

Inilah yang kita gunakan di belakang tabir:

SVG Turbulence: Ini adalah penapis bunyi kami.
Latar Belakang dengan Kecerunan dan SVG: Seterusnya, kami meletakkan penapis ini ke CSS sebagai imej latar belakang yang menggabungkan penapis dan kecerunan CSS.
Meningkatkan kecerahan dan kontras: Kami kemudian beralih kepada penapis CSS untuk meningkatkan kecerahan dan kontras bunyi.
Campurkan kecerunan: Akhirnya, kita boleh memilih untuk menggunakan mod campuran-mod untuk menapis warna dan mencampurkan kecerunan bersama-sama.

Mari kita masuk ke setiap bahagian ini secara terperinci.

Menggunakan pergolakan SVG

Dalam dunia SVG, kita boleh menentukan penapis, salah satunya membolehkan kita membuat bunyi perclin. ia dikenali<feturbulence></feturbulence> , kita boleh menentukan sifat -sifat seperti sama ada ia adalah "pergolakan" atau "bunyi", dan betapa halus atau kasarnya. Bence Szabó menerangkan ini dengan lebih terperinci, kerana dia menunjukkan cara menggunakannya untuk mencipta corak.

<code><svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feturbulence basefrequency="0.65" numoctaves="3" stitchtiles="stitch" type="fractalNoise"></feturbulence></filter><rect filter="url(#noiseFilter)" height="100%" width="100%"></rect></svg></code>

Salin selepas log masuk

Contoh SVG ini mencipta penapis dan menjadikan a<rect></rect> unsur -unsur, yang boleh kita gunakan untuk kecerunan berbutir kita. Sila ambil perhatian bahawa SVG<filter></filter> dan<rect></rect> Definisi secara berasingan, dan<rect></rect> Cukup sebutkan.

Cuba ubah<feturbulence></feturbulence> beberapa atribut.

Kami menyimpan SVG ini sebagai fail berasingan. Kami merujuk pautan luaran dalam demo dalam artikel ini untuk mendapatkan SVG. Walau bagaimanapun, dalam praktiknya, anda akan merujuk fail tempatan atau CDN anda sendiri. Atas sebab yang pelik, merujuk SVG melalui IDnya tidak berfungsi, tetapi anda boleh menyamakan SVG seperti yang telah kami tunjukkan dalam demo taman permainan. Kami tidak melakukan ini dalam demo atas alasan keterbacaan.

Buat latar belakang CSS dengan SVG dan Gradien

Selepas menyimpan fail SVG di suatu tempat yang boleh merujuknya dengan URL atau PATH, kini kita boleh menggunakannya dalam latar belakang CSS, digabungkan dengan kecerunan.

 <code>.noise { /* ... */ background: linear-gradient(to right, blue, transparent), url(https://www.php.cn/link/a41a6a3856ee3c8c2816d4828b64f560); }</code>

Salin selepas log masuk

Pesanan di sini sangat penting. Dalam contoh khusus ini, kita mahu warna pepejal (iaitu tiada bunyi) untuk beralih ke bunyi dan kemudian ke warna lain. Kami juga mahu satu hujung kecerunan menjadi telus supaya bunyi boleh diturunkan.

Seperti ini:

Walau bagaimanapun, ini tidak begitu baik kerana bunyi terlalu mengelirukan. Kita perlu merosakkannya dan menjadikannya lebih kasar . Kita boleh lulus ...

Kecerahan dan kontras yang dipertingkatkan

Menambah penapis CSS menjadikan bunyi lebih jelas, menolak warna dimest ke arah putih atau hitam. Penapis digunakan sepanjang<div> , jadi biru di sebelah kiri jauh berbeza dari biru tulen yang kita mula gunakan. <em>`</em> ` <a href="https://www.php.cn/link/a41a6a3856ee3c8c2816d4828b64f560">.</a><br> }<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>您可以随意调整对比度和亮度如何影响渐变。增强亮度和对比度会在下面的演示中突出混乱的灰色。 #### 噪点颜色不均匀如果您放大，您会注意到噪点由多种颜色组成。SVG滤镜一开始就是彩色的，增加亮度和对比度会强调某些颜色。虽然几乎看不出来，但如果这种五彩纸屑不受欢迎，我们可以继续使用CSS混合（即mix-blend-mode和background-blend-mode）过滤颜色。 #### CSS混合让我们创建一个在两种颜色之间过渡的颗粒状渐变。CSS混合允许我们堆叠颜色层。在下一个示例中，我们向标记中添加另一个`</code> , letakkan di atas kecerunan asal, dan gunakan `campuran-mod-mod: Multiply;` Untuk melicinkan perkara.</pre><div class="contentsignin">Salin selepas log masuk</div></div> </div> <p></p> <div> <div></div> <div></div> </div>

<code></code>

Salin selepas log masuk

.Noise { / ... / latar belakang: linear-gradient (20deg, rebeccapurple, telus), url ( https://www.php.cn/link/a41a6a3856ee3c2816d48b64f56 ; Mix-Blend-Mode: Multiply;

<code>我们可以使用CSS隔离属性创建一个新的堆叠上下文并选择要混合的内容。如果我们在下一个示例中省略隔离，渐变和叠加层将与背景颜色混合。在Pen中尝试并注释掉该行！</code>

Salin selepas log masuk

/ Sama seperti sebelumnya /

.isolate {pengasingan: mengasingkan ;

 <code>### 一些用例我们已经查看了一个如何制作噪点渐变的非常简单的示例，但是您可以在哪里使用它呢？让我们考虑几个用例。 #### 光线和阴影，带颗粒感渐变自然发生在哪里？例如，光线和阴影。我们可以利用CSS属性`mix-blend-mode`来平滑地混合渐变并选择性地过滤我们想要在噪点中看到的颜色。在“阴影”示例中，我们创建一个暗渐变，并将其反转以在“光线”示例中创建效果。在这两种情况下，`mix-blend-mode`都允许我们将它与其他渐变混合。 #### 全息箔大幅度的亮度和对比度增强创造了一种彩虹效果，让人联想起全息箔。 ### 进一步发展尝试游乐场并随意调整不同的参数，看看它们如何影响纹理。除此之外，以下是一些继续摆弄此技术的几种方法： - **使用不同的SVG:** 本文中的所有渐变都使用相同的SVG，但您可以调整生成噪点的参数以调整粗糙度以及游乐场中的外观和感觉。 - **尝试不同的渐变:** 除了`linear-gradient`之外，CSS还提供四种类型的渐变。你能说出它们的名字吗？（这是一个。） - **添加更多图层:** 使用CSS混合，您可以根据需要堆叠任意数量的图层并将它们混合在一起。 - **应用不同的SVG滤镜:** 有各种各样的滤镜，包括高斯模糊和不同类型的照明。此外，它们可以在CSS滤镜中引用并应用于除SVG之外的*任何*元素。您还能想到什么？请在评论中告诉我们您的发现。 ### 浏览器支持我们不能避免在这里谈论浏览器支持。此技术的核心受所有现代浏览器支持。正如您可能预期的那样，它在Internet Explorer中不起作用。也就是说，Internet Explorer确实支持SVG作为CSS中的背景（只是不支持实际的CSS滤镜属性）。 #### SVG作为CSS背景图像此浏览器支持数据来自Caniuse，其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。 #### 桌面</code><thead><tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr></thead><tbody><tr>
<td title="Chrome -"></td>
<td title="Firefox -"></td>
<td title="Iaitu -"></td>
<td title="Tepi -"></td>
<td title="Safari -"></td>
</tr></tbody>

#### Mobile/Tablet

Salin selepas log masuk

#### CSS FILTER Kesan Pelayar ini menyokong data dari CANIUSE, yang mengandungi lebih banyak maklumat. Nombor menunjukkan bahawa penyemak imbas menyokong ciri ini dalam versi ini dan kemudian. #### Desktop

#### Mobile/Tablet

Saya juga menyedari bahawa penyemak imbas berasaskan Blink (seperti Chrome) dan pelayar berasaskan WebKit (seperti Safari) mempunyai pelaksanaan yang sedikit berbeza dari `campuran-blend-mode`, jadi pastikan untuk menguji di seluruh pelayar jika menggunakan campuran CSS. Dalam projek saya, saya menggunakan pertanyaan media khusus penyemak imbas untuk menyesuaikan tweak kecil CSS secara manual untuk menyelaraskan perbezaan visual. Itu sahaja! Sekarang anda telah menguasai penapis SVG dan bagaimana untuk menggabungkannya dengan penapis CSS sebagai latar belakang, anda mempunyai visual yang bijak untuk menambah kedalaman dan tekstur ke reka bentuk anda.

Atas ialah kandungan terperinci Kecerunan Grainy. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!