ゴールドスターCSSブロガー – Codepen

CSSはまだ温かいファジーを与えてくれます。私たちは過去数年間、非常に多くの素晴らしいCSS機能を手に入れました。しかし、それらの機能が組み合わされているとき、私はしばしばun然とし、今後の表面を引っ掛けるだけであることを考えています。

Adam Argyleの新しいデモを取ります 「レスポンシブアプリスイッチャー」。あなたがたまたまiOSユーザーである場合、あなたはあなたがいるそのインターフェイスからのルックアンドフィールを認識するかもしれません スワイプします そして、最近のオープンアプリから選択しています。

このデモでは、AdamはCSSグリッドレイアウトを使用しており、 grid-auto-flow 要素を列に並べて、必要な水平スペースをとるだけです。彼はスクロールスナップを使用して、それぞれがそれらを「カード」と呼び、満足のいく場所にスナップしましょう。最初と最後に目に見えないカードを含むスナップには、最終的なスクロールがまだ弾力性のある弾力性のある感覚を持っていることに、いくつかのボーナストリックがあります。物事はサイズがあります aspect-ratio そして論理的特性、そして全体的な容器は文字通り container コンテナユニットでサイジングを行うことができるように。満足のいく「シュリンクがスクロールする」という影響は、スクロール駆動型のアニメーションで行われ、スタイルは適切な尺度のためにレイヤーで適用されます。

そうです たくさん 最新のCSS機能の。

私の心がどこにあるのか：もっと！もっと！もっと！

代わりに各カードがブログの郵便番号であると想像できませんか？必要に応じて、より多くのスクロール駆動型のアニメーションで縮小するヒーローイメージで、少しスクロールすることができます。

各カード内の要素がコンテナユニットとコンテナクエリによって完全に処理されるすべてのサイズとレイアウトを想像できませんか？一部のカードは、その重要性によって異なるサイズのサイズであるため、ユニークなレイアウトがあります。

これらのブログの投稿カードをクリックして、ビューの移行が始まり、カードをフルスクリーンのブログ投稿に拡張することを想像できませんか？

phew。私たちは見始めています いくつかの そのようなものですが、通常はデモとそれほど少ない制作ウェブサイトです。しかし、私たちはすぐにそうします。このようなものの多くは完全に進歩的な領域にあり、サポートはおそらくあなたが思っているよりも優れており、すぐに動いています。

私はあなたのためにいくつかの素晴らしいCSSリンクを持っています、その多くは私がちょうど話していた空想と新しいものと一致しています。

• Ahmad Shadedは、CSSの概念に関する非常によく作られた記事の絶対的なホストで、今年のCSSブログの究極のゴールドの星を獲得します。 CSSグリッドで骨を折る必要がある場合、それがあなたのものかもしれません 最も優先順位を付ける必要があります （THX GOLD -STAR CSS Blogger Miriam Suzanne）、Ahmadの記事に関する記事 CSSグリッド領域 行くのに最適な場所です。確かに、それはグリッドをセットアップすることについての部分的なことですが、それはすべてのサービスです。 グリッドに物を置く。
• それがあなたと一緒にクリックした場合は、より厳しいフォーカスの投稿を続けてくださいahmadの投稿 ギャップ、 より良いターゲットサイズを設計します、 そして キャップユニット。
• ジョシュ・コモーは金の⭐⭐️スターCSSブロガーでもあり、私はおそらくすでにそれにリンクしていますが、彼の CSSグリッドへのインタラクティブガイド 素晴らしいです。それから時々ジョシュは彼の焦点を次のようなものできつく締めます DOMの折りたたみます、これはかなりシンプルなインタラクティブなアイデアであり、そこに約1億個の小さなレッスンが隠れています。
• ゴールドに参加することは、Star CSSブログの争いに参加するのはBramusです。Googleでの地位は、CSS機能の重要な詳細への最前列に本当にアクセスできると思います。私は知っています overflow: clip 最近では、クールな副作用があります 方向のオーバーフローを行うことができます 私たちがこれまでにできなかったこと。しかし Bramusは、スクロール駆動型のアニメーションと組み合わされて非常に便利だと指摘しています、スクロールコンテナを作成せず、潜在的にビュータイムラインを台無しにするためです。
• 私はこれのために完全にゆっくりと拍手しています 108 CSSローダーのコレクション。それらはすべてかなり楽しくて上品で、正直なところ、もっと楽しいローダーを使用するアプリを望んでいます。まあ、実際には、彼らがより速くなることを願っています。
• これを残してもらいましょう。ケビン・パウエル、別の金⭐️スターCSS’rが持っていた CSSデーでの素晴らしい講演 について 複雑さを受け入れる 特定のCSSソリューションで。精神の一部は、CSSがしばらく存在しており、いくつかのことにかなり確立されたパターンがあることです。 「同じこと」を行う新しいソリューションが登場すると、それらは不必要または過剰な複雑さえ見られます。もしあなたがその気持ちを得たなら、それはそれが馴染みが少ないからだからです。もしそうなら、それは解決策を少し広く開く時が来るかもしれません 得る もっと馴染みがあります。