曲線状のグリッド錯覚を作成する

CSS を使って錯覚を再現する楽しいストーリーです。

Adam Argyle 氏

この投稿では、ちょっとした楽しみをご紹介します。錯覚を起こす方法は 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、グラデーション

多様なアプローチを活用し、ウェブでアプリをビルドするためのあらゆる方法を学びましょう。

デモを作成してツイートのリンクをお願いします。下のコミュニティ リミックス セクションに追加します。

コミュニティのリミックス