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

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-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 ですか？グラデーション？

アプローチを多様化し、ウェブで構築するすべての方法を学びましょう。

デモを作成し、ツイートしてください。リンクを送っていただければ、以下のコミュニティ リミックスのセクションに追加いたします。

コミュニティ リミックス