[Day 2] 30 Days Iron Man: 參拾天鐵人

14th鐵人賽 css html svg

steventhibe

2022-09-09 21:58:27

811 瀏覽

分享至

100 Days CSS Challenge

今天在了解前置設定之後，咱們來一起破關吧~就從Day #1開始!

以下為重點介紹，完整程式碼請參考作品連結

1. HTML

<div class="frame">
  <div class="center">
    <div class="number">
      <div class="one-one"></div>
      <div class="one-two"></div>
      <div class="zero-one"></div>
      <div class="zero-two"></div>
    </div>
    <span class="day">Days</span>
    <span class="challenge">Css Challenge</span>
  </div>
</div>

我們保留基本的frame和center，然後創造一個class="number"的div包住數字，其中包括.one-one, .one-two, .zero-one, .zero-two，分別代表數字1的第一筆劃、第二筆劃、數字0、數字0。然後用兩個span來寫入文字Days和Challenge。

2. CSS

.frame

frame會更動的程式碼很常是背景顏色，沒想到第一天的挑戰就這麼炫炮，我們來試試看吧~

background: linear-gradient(to top right, #43389f 0%, #4ec6ca 100%);

在linear-gradient中，我們需要至少兩個色彩來做變化，從A變到B，我們可以看到程式碼中設定了變化方向to top right，在 0% 的顏色#43389f，到 100% 的顏色#4ec6ca，我們也可以自行變化色彩和它的渲染角度方向等等。

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient

.number (包住所有的數字)

.number {
  position: relative;
  width: 200px;
  height: 100px;
  left: -10px;

.number 我設定為position: relative(psr)，並將其往左推10px，這是在完成作品時發現有點偏右，才再給予的設定。

.one-one

.one-one {
    position: absolute;
    left: -5px;
    width: 20px;
    height: 40px;
    transform: rotate(50deg);

.one-one 設定為position: absolute(psa)，它的父層定位點為.number，使用了transfrom: rotate(50deg)旋轉的語法，正向旋轉了50度。

.one-two

.one-two {
    position: absolute;
    width: 25px;
    height: 100px;
    left: 12px;
    z-index: 10;
    box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);

.one-two 的left:12px(l12)，將其往右推12px，這邊的距離可以自行調整，主要是要讓**.one-one和.one-two**兩個合併看起來像是1。而後方的z-index:10(z10)，是為了讓數字1能夠在後面兩個零之上，故我們後面數字零的z-index會設定較小，box-shadow是為了讓數字1能夠和後面的0透過陰影而區隔開來。

.zero-one

  .zero-one,
  .zero-two {
    width: 100px;
    height: 100px;
    position: absolute;
    border-radius: 50%;
    background: none;
    border: 25px solid #fff;
    box-sizing: border-box;

border-radius: 50%(brs50%)設定兩個0為圓圈的形狀。
我們把背景顏色拿掉，加上白色的border，此時會發現圓圈超過原本設定的寬高(100px)，
我們使用box-sizing: border-box來限制此元素在給定的寬高之內，使得zero-one和zero-two都有25px實線的border，並維持寬高100px，也就達成數字0的樣子。

*小技巧

在測試程式時，因於CodePen有即時更新的特色，我們可以先用ctrl+/來去註解程式碼，來看看少了註解程式碼之後的渲染畫面為何?像是.zero-one跟.zero-two在註解掉box-sizing: border-box便會長成這樣:

.zero-two

  .zero-two {
    left: 110px;
    z-index: 5;
  }

和.zero-one設定的CSS大多相同，再推向較右邊的位置，和給予較低的z-index。

.day

.day {
  display: block;
  text-transform: uppercase;
  font-size: 72px;
  font-weight: 700;
  line-height: 72px;

.day原先設定為span元素(行內元素)，我們透過display:block(db)來讓它變成獨自一行。
text-transform使元素的字母變成大寫，並藉由line-height來設定我們想要的元素高度，調高會使其與上下兩元素視覺距離變遠。
font-weight:700使得字體變粗。

.challenge

.challenge {
  letter-spacing: 1px;

letter-spacing幫助我們拉開字元間距，視覺效果更好，若是該字元已換到下一行，可以考慮調整font-size或是letter-spacing。

Iron version(SVG)

這個CSS Game最大的樂趣就是把成品變成自己的版本，恰好我遇到了30天鐵人賽，想說如何畫出30這兩個數字呢?嘗試了一下，想要用兩個0疊在一起並用一個長方形遮住半邊來達成數字3，後來遇到些問題，就決定從SVG解決了，我們就來看看如何用SVG畫出數字吧!
作品網址

數字3

<div class="three">
        <svg viewBox="0 0 120 80">
          <path fill='#323535' d="M0 0 h40 l10 10 v20 l-20 10 l20 10 v20 l-10 10 h-40 l10 -10 h20 l10 -10 l-25 -15 v-10 l25 -15 l-10 -10 h-20 l-10 -10 z" />

          <path fill='#323535' d="M70 0 h40 l10 40 l-10 40 h-40 l-10 -40 l10 -40 z" />
          <path fill="#eab676" stroke-width'.2' d="M75 12 h30 l8 28 l-8 28 h-30 l-8 -28 l8 -28 z" />

        </svg>
</div>

我們需要建立svg，裡面透過path來繪製我們的路徑並透過fill填滿顏色，path之中有三條線，我們講解數字3，也就是第一條線，d參數定義這條線要如何繪製，我們先用M0 0從座標點(0,0)開始，h40畫出(40,0)的水平線，l10 10畫出(10,10)的直線，v20畫出(0,20)的垂直線，後面用法邏輯一致，略為進行修改即可完成。總結來說，我們有m, h, l, v, z五個關鍵字，move, horizontal, line, vertical, close，在path繪製完成的結尾用z來Close Path.
下方影片，有完整的SVG path介紹，他會先繪製座標系統再繪製路徑讓觀眾能理解得更為透徹。