題目

CSS Challenge Day1

上面的圖是題目，而我們要做出幾乎一樣的樣子，題目中還有附上出題官方的CodePen，也有附上給我們解題用的template，當我們真的不會的時候，還是可以參考他們的寫法，所以沒有想像中困難。
那麼我們就開始吧。

題目分析

一開始我會先看整體的框架，來拆解題目，目前看起來題目要做到的有：

1. 置中且固定寬度的範圍內，有漸層的底色。
2. 內部有一個置中的，用CSS繪製的100。
3. 100的下方有兩行文字。

注意要點

• 100文字彼此之間的 z-indx 層級問題。
• 下方小字彼此之間的行距。
• 確保主題在視覺寬度上達成一致，沒有凹凹凸凸的感覺（但他們實際上並不一致唷）。

開始解題

框架設計

.frame {
  position: absolute;
  font-family: 'Open Sans', Helvetica, sans-serif;
  background: linear-gradient(45deg, #1e5799 0%, #352d95 0%, #3bbec2 100%);
}

框架部分是頁面的基礎，提供整個設計的背景與佈局。以下是框架的主要設定：

• 漸層背景：透過 linear-gradient(45deg)，創造出從藍色 (#1e5799) 到青綠色 (#3bbec2) 的漸層背景。
• 字型選擇：因為這題中只有下方文字是真的文字，而他們剛好字型都一樣，所以這邊我參考了題目中的字型，並直接將字型設定在框架的 .frame 上，讓這題內的所有文字都能使用同一個字型。

繪圖區塊設計

1. 繪圖區塊基礎設定

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

我使用了 .center 來將主視覺固定在中央，並在裡面由上而下區分了三個區塊：

1. 數字「100」的繪製區塊
2. 「Days」文字區塊
3. 「CSS Challenge」文字區塊

在 .center 內，我使用了 position: absolute 和 top: 50% 與 left: 50%，結合 transform: translate(-50%, -50%)，使畫面在框架正中央。

2. 數字「100」區塊

.number {
	position: relative;
	width: 200px;
	height: 100px;
}

數字「100」的區塊，我取名為.number，並在裡面拆分了4個不同的 div，分別是1的兩個筆畫及後面的兩個00。
而這個區塊我使用 position: relative 來讓裡面的4個 div 的定位點能改變成以這個 .number 為主，好讓其他物體在裡面進行 absolute　的排版。

數字「100」的繪製

這裡因為數字1的第一筆畫會有超出主視覺範圍的狀況，所以我直接拆成4個 div 來進行製作，而不把1的兩個 div 包在一起，這樣能減少一些讓1的第二筆畫靠右等等的心智負擔，讓他可以直接靠左。

1. 數字「1」的製作

.one {
	position: absolute;
	top: 0;
	left: -17px;
	width: 20px;
	height: 42px;
	border-radius: 3px;
	background: white;
	z-index: 1;
	transform: rotate(50deg);
	box-shadow: 0 0 13px 0 rgba(0,0,0,0.2);
}
.two {
	position: absolute;
	width: 24px;
	height: 100px;
	border-radius: 3px;
	background: white;
	box-shadow: 0 0 13px 0 rgba(0,0,0,0.2);
	z-index: 4;
}

數字「1」是透過兩個傾斜的 div 來組合實現的。具體方法如下：

• 形狀設計：長方形由 height 和 width 定義，background: white 創造白色外觀。
• 旋轉：使用 transform: rotate(50deg) 讓這個長方形傾斜，模擬出「1」的第一筆畫的傾斜的樣子。
• 陰影：透過 box-shadow 增加陰影效果。
• 層級：看題目可以知道1的第一筆畫在數字中是最下面的層級，而第二筆畫是最上面，所以這邊把第一筆畫設定在 z-index: 1，而第二筆畫設定在 z-index: 4，把剩下的2跟3留給另外兩個00。

2. 數字「00」的製作

.zero {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 100%;
  border: 24px solid white;
  box-shadow: 0 0 13px 0 rgba(0,0,0,0.2);
}
.zero-one {
  z-index: 3;
  left: 18px;
}
.zero-two {
  z-index: 2;
  right: 0px;
}

數字「00」是透過兩個圓形邊框繪製出來的。主要技術包括：

• 數字0的基礎樣式：我使用一個同樣名稱的css .zero 來製作，這樣能減少重複的css內容。
• 圓形製作：使用 border 和 border-radius: 100% 創造出空心的圓形。邊框設定為 border: 24px solid white，這樣能呈現數字「0」。
• 位置與堆疊：透過 z-index 調整兩個「0」的層次，確保它們與旁邊1的堆疊關係與題目是相同的，並使用 position: absolute 精確控制它們的擺放位置。

文字處理：Days 與 CSS Challenge

在數字「100」下方，我使用了兩個段落標籤 <p>，分別呈現「Days」和「CSS Challenge」。使用了以下的樣式設定：

• 字體與大小：使用了 text-transform: uppercase 設定在這個區塊的<p>上，使這邊所有的文字轉為大寫，並且透過 font-weight: 700 設定粗體字。
• 大小及間距調整：透過調整 font-size 使「Days」字樣較大，並設定行高 line-height 確保文字不會出現重疊或間距過大。在「Days」字樣的部分，我也依據視覺上的增加了 margin-top 讓整體視覺與題目的樣子更相像。

.center p {
  position: relative;
  width: 200px;
  text-align: center;
  text-transform: uppercase;
} 
.center .days {
  font-size: 82px;
  font-weight: 700;
  line-height: 0.8;
  margin-top: 6px;
}
.center .desc {
  font-size: 25px;
  font-weight: 700;
  line-height: 0.8;
}

技巧總結

這一題看起來考驗的是你能否靈活的使用CSS來創造視覺圖形，而非依賴圖片。整體而言並不困難，關鍵點包括：

1. 利用 border 製作圖形：使用 border-radius 和 border 屬性來繪製圓形是 CSS 繪圖中的常用技巧。通常當我們看到圓角、圓形，第一個想到的就是利用 border 的特性。
2. 利用 transform 旋轉形狀：由於網頁本身的結構都是正正方方的，傾斜的部分就需要使用 rotate 的技巧才能呈現。
3. 層次 z-index 的控制：在這個挑戰中，數字「100」由多個 div 組成，因此需要精確控制層次，使每個部分都能正確顯示。
4. 間距：這邊也很考驗CSS區塊與文字之間的距離會怎麼調整，好讓整體看起來最舒服，不會過於緊密或鬆散。

Wrap up and go home

我的CSS Challeage解答
也放上我自己畫完後的截圖

那今天就先到這裡，明天我們再繼續來玩下一題。