[CSS100] Day 01 Hello World
Cathy P
 2021-03-10 20:12:26      

Hello World Demo

See the Pen 100DaysCss #01 by Cathy (@smile25896) on CodePen.

CSS 100天挑戰的第一天，因為是第一天基本上沒有什麼特別難的地方。用div畫出「100」的圖案，簡單排版下方的字，最後加上漸層背景就能完成了。本系列的文章不會手把手的詳細紀錄整個程式碼撰寫過程與說明，只會簡單筆記用到的語法與技巧。

學習重點

  1. 畫出「100」的字樣圖案
  2. 線性漸層：linear-gradient

畫出「100」的字樣圖案

「1」斜的和豎的兩筆畫分別由兩個div組合而成的，斜的部分透過transform: rotate(50deg)讓它旋轉就能達成斜的效果，再透過絕對定位調整位置，就能組合成一個1。
另外為了讓「1」看起來不那麼銳利，設定border-radius: 3px讓它有圓角。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.one1{
  height: 40px;
  width: 20px;
  transform: rotate(50deg);
  position: absolute;
  top: 0;
  left: -10px;
}

.one2{
  height: 100px;
  width: 22px;
  position: absolute;
  top: 0px;
  left: 7px;
  z-index: 3;
}

.one1,.one2{
  background: #fff;
  border-radius: 3px;
}

「0」的部分是用div透過border-radius: 50%畫一個圓，中心不填色只填邊框的顏色，就可以畫成一個空心的圓。

1
2
3
4
5
6
7
.zero1,.zero2{
  height: 100px;
  width: 100px;
  box-sizing: border-box;
  border: 22px solid #fff;
  border-radius: 50%;
}

線性漸層：linear-gradient

漸層其實分很多種，線性漸層、放射狀漸層等等，本次要介紹的linear-gradient是線性漸層，顧名思義就是往單一個方向直線做漸變的就叫做線性漸層。

最簡單的寫法：

1
background: linear-gradient(red, blue);
因為沒有指定方向，預設由上到下

若要改成從左到右可以寫成下面兩種寫法：

1
2
background: linear-gradient(to right, red, blue);
background: linear-gradient(90deg, red, blue);

也可以調整顏色的起始位置：

1
background: linear-gradient(90deg, red 50%, blue 100%);
紅色的起始位置從50%的位置開始，所以左半邊的部分全部都是紅色，漸層的部分只從中間到右邊而已。

想要再增加一個顏色的話，只要在參數在增加一個顏色就可以了：

1
background: linear-gradient(90deg, red, blue, black);
因為沒有設定顏色的起始位置，所以會平均分配。

漸層的學問其實很大，除了本次介紹的線性漸層以外，css還提供了許多其他漸層的語法，可以參考深入理解 CSS 漸層 ( CSS Gradient )。

另外漸層的色彩模式也有很多種，像是Lab、Lch、HSL、RGB，CSS原生的漸層是採用RGB的漸層方法，在顏色的過度區常常會有混濁髒髒的感覺，其實還有很多很美的漸層。詳細可以參考視覺上的完美漸層（Chromatic）這篇文章。