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

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

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

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

コミュニティ リミックス