ボタン、モード、およびまだ少しトリッキーなレイアウトの状況 – Codepen

ボタンにインスピレーションが必要な場合は、間違いなくLucas Bonomi’sをチェックしてください Buttons.Cool。これは、美しいボタンのためだけに、1回限りのサイトよりも優れています。

しかし、それは単なるデザインギャラリーではなく、フロントエンドの開発者がコードを見ることができ、ページでライブレンダリングされていることを確認できるという点で作られています。もちろん、最良の部分は、すぐに調べて調べてみることができることです。

ように見えます それは提出を取っています。

どうやって 難しい ダークモードは引きオフしていますか？またはおそらくもっと正確には、どのくらい難しいか 2番 カラーモード？私たちの中には、ダークモードファーストウェブサイトを持っている人もいます、 わかった。

私は思った Wes Bosは質問をよく言いました：

ライト/ダークモードを実装した人への質問：変数を交換するだけで、カスタムコードはいくらで、エッジケースになりますか？

私は答えました：Fidny Biddy。

私たちが取り組んでいるCodePenの新しいバージョンでは、サイト全体のテーマ設定（選択したテーマを強調表示する構文から分離されています）があります。 Codepenはかなり複雑なサイトであり、CSSカスタムプロパティ設定のかなりの部分が含まれていました。したがって、ある意味では、ほとんどが「変数を交換する」だけでしたが、それらの変数のかなりの数が存在します という理由だけで さまざまなカラーモードのもので、そのほとんどは「エッジケース」と呼ばれるかもしれません。私たちにとって：200の南100の北。これは挑戦的ですが、最終的には公正なアプローチであることがわかりました。

時々、あなたはその方法のアイデアを見ているのを見ることがあります 単純 それ できた なれ。たとえば、彼はAkhil Arjunです それは1行で行うことができると言っています：

html[theme="dark-mode"] {
    filter: invert(1) hue-rotate(180deg);
}

そして、ここにマッズ・ストウマンがいます まったく異なる3ラインアプローチ：

body {
  background-color: Canvas;
  color: CanvasText;
  color-scheme: light dark;
}

私は良いCSSのトリックに感謝していますが、これらは知っておくべき良いことですが、私は先に進み、これらの超最小限のアプローチはおそらくあなたをそれほど遠くに導くことはないと言うつもりです。これよりも優れたコントロールが必要になり、それらのエッジケースに対処する必要があります。

CSSにはこのような強力なレイアウトツールがあります（COMを続けてください、CSS！） – かなりシンプルに見えるが、まだ少し挑戦的な小さなレイアウトの状況を見るのは楽しいです。タイラー・スティッカは、彼が呼ぶものに出くわしました トリッキーなフローティング画像アライメント。アイデアは、いくつかのテキストを持つことです 中心 画像と一致していますが、テキストが成長した場合 大きい 画像よりも、の動作を使用します フロート。

最終的には解決策が好きでした。それは私たちが垂直に材料を中心にできるようになった方法への先祖返りです top: 50%; transform: translateY(-50%)。これはうまくセンタリングを行いますが、テキストがコンテナよりも大きい場合、本質的にキャンセルして、本質的に何もしません。

もう1つのトリッキーなレイアウトの状況は、今回はNewFangled HTMLおよびCSS機能、つまりアンカーポジショニングを含むものです。 （別の任意の要素の位置に基づいて要素を配置すると考えてください。）Eric Meyerはそれをブログにしました 核固定サイドノート。

脚注を想像してください。十分な大きさの画面を除いて、それはサイドノートのようなものです。つまり、メモは空のサイドバースペースになります 正確に ライン 脚注マーカーが表示されること。しかし、本当にこれをやってのけるために、あなたはアンカーの位置を使用しています 複数 要素：

はい、私は2つのまったく異なるアンカーに関してサイドノートを固定しています。そのうちの1つは他の子孫です。大丈夫です！あなたはそれをすることができます！

私はあなたがそれをすることができるとは知りませんでしたが、私はそれが好きです。

top: anchor(top); /* implicit anchor */
left: anchor(--main right); /* named anchor e.g. anchor-name: --main; */

CSSについて聞いたばかりです round() 先日機能します。値が必要で、それを丸めます。ハ。

line-height: round(2.2, 1); /* 2 */

私は他の多くのCSS関数でブログを書いていました 聞いたことがありません。 Firefoxでこのデモを試してください なぜそれがクールになる可能性があるかのかなり明確な例を見るために。もちろん、ダン・ウィルソンははるかに包括的な見方でそれを越えています 新しいCSS数学：round（）。ダンは構文をよく見て、値だけでなく、丸めを行いたい間隔を渡す方法を共有します。その後、オプションでは、それがどのように行われるかが重要な場合は、「丸め戦略」でもあります。

これは、「以前は困難または不可能だったが、今ではそうではない」「興味深いレイアウト関連のもの」のカテゴリーに該当するように感じます。または、少なくとも「以前にJavaScriptでこれを行う必要があるでしょうが、実際にはCSSでより理にかなっています。」

私たちは得るつもりのようです scrollbar-color そして scrollbar-width すべてのブラウザにわたって 実際に 今。これは、古いもののより熟成可能な（Get Gone Wild）WebKitスタイルではなく、これを行うことの「実際の仕様バージョン」です。もっと能力があればいいのにと思いますが、いつでもそれを基準にします。

私がまだこの「難しいCSSレイアウトのもの」のキックをしている間、あなたはアレックス・リヴィエールからこのペンを見なければなりません これは、この湾曲したグリッドを処理します。

これについて私に印象的なことは… ない 奇妙に見えます。ガラスのエレベーターの中に立って、これらのブロックを見ているなら、それがまさにそれらがどのように見えるかのようなものです。しかし、スクロール中にそれをやってのけるために、比較的エキゾチックなものもあります transform それらにアクションが発生する必要があります。これには、CSSの新しい三角関数が含まれます（この場合、巻物のタイムラインとともに、わかります）。

そのCSSを覗いてみてください。 変換はほんの数行ですが、すごいそれは空想です。