iT邦幫忙

2021 iThome 鐵人賽

DAY 4
3
Modern Web

排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!系列 第 5

Day 04:「當個方塊設計師」- 製作自己的方塊,改變大小並加上背景色彩及邊框

Day04-Banner

Day 3 的作業有沒有寫呢各位?
如果昨天有練習的話,應該覺得不會太難吧!

我們今天會用一樣的方式來介紹 + 練習,
今天的也不難哦~是做方塊的各種樣式變化

那麼,就開始囉!
 

carrotPoint 材料

首先,是材料。

「今天 DIY 課程的材料有:砂糖一匙、蛋兩顆、麵粉半包 ...」

不對啦,今天做的是方塊,材料怎麼是這些!
明明就是這個~

<div>
  兔兔方塊
</div>

齁對啦,剛剛拿到食譜了啦。
沒錯,其實材料很簡單,
就是我們最常使用的、標榜無色無味不太佔空間的 <div> 標籤。

材料有了,接著快進到下一步吧!
 

carrotPoint 背景色彩 (bg-color)

藉由 bg-{顏色}-{深淺度} 這個功能,我們可以設定 / 改變區塊的背景顏色,例如 bg-black 功能是將背景設定為黑色

其實,Tailwind 所定義出來的顏色都是共用的,你可以自己新增顏色。 所以只要你新增,就能夠把顏色用在所有可以用的地方。

以下是預設可以使用的背景色彩功能:

注意:還有些顏色不具深淺度,如白色 (bg-white)、黑色 (bg-black),透明 (bg-transparent)

 

在這邊我們把方塊的顏色設為漂亮的藍色 bg-blue-400,但是字看不清楚了,所以我們再加上個 text-white

<div class="bg-blue-500 text-white">
  兔兔方塊
</div>

太好了,總算先設計出第一步了!
我們加緊腳步。
 

carrotPoint 寬度 (width)

藉由 w-{寬度} 這個功能,我們可以設定 / 改變區塊寬度,例如 w-full 功能是將寬度設為 100%

以下是預設可以使用的寬度功能:

  • w-0
  • w-px
  • w-1
    ...
  • w-96
  • w-1/2
  • w-1/3
    ...
  • w-full
  • w-screen

接著我們把方塊的寬度設定為 w-40,也就是相當於 10rem,但是這次卻變成字沒有置中,我們快加上之前學過的文字置中 text-center 吧:

<div class="bg-blue-500 text-white w-40 text-center">
  兔兔方塊
</div>

OK,妥妥的,這樣寬度就不會撐滿整個頁面了!
但看起來好像太扁了欸,我們來看還能調整什麼吧~
 

carrotPoint 高度 (height)

透過 h-{高度} 這個功能,我們可以設定 / 改變區塊的高度,例如 h-1/2 功能是將高度設為 1/2,也就等同於 50%

以下是預設可以使用的高度功能:

  • h-0
  • h-px
  • h-1
    ...
  • h-96
  • h-1/2
  • h-1/3
    ...
  • h-full
  • h-screen

接著我們用 h-40 來增加高度,把方塊變成正方形:

<div class="bg-blue-500 text-white w-40 h-40 text-center">
  兔兔方塊
</div>

完美~~這樣就是正方形了!
但是看他就只是個色塊,說實在好像稱不上是設計對吧?
那我們接著就需要這個啦 ...!
 

carrotPoint 邊框寬度 (border-width)

透過 border-{方向}-{邊框寬度} 這個功能,我們可以設定 / 改變邊框寬度,例如 border-t-4 功能是將上邊框寬度設定為 4px

以下是預設可以使用的邊框寬度功能:

  • 全部邊框
    • border-0
    • border
    • border-2
    • border-4
    • border-8
  • 上邊框
    • border-t-0
    • border-t
      ...
    • border-t-8
  • 右邊框
    • border-r-0
      ...
    • border-r-8
  • 下邊框
    • border-b-0
      ...
    • border-b-8
  • 左邊框
    • border-l-0
      ...
    • border-l-8

接著我們用 border-8 來增加一個寬度為 8px 的邊框:

<div class="bg-blue-500 text-white w-40 h-40 text-center border-8">
  兔兔方塊
</div>

欸 ... 多啦 A 兔,那個邊框看起來很不明顯欸,
要怎麼辦啦!

沒關係,不要緊張。 一切都在掌控之中!
那我再拿出一個道具來吧!
 

carrotPoint 邊框色彩 (border-color)

