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

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 を使用していますか？グラデーション?!

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

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

コミュニティ リミックス