探索如何使用 CSS 重現視錯覺的有趣之處。
我們會在這篇文章中玩樂!有 100 種方法可以達成這個光學錯覺,我只是想和各位分享自己的想法,但鼓勵您多方嘗試。請試用示範版並查看原始碼。
如果你偏好使用影片,也可以觀看這篇 YouTube 文章:
總覽
這種錯覺的名稱就是「咖啡廳牆插圖」。什麼都找不到彎曲的線條,但我們的眼睛會認為一隻眼花撩亂。這很難讓人相信,但重新建構它絕對有助於您看清錯覺。
標記
此項目的 HTML 是簡單明瞭的列與欄。<body>
是具有子項 <div class="row">
的容器。每列都包含五個 <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?漸層?!
讓我們帶您更多元的方法,並瞭解運用網路打造網站的所有方式。
請建立示範並透過 Twitter 推文連結,我就能將這項工具新增至下方的「社群重混」部分!