透過 border-{色彩}-{深淺度} 這個功能,我們可以設定邊框的色彩,例如 border-pink-500 功能是將邊框色彩設定成粉色。 (#EC4899)

顏色呢,跟前面一樣,
以下是預設可以使用的邊框色彩功能:

注意:還有些顏色不具深淺度,如白色 (border-white)、黑色 (border-black),透明 (border-transparent)

接著我們用 border-blue-300 把邊框染上一個適合它的顏色:

<div class="bg-blue-500 text-white w-40 h-40 text-center border-8 border-blue-300">
  兔兔方塊
</div>

其實顏色這種東西是隨你喜好,不過通常同個色系的設計上,顏色明度差兩階時看起來會比較順眼。以兔兔方塊為例,底色較深,邊框就調淺兩階;如果今天底色比較淺,就把邊框顏色調深兩階。

總覺得哪裡怪 ... 啊!我知道了! 不夠圓!
四個邊角太尖了難怪不好看,應該要像小米的新 logo 一樣 ...

好啦沒有啦,人家的 logo 被嘴說改版後就像是只有上圓角而已。

但我們的確!缺的就是等一下要介紹的功能 ~ 圓角啦!

(但其實小米的新 logo 還是有他設計的巧思在,有興趣的人看完今天的文章後可以看一下延伸閱讀,我把連結放在最後面囉,去找吧~!)
 

carrotPoint 圓角 (border-radius)

透過 rounded-{方向}-{圓角程度} 這個功能,我們可以設定區塊的圓角程度,例如 rounded-r-xl 功能是把區塊右側的圓角程度設為 0.75rem

以下預設是可以使用的方向

  • (全部)
  • t (上)
  • tr (右上)
  • r (右)
  • br (右下)
  • b (下)
  • bl (左下,不是 boy's love)
  • l (左)
  • tl (上左)

以下是預設可以使用的圓角程度:

  • rounded-none
  • rounded-sm
  • rounded
  • rounded-md
  • rounded-lg
  • rounded-xl
  • rounded-2xl
  • rounded-3xl
  • rounded-full

我們用 rounded-3xl 來把兔兔方塊變得圓潤一點吧:

<div class="bg-blue-500 text-white w-40 h-40 text-center border-8 border-blue-300 rounded-3xl">
  兔兔方塊
</div>

哇!這樣就全部完成了 ... 嗎 ...
兔慣老闆覺得這樣太單調了沒有質感啦 (哭

他說要變成 IG logo 的那種感覺,
那不就要漸層了嗎 ... 可是我用 Tailwind ...
做起來也是很簡單啦!
 

carrotPoint 背景圖片 (background-image)

透過 bg-gradient-{漸層方向} 這個功能,我們可以設定背景圖片為漸層,且指定漸層的方向,例如 bg-gradient-to-r 功能是把背景漸層方向設為由左至右

以下是預設可以使用的漸層方向功能:

  • bg-gradient-none
  • bg-gradient-t
  • bg-gradient-tr
  • bg-gradient-r
  • bg-gradient-br
  • bg-gradient-b
  • bg-gradient-bl
  • bg-gradient-l
  • bg-gradient-tl

我們這個只有設定漸層的方向,沒有設定顏色,所以等等要用這個搭配其它的功能一起使用!
 

carrotPoint 漸層色標 (gradient-color-stops)

透過 {標的}-{顏色}-{深淺度} 這個功能,我們可以設定漸層的顏色,需搭配背景圖片的漸層方向使用,例如 bg-gradient-to-r from-black 功能是把背景漸層方向設為由左邊的黑色,至右邊的透明

以下是預設可以使用的標的功能:

  • from (起始點)
  • via (中繼點)
  • to (結束點)

顏色則是跟前面都一樣:

注意:還有些顏色不具深淺度,如白色 ({from,via,to}-white)、黑色 ({from,via,to}-black),透明 ({from,via,to}-transparent)

我們用 bg-gradient-to-tlfrom-yellow-300via-red-500to-indigo-500 來把兔兔方塊變成像 IG logo 的顏色吧:

<div class="bg-gradient-to-tl from-yellow-300 via-red-500 to-indigo-500 text-white w-40 h-40 text-center border-8 border-blue-300 rounded-3xl">
  兔兔方塊
</div>

哇!這次就真的全部完成了啦

一樣哦,上面所使用的這些功能還不是全部,
但是這些都是最常用的部份!

嘻嘻,今天就到這裡囉!

我一樣會把今天使用到的範例 div 和成品 playground 連結一起貼在下面,大家要記得做作業哦!

carrotPoint 給你們的回家作業:

不是我寫的延伸閱讀:你們不要再吵了啦!小米 200 萬做的新 Logo 已經很棒了啦!


關於兔兔們:


 


( # 兔兔小聲說 )

昨天的作業有做嗎? 沒做也沒關係哦!

因為你明天要一次交兩份啦!


上一篇
Day 03:「開始乘風飛行!」- 樣式都不見了嗎?快用 Tailwind 輕鬆調整文字版式
下一篇
Day 05:「別過來!要保持社交距離!」 Tailwind 中的空間與距離
系列文
排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!32

尚未有邦友留言

立即登入留言