親愛なる友人のロビンが新しいエッセイを持っています 陰翳礼拝。 さて、そこに飛び乗って、CSSボックスの影、テキストの影、影のフィルターのナゲットを探す前に…これは しないこと。 これは写真に関するエッセイであり、ロビンがカメラで影を渡すことについて学んだことです。
では、なぜこれを共有するのですか？ 彼がXNUMXつのエッセイに捧げられた記事向けのページを作ったのはとてもクールだからです。 そして、CSSでDevToolsをクラックすると、CSSについて多くのことを学ぶことができます。
- センタリングテクニック。 CSSグリッドがでどのように使用されているかに注目してください
<body>単に パンフレットを中央に配置。 それからロビンはそれぞれで再びそれに手を伸ばします.frame内容で同じことをするエッセイの。 - 「偽の」背景画像。 ロビンは、それぞれにCSSクラスを作成することで、自分自身のために多くの作業を行うことができたはずです。
.frame背景画像を取得します。 代わりに、彼は使用しますobject-fit: coverインラインHTMLで<img>s充填中にアスペクト比を維持する.frame容器。 （彼は実際には これについて書かれた 以前。）これにより、CSSを大幅に節約できますが、必要に応じて代替テキストを使用することもできます。 私はちょっと疑問に思う<figure>/<figcaption>構造は代わりにここで機能する可能性がありますが、それが起こっていることに多くの追加の利益を提供するとは思えません。 - スタッキングコンテキスト。 それらの偽の背景画像の別の特典？ それらは、スタッキングコンテキストを作成する絶対ポジショニングを使用し、ロビンが設定できるようにします。
z-index: 0画像に。 そうすれば、テキストは上に直接スタックされますz-index: 1。 繰り返しになりますが、CSSグリッドはすべてのセンタリングを処理しているため、物事はうまく調整されています。 - スクロールスナップ。 私はいつも 愛 CSSスクロールが実際にスナップしているのを見るとそれがわかります。 ロビンは、フレームをスクロールしながらページめくりのエクスペリエンス全体に実際に役立つため、ここで使用するのに適した選択をしました。 水平スクロールは厄介な場合がありますが、実行すると非常にエレガントになります。これは、狭い列のデザインを強化する方法です。 すべてがどのように機能するかについての良い説明が必要な場合は、ロビンも 水平スクロールスナップについて書かれています.
何といっても、ロビンは優れた作家であり、CSSやそれ以降の彼が出版しているものは何でも読む価値があります。
