Day 04：「当个方块设计师」- 制作自己的方块，改变大小并加上背景色彩及边框

Day 3 的作业有没有写呢各位？
如果昨天有练习的话，应该觉得不会太难吧！

我们今天会用一样的方式来介绍 + 练习，
今天的也不难哦～是做方块的各种样式变化

那麽，就开始罗！
 

材料

首先，是材料。

「今天 DIY 课程的材料有：砂糖一匙、蛋两颗、面粉半包 ...」

不对啦，今天做的是方块，材料怎麽是这些！
明明就是这个～

<div>
  兔兔方块
</div>

齁对啦，刚刚拿到食谱了啦。
没错，其实材料很简单，
就是我们最常使用的、标榜无色无味不太占空间的 <div> 标签。

材料有了，接着快进到下一步吧！
 

背景色彩 (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>

太好了，总算先设计出第一步了！
我们加紧脚步。
 

宽度 (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，妥妥的，这样宽度就不会撑满整个页面了！
但看起来好像太扁了欸，我们来看还能调整什麽吧～
 

高度 (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>

完美～～这样就是正方形了！
但是看他就只是个色块，说实在好像称不上是设计对吧？
那我们接着就需要这个啦 ...！
 

边框宽度 (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 兔，那个边框看起来很不明显欸，
要怎麽办啦！

没关系，不要紧张。 一切都在掌控之中！
那我再拿出一个道具来吧！
 

边框色彩 (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 还是有他设计的巧思在，有兴趣的人看完今天的文章後可以看一下延伸阅读，我把连结放在最後面罗，去找吧～！)
 

圆角 (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 ...
做起来也是很简单啦！
 

背景图片 (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

我们这个只有设定渐层的方向，没有设定颜色，所以等等要用这个搭配其它的功能一起使用！
 

渐层色标 (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-tl、from-yellow-300、via-red-500 和 to-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 连结一起贴在下面，大家要记得做作业哦！

给你们的回家作业：

• 作业实施要点：
  • 试着调配自己的方块样式
• 毫不起眼的方块：点我打开作业
• 兔惯老板加需求前的完成品：点我打开范本
• 最後变成 IG 配色的完成品：点我打开范本

不是我写的延伸阅读：你们不要再吵了啦！小米 200 万做的新 Logo 已经很棒了啦！

关於兔兔们：

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

( # 兔兔小声说 )

昨天的作业有做吗？ 没做也没关系哦！

因为你明天要一次交两份啦！