Day 08：「兔老板的文件」- 半透明的我及有阴影的你

(场景快速转换到兔大王公司)

兔老板：
「这个 logo 要有一点阴影，没有底色也太单调」
「然後这个浮水印刷淡点啊，字都看不到了」
「最好是颜色丰富、撞色一点，你懂中华民国美学吗？」
「大概就这样，你先再去修一下」

兔员工：
「好...」
「唉，兔老板又改需求了！」
「昨天，说要简洁有力 ... 今天，又说不够气派！」
「算了，多做事少说话，不然等等又被觉得在偷懒。」

兔员工面对惯兔老板的刁难，到底怎麽做比较好呢？
就让我们继续，看下去。
 

令人眉头一皱的案情

这边是那名员工要修改的文件

<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 和浮水印 ... 就加了」

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

算了用讲的你不会明白，我示范一次吧～

嗯？ 你们说你们也要看？
好啊，我放云端给你们，来，在这里。

没问题的话，那就开始来动手罗！
 

阴影 (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">
    ...

有～可以。
阿呆兔你看，其实要有质感并不难啊！

接下来老板说要调什麽？

兔员工：
「我看一下，是浮水印的部分」

浮水印吗？ 好，这也不难～
 

背景不透明度 (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，那个背景色变得没有这麽深了，但是字还是很深。

我们接下来调整文字吧！
 

文字不透明度 (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>

看起来都可以了，但是胡萝卜是不是 ... 没有调到？
因为胡萝卜是背景图片啦，那我想到了。

把刚刚做的都复原，我们来用更快的方法～
 

不透明度 (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>

哈！ 完成了！
这样就有浮水印，又不会影响阅读了！

可以准备去交件罗～ 这件功劳算你自己的，阿呆兔。

兔员工：
「谢谢兔兔，终於 ... 可以交件了」 (泣
 

透过帮阿呆兔员工做这份文件，
有没有刚好直接上手了不透明度与阴影呢？

希望阿呆兔不会再被退件了，希望。

是说 ...
你们也要交一份给我啊！ 别以为可以躲掉！
 

给你们的回家作业：

• 作业实施要点：
  • 试着 logo 背景色或阴影量级
  • 练习使用各种不透明度
• 前面分享的云端：连结底加啦！
• 准备交给老板的：快来帮兔老板验收
   

关於兔兔们：

• Tailwind CSS 台湾官网
• Tailwind CSS 台湾 (脸书粉丝专页)
• 兔兔教 × Tailwind CSS Taiwan (脸书社群)
• 兔兔教大本营

( # 兔兔小声说 )

兔老板：
「不错嘛，念你一下马上就做好了，其实你还是做得到的啊。 那，既然你都可以完成了，想必接下来这个对你来说也不困难的啦～我觉得啊其实现在这样很不错，但是还可以在简洁一点，再去改改吧！」

兔员工：
「好，知道了，我现在马上去弄。」
(转身离开兔老板办公室)

兔员工：
「兔兔～！」 (QQ

诶....！ 又要改了！？