本物 理由 派手でモダンな CSS がエキサイティングなのは、今私たちができることのおかげです 実際にやります CSSで。
私の大好きな男の一人、ハキム・エル・ハッタブが「Progress Nav」というものを作ったのを覚えています。 10年前。 このアイデアは、ページ内のどこにスクロールしているかを通知し、それを目次のデザインに反映できる目次コンポーネントです。
おそらく、機能が JavaScript を介して動作することに驚かないでしょう。そうではありません 恐ろしく巨大または複雑ただし、完全にデバウンスされていないことに依存します。 window.addEventListener( 'scroll', ... これはパフォーマンスが不安定になる原因として知られています。
でもカッコいいですよね？
この種のことは「スクロールスパイ」効果として知られるようになりました。これで私が何をしようとしているのかがわかると思います。 CSS でスクロールスパイができるようになりました。 とにかくChromeで。思い出してください。 CSSカルーセル 何かが起こっていたのか？これは非常に関連性があります。人々が優しくこう言おうとしていたのを覚えています これは単なる CSS カルーセルではありません。興味深い CSS プリミティブを組み合わせるとカルーセルを作成できますが、完全に他のユーザーも使用できます。 さて、ここに何かがあります。
これを行う主な CSS は次のとおりです。
.parent { scroll-target-group: auto; }
:target-current { }Code language: CSS (css)おお。
また、明らかに非常に重要なことは、 バトルスター ギャラクティカのコーナーができる、デイブは次のように説明しています。
…すべての長方形 (ドア、窓、家具、ユーザー インターフェイス) が、すべての角が古くて退屈で未来的ではない 90 度の長方形の角ではなく、1 ～ 3 個の角のある角を持つ SF 映画やテレビの比喩。どう見ても、これらは長方形のクールなバージョンです。
もう 2 つのライナー 😍:
.sci-fi {
border-start-end-radius: 50px;
corner-shape: bevel;
}Code language: CSS (css)
ビュートランジションを使用すると要素がいつ移動するか知っていますか?移動・モーフィングの際に「スクリーンショットではありません」と言っているのですが…なんだかスクリーンショットのような気がします。そのため、時にはぎこちなく見えることもあります。 Bramus は、この例として、要素に異なる属性がある場合が挙げられると指摘しています。 border-radius。 これを修正するのは私が望んでいるよりも複雑であり、これらの派手な機能を詳細に理解すると、場合によってはかなり深く掘り下げる必要があることがわかります。良いニュースがあります。 (少し) より単純なアプローチ、実際にアニメーション化している個々のパーツについて考える必要があります。ありがたいことに、その部分は私にとっては理解できます。要素自体を与えるようなもの そして その本質はさまざまな名前です:
.card {
view-transition-name: card;
}
.card > .card-content {
view-transition-name: card-content;
}Code language: CSS (css)獣のようなものを残しておきます 3D CSS でのライティングに関する Julia Micocene のブログ投稿。
Views: 0
