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 を選択しましたが、それを使用して行を作成するのではなく、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、グラデーション
多様なアプローチを活用し、ウェブでアプリをビルドするためのあらゆる方法を学びましょう。
デモを作成してツイートのリンクをお願いします。下のコミュニティ リミックス セクションに追加します。
コミュニティのリミックス
- グラデーション付きの Mark Boots: デモとコード