iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
0
Modern Web

CSS Secrets 導讀系列 第 9

Secret 7:(偽)隨機背景圖案

在自然界完美重複的圖案根本是不存在,即使是同一品種的花,一定會有少許差異,沒有二朵花是完全一模一樣。

再看一下前面我們做的練習,一模一樣的圖案有規律的重複,不管用了再多層linear-gradient,仔細檢查還是能發現圖案之間的「接縫」。有沒有方法,我們能用 CSS 模擬出自然、隨機的圖案呢?

這是一項不小的挑戰,因為 CSS 沒有原生產生隨機項目的功能。我們可以試著在linear-gradient加入四種顏色,每個顏色給不同的寬度好了,從範例裡還是能發現明顯的接縫,因為background-size寬度是80px嘛,每 80px 當然就重複一次相同的圖案。

background: linear-gradient(
  90deg,
  #df343d 15%, #840715 0, #840715 40%, #cb9885 0, #cb9885 65%, #955d42 0);
background-size: 80px 100%;

https://ithelp.ithome.com.tw/upload/images/20181024/20091606ZfTmTYEBZx.png

還有更好的方法嗎?

上面用的是單一圖層,前面我們學到linear-gradient可以同時疊很多層,那我們把各個顏色各放一層來看看。

background: #955d42;
background-image:
  linear-gradient(90deg, #df343d 10px, transparent 0),
  linear-gradient(90deg, #840715 20px, transparent 0),
  linear-gradient(90deg, #cb9885 20px, transparent 0);
background-size: 80px 100%, 60px 100%, 40px 100%;

https://ithelp.ithome.com.tw/upload/images/20181024/20091606cHM3Gjw6ey.png

這下子比較有隨機的感覺,不過仔細看,可以在240px的地方發現接縫,而這個值就是三個background-size 80, 60, 40 的「最小公倍數」。

白話一點講:第一層在80px後會再重複;第二層在60px後會再重複;第三層在40px後會再重複。因此最快在240px時三個圖層會「同時」重複,和0px時一樣。

所以說只要這個「最小公倍數」夠大,圖片要很寬才需要再重複相同的圖案,那我們要怎麼找出這個數字呢?

這個時候還是要求救中學時的數學課,有一種叫「質數」的東西,是除了自己和1之外就沒有任何數字可以整除它,比如說 2, 3, 5, 7, 11, 17, 23 等等。如果background-size都是質數,那最小公倍數會是所有數字相乘,那是非常大的。例如下面範例, 41*61*83=207583 這個寬度根本大於多數消費性電子產品的螢幕解析度,所以我們能放心使用。再加上條紋寬度也使用質數的話,圖案的隨機效果又更明顯。

 background: #955d42;
 background-image:
   linear-gradient(90deg, #df343d 11px, transparent 0),
   linear-gradient(90deg, #840715 23px, transparent 0),
   linear-gradient(90deg, #cb9885 41px, transparent 0);
 background-size: 41px 100%, 61px 100%, 83px 100%;

https://ithelp.ithome.com.tw/upload/images/20181024/20091606eMqZCn5fx7.png

這個方法叫做 Cicada Principle,中文叫蟬原則。這個原則並非只能用在背景圖案,任何需要重複的值皆能應用來產生隨機的效果。

CodePen


上一篇
Secret 6: 更多的背景圖案
下一篇
Secret 8: 不間斷的圖片邊界
系列文
CSS Secrets 導讀30

尚未有邦友留言

立即登入留言