👋 この記事のデモでは、CSS グラデーションとサブピクセル レンダリングに関連する非標準のバグを実験しています。 彼らの行動は、将来いつでも変更される可能性があります。 彼らはまた、一体として重いです。 クリックしてロードする場所で非同期に提供していますが、ラップトップのファンが回転し始めた場合に備えて、注意を喚起したいと考えています.
信号のない古いテレビの静的ノイズを覚えていますか? または、信号が悪く、画像が歪んでいる場合は? テレビ信号の概念があなたよりも前からある場合は、ここに私が何を意味するかを正確に示すGIFがあります.
ビュー画像 (自動再生メディアを含む)
はい、CSS のみを使用してこのようなことを行います。 これが私たちが作っているものです：
コードを掘り下げる前に、ここで説明する方法よりも静的なノイズ効果を作成するためのより良い方法があることをお伝えしたいと思います。 SVGを使用できます。 filter 実際、ジミー・チオンは 良い記事 SVGでそれを行う方法を示しています。
ここで行うことは、グラデーションのバグを利用するいくつかのトリックを調べる CSS の実験のようなものです。 楽しみのためにサイド プロジェクトで使用することもできますが、SVG を使用する方がクリーンで、実際のプロジェクトにより適しています。 さらに、効果はブラウザーによって異なる動作をするため、これらを確認する場合は、Chrome、Edge、または Firefox で表示することをお勧めします.
騒ぎましょう！
このノイズ効果を作成するには、グラデーションを使用します! いいえ、それを実現する秘密の成分や新しい特性はありません. CSS ツールボックスに既にあるものを使用します。
「トリック」は、グラデーションがアンチエイリアシングに弱いという事実に依存しています。 ハード ストップ カラーを使用すると、エッジがギザギザになるのをご存知ですか? はい、私はほとんどの場合それらについて話します 私の記事 それらは少し煩わしいので、滑らかにするために常にいくつかのピクセルを追加または削除する必要があります。
ご覧のとおり、わずかな違いがあるため、XNUMX 番目の円は最初の円よりも適切にレンダリングされます (0.5%) 最初の円のように整数値を使用してストレートなハード カラー ストップを使用するのではなく、グラデーションの XNUMX つの色の間。
これが別の外観です。今回は conic-gradient 結果はより明白です。
これらのデモを作成しているときに、興味深いアイデアが思い浮かびました。 常に歪みを修正する代わりに、反対のことを試みてみませんか? 何が起こるかわかりませんでしたが、楽しいサプライズでした！ 円錐グラデーションの値を取得し、それらを減らし始めて、貧弱なアンチエイリアシングの結果をさらに悪化させました。
最後のものがどれほど悪いか分かりますか？ それは一種のスクランブルであり、滑らかなものは何もありません。 値を小さくして全画面表示にしましょう。
これがどこに向かっているのかがわかると思います。 グラデーションのハード カラー ストップに非常に小さな XNUMX 進数値を使用すると、奇妙に歪んだ視覚効果が得られます。 私たちのノイズが生まれました！
実際の円錐勾配をまだ確認できるため、必要な粒子の粗いノイズにはまだ程遠いです。 しかし、値を非常に小さな値に減らすことができます — のように 0.0001% —そして突然、グラデーションはなくなり、純粋な粒状感が得られます。
多田！ ノイズ効果があり、必要なのは XNUMX つの CSS グラデーションだけです。 説明する前にこれを見せたら、グラデーションを見ていることに気付かないでしょう。 それを見るには、グラデーションの中心を注意深く見る必要があります。
位置を調整しながらグラデーションのサイズを非常に大きくすることで、ランダム性を高めることができます。
グラデーションは固定に適用されます 3000px 正方形で、 60% 60% 座標。 この場合、その中心に気づくことはほとんどありません。 放射状グラデーションでも同じことができます。
そして、物事をさらにランダムにする (そして実際のノイズ効果に近づける) ために、両方のグラデーションを組み合わせて使用することができます background-blend-mode 物事をスムーズにする：
私たちのノイズ効果は完璧です！ それぞれの例をよく見ても、勾配の痕跡はなく、どちらかというと美しい粒状のスタティック ノイズです。 アンチエイリアシングのバグを洗練された機能に変えました!
これができたので、それを使用できるいくつかの興味深い例を見てみましょう。
アニメ化されたテレビ信号なし
最初のデモに戻ります。
コードを確認すると、グラデーションの XNUMX つで CSS アニメーションを使用していることがわかります。 それは本当にそれと同じくらい簡単です！ 行っているのは、円錐グラデーションの位置を電光石火の速さで移動することだけです (.1s）そして、これが得られるものです！
XNUMX div の CSS アート チャレンジでも同じ手法を使用しました。
粒子の粗い画像フィルタ
もう XNUMX つのアイデアは、画像にノイズを適用して昔ながらの外観にすることです。 各画像にカーソルを合わせると、ノイズなしで表示されます。
おかげで、疑似要素にグラデーションをXNUMXつだけ使用し、それを画像とブレンドしています mix-blend-mode: overlay.
CSS を使用すると、さらにおかしな効果が得られます filter 財産
そして、追加すると mask ミックスすると、さらに多くのエフェクトを作成できます。
粗いテキスト処理
これと同じ効果をテキストにも適用できます。 繰り返しますが、必要なのは、チェーン化されたいくつかのグラデーションです。 background-image 次に、背景をブレンドします。 唯一の違いは、私たちも手を差し伸べているということです background-clip そのため、効果は各文字の境界にのみ適用されます。
ジェネレーティブアート
グラデーション値をいじり続けると、単純なノイズ効果よりも驚くべき結果が得られる場合があります。 よく似たランダムな形状を得ることができます ジェネレーティブアート!
もちろん、私たちは多くの作業を必要とする真のジェネラティブ アートには程遠いです。 しかし、技術的にはバグと見なされているもので何が達成できるかを見るのは、まだ満足のいくものです!
モンスターの顔
私が作った最後の例 コードペンの divtober 2022 コレクション:
包み込む
この小さな CSS の実験をお楽しみいただけたでしょうか。 私たちは何か「新しい」ことを正確に学んだわけではありませんが、グラデーションでちょっと変わったものを取り入れて、それを楽しいものに変えました. もう一度言います： これは、実際のプロジェクトで使用することを検討するものではありません ある時点でアンチエイリアシングが対処されるかどうか、またはいつ対処されるかは誰にもわからないからです。 代わりに、これは非常にランダムで、嬉しい驚きでした。 また、制御がそれほど簡単ではなく、ブラウザー間で一貫性のない動作をします。
これは言った、私はあなたがそれで何ができるか知りたいです！ 値をいじったり、さまざまなレイヤーを組み合わせたり、 filterまたは mix-blend-mode、または何でも、あなたは確かに本当にクールなものを手に入れるでしょう. コメント セクションであなたの作品を共有してください — 賞品はありませんが、素敵なコレクションを手に入れることができます!
