iT邦幫忙

2021 iThome 鐵人賽

DAY 8
1
Modern Web

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

Day 08:「兔老闆的文件」- 半透明的我及有陰影的你

Day08-Banner-not-yet

(場景快速轉換到兔大王公司)

兔老闆:
「這個 logo 要有一點陰影,沒有底色也太單調」
「然後這個浮水印刷淡點啊,字都看不到了」
「最好是顏色豐富、撞色一點,你懂中華民國美學嗎?」
「大概就這樣,你先再去修一下」

兔員工:
「好...」
「唉,兔老闆又改需求了!」
「昨天,說要簡潔有力 ... 今天,又說不夠氣派!」
「算了,多做事少說話,不然等等又被覺得在偷懶。」

兔員工面對慣兔老闆的刁難,到底怎麼做比較好呢?
就讓我們繼續,看下去。
 

carrotPoint 令人眉頭一皺的案情

這邊是那名員工要修改的文件

<doc class="flex flex-col items-center">
  <logo class="border rounded-xl w-32 h-32 p-5 my-3">
    <img class="w-full" src="https://i.imgur.com/FTAvuYj.png">
  </logo>
  <main class="flex justify-center items-center">
    <content class="text-lg">
      <span class="text-3xl font-bold block mb-3">沿革</span>
      兔大王公司成立於 2021 年。主要業務範圍是製作高科技紅蘿蔔,
      同時也是知名團體兔兔教的開運紅蘿蔔御用製作廠商。<br>
      創辦人兔大王白手起家,早在十年多前,一開始賣的都是普通的發光紅蘿蔔,而非現在的高科技紅蘿蔔。
      兔大王堅持每根發光紅蘿蔔都是純手工打造,且還要保持相同的質感與水準。<br>
      現今雖然高科技紅蘿蔔的生產極度仰賴機器,但精神不變。每根產出的高科技紅蘿蔔皆為手工脫模、檢查及包裝。
    </content>
    <sign class="bg-gray-400">
      兔大王公司
    </sign>
  </main>
</doc>

這 ... 就是你要修改的文件嗎 ...?
做成這樣難怪會被老闆退件啊!

兔員工:
「可是 ... 好像沒有更好的辦法了啊」
「老闆說加 logo 和浮水印 ... 就加了」

蛤 ... 叫你加可不是加上去就好啦,阿呆兔!
要加的好看、不突兀!

算了用講的你不會明白,我示範一次吧~

嗯? 你們說你們也要看?
好啊,我放雲端給你們,來,在這裡

沒問題的話,那就開始來動手囉!
 

carrotPoint 陰影 (box-shadow)

藉由 shadow-{陰影量} 這個功能,我們可以設定 / 改變區塊的陰影,例如 shadow-inner 功能是為區塊加上內陰影

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

  • shadow-sm
  • shadow
  • shadow-md
  • shadow-lg
  • shadow-xl
  • shadow-2xl
  • shadow-inner
  • shadow-none
     

既然兔老闆第一個提到的是陰影,那我們就先來做陰影的部分吧。使用 shadow-lg 來加上大量級 (large) 的陰影,我們也順便來用 bg-yellow-200 弄上個背景色:

<doc class="flex flex-col items-center">
  <logo class="border rounded-xl w-32 h-32 p-5 my-3 shadow-lg bg-yellow-200">
    <img class="w-full" src="https://i.imgur.com/FTAvuYj.png">
  </logo>
  <main class="flex justify-center items-center">
    ...

有~可以。
阿呆兔你看,其實要有質感並不難啊!

接下來老闆說要調什麼?

兔員工:
「我看一下,是浮水印的部分」

浮水印嗎? 好,這也不難~
 

carrotPoint 背景不透明度 (background-opacity)

藉由 bg-opacity-{不透明度} 這個功能,我們可以設定 / 改變 元素的背景色彩不透明度,例如 bg-opacity-0 功能是元素的背景色彩不透明度設為 0 %,也就是完全透明

