CSS で錯覚を再現する方法について、楽しく学びましょう。
今回の投稿では、少し楽しいことをしましょう。この錯覚を実現する方法は 100 通り以上あるはずです。ここでは私の考えを共有しますが、ぜひご自身で試してみてください。デモを試すとソースを表示する。
動画で確認したい場合は、YouTube 版の投稿をご覧ください。
概要
この錯覚の名前は、カフェの壁の錯覚です。曲がった線はどこにもありませんが、斜めに見えます。信じられないかもしれませんが、再構築することで、錯覚を解消できます。
マークアップ
この場合の HTML は、単純な行と列です。<body>
は、子用の <div class="row">
を含むコンテナです。各行には 5 つの <div
class="square">
要素が含まれています。
<div class="row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
…
スタイル
CSS グリッドを選択したのは、行の表示スタイルに適していると思われたからです。また、justify-content
も使用できるため、行の子要素をオフセットするのに適していると思われました。
ボディタイプ
ボディスタイルから、display: grid
と grid-auto-rows
を使用して行レイアウトを指定しました。行サイズに表示される calc()
は、各行の境界を考慮し、ビューポート全体にエフェクトを収めるのに役立ちます。
body {
display: grid;
grid-auto-rows: calc(20vh - 4px);
gap: 4px;
background: gray;
margin: 0;
}
行のスタイル
ここでは、グリッドを再度選択しましたが、行を作成する代わりに、grid-auto-flow: column
を使用して方向を列に変更しました。次に、列サイズを定義し、行にインライン パディングを少し追加して、ボックスがビューポートの端にぶつからないようにします。次に、特定の行をターゲットに設定し、コンテンツを center
または end
に配置して、錯覚を助長するオフセットを作成します。
.row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 9vw;
padding-inline: 4vw;
gap: 10vw;
background: white;
}
.row:nth-child(even) {
justify-content: center;
}
.row:nth-child(3n) {
justify-content: end;
}
スクエア スタイル
あとは、正方形の色を変更して枠線を追加するだけです。
.square {
border-inline: 4px solid gray;
background: black;
}
まとめ
私の方法をご覧になったところで、あなたならどうしますか?🙂? 浮動小数点数は?Flexbox ですか?グラデーション?
アプローチを多様化し、ウェブで構築するすべての方法を学びましょう。
デモを作成して、ツイートしてください。リンクを送信していただければ、下のコミュニティ リミックスのセクションに追加します。