インモビインモビ

CSSでフロストガラス効果があると思うなら、あなたはおそらく backdrop-filter 財産。ただ backdrop-filter: blur(10px); トリックをします。私はまだ見た目はちょっとクールで新鮮だと思いますが、10年前のiOS 7リリースで効果が普及したので、ここで少し自分自身をチェックする必要があります。

ここ は しかし、新鮮なテイク： フロストガラス：CSSの深さベースのぼかし （動的効果を確認するためにマウスをマウスし、下にスクロールしてさまざまな背景への影響を確認してください）。

ハウツー 層状のぼけがマスクされており、マスクがマウスで動いているということです。私はそのような賢いものが大好きで、それはかなりシンプルになります。

上記のデモは、実際にはマスキングの素晴らしいデモンストレーションです。なぜなら、それはグラデーションを使用して、ユニークなマスク-Yの何かをしているからです。何かの一部を切り取ることができる他の概念は clip-path、しかし、クリッピングパスでは、要素の特定の部分は切り取られているかどうかにかかわらず、マスクでは部分的に透明になる可能性があります。

Ahmad Shadedには最近の記事があります CSSマスキング それは、それがすべてがどのように機能し、あなたがそれで何ができるかを説明するのに良い仕事をします。

あなたが持っているなら、この小さなデザインの概念があります ネスト 両方が持っている要素 border-radius、彼らは持っていません 同じ border-radius そうでなければ、彼らは真ん中に奇妙な小さなこぶを持っている傾向があり、本質的には単に具体的な専門家ではありません。 私は2011年にこれについて書きました そして、長年にわたって多くの人に感謝してきました！ （私が最初であるわけではありません。）

一般的な考え方は、一方を他方から差し引くということです。 時々現れます。 アダム・アーガイルは最近述べた 数学なしでこれを解決する方法がありますが、現時点ではクロムのみです。

これは使用します overflow: clip; そして overflow-clip-margin: content-box; これが私が後者を最初に聞いたことです！私はそれが好きです！

今週はパスについて話すのに良い仕事をしているように感じているので、レムはここに別のものを滑らせます：Jhey’s CSSを使用した循環テキスト？。明確にするために、「このパスにこのテキストを設定する」と言う方法は、通常のファーストクラスCSS市民はありません。その道が直線でない限り、私は思う。 SVGには 要素であり、それは本当にここでこれを半精力的に行うなら、本当にここで欲しいものです。しかし、ここにはいくつかのトリックがあります！

これは、キャプテンオールドが再び言っているように感じます 私はこれについて2012年に書きました、しかし、ここにいます。トリックは、テキストを個々のキャラクターに分割することでした sしてから、共有起源の周りにそれらを変換します。

ジェイズ アイデア それでもモノスペースフォントを使用して、キャラクターをスパンに分割しますが、より賢い数学が関係しています。彼はそれをセットアップしているので、あなたが使用するキャラクターがたくさんいますが、何があっても完全な一周です。秘密は三角関数であり、CSSでのみ新鮮に利用できます。加えて、彼は時間をかけてテキストとしてのテキストが悪夢であるため、スクリーンリーダーに優しいテキストがあることを確認するために時間をかけました。

上記のすべてのものを読んで、ughkg CSSのバージョンがとても難しいと感じた場合、マイクアパリコの慰めを見つけるかもしれません なぜ私たちはCSSが苦手です。マイクのポイントの一部は、CSSがそれを回避しようとするほど、または強すぎる抽象化を適用しようとするほど難しくなるということです。

私たちのスタイルは、さまざまなコンテキストで再利用するのに十分なジェネリックであることを望んでいますが、それらの文脈で常に自分自身を繰り返さなければならないほど一般的ではありません。

CSSのハンドルを持っていると感じている人には、本質的に独自の方法論を発明した傾向があると感じています（共有するかどうかにかかわらず）。それは、CSSの失敗や、それを効果的にするためにあなた自身のシステムを発明するために必要なもののように思えるかもしれませんが、最終的にはそれはどんな言語にも当てはまると思います。あなたはあなたのために働き、それと一緒に走るあなた自身の方法を構築します。