以下是預設可以使用的背景不透明度功能:

  • bg-opacity-0
  • bg-opacity-5
  • bg-opacity-10
  • bg-opacity-20
  • bg-opacity-25
  • bg-opacity-30
    ...
  • bg-opacity-70
  • bg-opacity-75
  • bg-opacity-80
  • bg-opacity-90
  • bg-opacity-95
  • bg-opacity-100

聽起來可能有點拗口,其實所謂的不透明度是指數字越低越透明,數字越高越不透明。

 

我們這邊用 bg-opacity-20 讓背景色彩的不透明度變為 20 %:

    ...
    <sign class="bg-gray-400 bg-opacity-20">
      兔大王公司
    </sign>
  </main>
</doc>

OK,那個背景色變得沒有這麼深了,但是字還是很深。

我們接下來調整文字吧!
 

carrotPoint 文字不透明度 (text-opacity)

藉由 text-opacity-{不透明度} 這個功能,我們可以設定 / 改變 元素內文字的不透明度,例如 text-opacity-0 功能是把元素的文字不透明度設為 0 %,也就是完全透明

以下是預設可以使用的文字不透明度功能:

  • text-opacity-0
  • text-opacity-5
  • text-opacity-10
  • text-opacity-20
  • text-opacity-25
  • text-opacity-30
    ...
  • text-opacity-70
  • text-opacity-75
  • text-opacity-80
  • text-opacity-90
  • text-opacity-95
  • text-opacity-100

跟背景不透明度相同,數字越低越透明,數字越高越不透明。

 

我們這邊用 text-opacity-30 讓文字的不透明度變為 30 %:

    ...
    <sign class="bg-gray-400 bg-opacity-20 text-opacity-30">
      兔大王公司
    </sign>
  </main>
</doc>

看起來都可以了,但是胡蘿蔔是不是 ... 沒有調到?
因為胡蘿蔔是背景圖片啦,那我想到了。

把剛剛做的都復原,我們來用更快的方法~
 

carrotPoint 不透明度 (opacity)

藉由 opacity-{不透明度} 這個功能,我們可以設定 / 改變 元素的不透明度,例如 opacity-0 功能是把元素的不透明度設為 0 %,也就是完全透明

以下是預設可以使用的元素不透明度功能:

  • opacity-0
  • opacity-5
  • opacity-10
  • opacity-20
  • opacity-25
  • opacity-30
    ...
  • opacity-70
  • opacity-75
  • opacity-80
  • opacity-90
  • opacity-95
  • opacity-100

也跟背景不透明度、文字不透明度相同,數字越低越透明,數字越高越不透明。 只是元素不透明度會改變整個元素 (包含所以子元素及內容) 的透明度。

 

我們把前面的背景不透明度和文字不透明度去掉,改用 opacity-30 讓整個元素的不透明度變為 30 %:

    ...
    <sign class="bg-gray-400 opacity-30">
      兔大王公司
    </sign>
  </main>
</doc>

哈! 完成了!
這樣就有浮水印,又不會影響閱讀了!

可以準備去交件囉~ 這件功勞算你自己的,阿呆兔。

兔員工:
「謝謝兔兔,終於 ... 可以交件了」 (泣
 

透過幫阿呆兔員工做這份文件,
有沒有剛好直接上手了不透明度與陰影呢?

希望阿呆兔不會再被退件了,希望。

是說 ...
你們也要交一份給我啊! 別以為可以躲掉!
 

carrotPoint 給你們的回家作業:


關於兔兔們:


 


( # 兔兔小聲說 )

兔老闆:
「不錯嘛,唸你一下馬上就做好了,其實你還是做得到的啊。 那,既然你都可以完成了,想必接下來這個對你來說也不困難的啦~我覺得啊其實現在這樣很不錯,但是還可以在簡潔一點,再去改改吧!」

兔員工:
「好,知道了,我現在馬上去弄。」
(轉身離開兔老闆辦公室)

兔員工:
「兔兔~!」 (QQ

诶....! 又要改了!?


上一篇
Day 07:「金魚模仿遊戲~」- 用 Tailwind 來對齊內容
下一篇
Day 09:「啊~不要碰我!我會變色~」- 變化模式 (Variants)
系列文
排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!32

尚未有邦友留言

立即登入留言