スクロール要素を下にスクロールしてスタートしたい非常に正当な理由がたくさんあり、 滞在する [ユーザーがバックアップしていない限り）下部にスクロールしました。JavaScriptは要素のスクロール位置を調整できるため、これまでにJavaScriptでこれを行うことができます。主にCSSでこれを行う方法があります。anchor-overflow プロパティが存在します 非常に素晴らしいCSSトリックだと思います。
別の方法があります！キティ・ジローデルはそれをカバーします CSSのみのボトムアンカースクロールエリア。トリックのベースは非常に単純で、追加の要素は必要ありません。あなたはただ設定します flex-direction: column-reverse; そして 次に、HTMLを逆方向に内部に入れます。 したがって、あなたが視覚的に下部にピン留めしたいものは、要素の上部に置いてください。ある意味では、これは私にとって理にかなっています。あなたが最初に読みたいことは一番上にあるからです。
しかし、キティが指摘するアクセシビリティの懸念があります。 「視覚順とDOM注文の間に切断を作成します。これは、スクリーンリーダーユーザーにとって混乱する可能性があります。」スクリーンリーダーユーザーでそれを確認したいと思います（おそらく、画面リーダーを使用する人には主に適用されます そして ビジョンを持っています）。しかし、それは良い点であり、CSSを使用して、ソースの順序が示唆するものとは異なるように物事を視覚的に配置するときにいつでも現れる古典的な問題です。フォーカス状態が画面に飛びついていることを予測できないことを想像できると確信しています。
これをすべてとてもニュースに値するものは、 CSSはソリューションに取り組んでいます 私が知らなかったこれについて：
reading-order: normal | flex-visual | flex-flow | grid-rows | grid-columns | grid-order私たちの場合、使用できます
reading-order: flex-visual照準的なユーザーとスクリーンリーダーのユーザーがフィードを消費する方法を調整します。
そのため、FlexBoxを使用して注文を逆転させましたが、このプロパティを強制することで、要素をトップツーボトム（視覚順）読み取ることができます。私は再び、それを主張するかもしれません これ ケース、ユーザーはそうかもしれません 欲しい ボトムツートップを読む。しかし、少なくとも今はオプションがあります。
そしてこれ reader-order ものは一般的に面白いです。 FlexBoxを使用して、Flexアイテムがどこに配置されているかを完全に混乱させた場合のように order たとえば、2位の7番目のアイテム、1位の19番目のアイテムを配置して、読み取り順序をに更新します。 flex-visual 素晴らしいでしょう。ないことに気づきました grid-visual しかし、これは好奇心が強いです。なぜなら、あなたは同じようにグリッドの順序を台無しにすることができるからです。
ジョナサン・スヌークは、レンチキュラーカードのアイデアで遊びをしています。 それらは、あなたが見る角度に応じてあなたが見ることができる2つの異なる画像を持つ隆起したプラスチックのノベルティカードです。それ以上！
Appleがライブ写真をリリースして以来、私は常に同様の効果を作成するために使用できると感じていましたが、私が見た写真アプリは、私が出会ったものから実装していません。
楽しんだ デモで遊ぶ の上 携帯 （deviceorientation APIが事である場所）：
ここで実験の精神が大好きです。あなたが思う何かを考えるように すべき 存在しますが、明白な方法ではないようで、とにかくそれを構築します。
Yairもアイデアを持っていました ボックスシャドウがクールになる可能性があることは、実際には影ではなく、 ぼやけ その代わり。
実装は、私にアピールする賢さの完璧な竜巻です。それは信じられないほど複雑ではありませんが、すぐには考えないさまざまなCSS機能を使用する必要があります。最終的に、それは次のとおりです。
backdrop-filter。 元素の長方形の性質のために、2つのマスクが必要だと思います。私はそれを単一の放射状勾配で試してみたいと思うでしょうが、あなたは角の近くでぼやけていると思います。
ダン・ウィルソンは常に、新しいCSS機能と彼らがロックを解除する可能性を調べて良い仕事をしています。特に、少し難解な、または数学機能のように一見しているように見える新しい機能。
で 新しいCSS Math：POW（）、SQRT（）、および指数フレンド、ダンはこれらの新しいCSS関数（およびさらにいくつか）を見て、やや実用的なことを指摘します。たとえば、ヘッダーサイズが互いにまっすぐな倍数ではなく、曲線上で成長する誤植システム。または、数値を直線的にアニメーション化することにより、緩和効果をシミュレートしますが、移動距離が計算されます pow() その数について。現在、ピタゴラスの定理を迅速に機能させる機能もあります。
あなたがこのようなものに興味があるなら、ダン 見た rem() そして mod() ここ、これは、数字を別の数値に分割するときに残っているものを決定するための同様の方法です。 9は3で割り切れますか？はい、残りが0であるかどうかを知ることができます。しかし、Webデザインでは、必要に応じて693pxのスペースに収まる125pxグリッド列がいくつあるかを把握できるようなことをすることができます。
そして持っています トリガー関数を見ました 同様に、そしてその後すぐに、 Hypersphereは、CSSのランダム性のシミュレーションを調べました それらの機能を使用します。 sin() たとえば、機能は-1から1に調節します。したがって、それをおならにして種子の値を組み込むことで、かなりむき出しにすることができます ランダムに見えるCSS出力：
最近のミスのリンクは、アフマドシェイデッドのリンクです CSSコンテナクエリのインタラクティブガイド。彼のインタラクティブなガイドは常に傑出しています。これは、コンテナクエリが役立つ場所の実用的な例でいっぱいです。
Be the first to comment
