iT邦幫忙

2022 iThome 鐵人賽

DAY 2
0
自我挑戰組

Do you wanna play? CSS game ぎりぎり系列 第 2

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

  • 分享至 

  • xImage
  •  

100 Days CSS Challenge

今天在了解前置設定之後,咱們來一起破關吧~就從Day #1開始!
https://ithelp.ithome.com.tw/upload/images/20220909/20152191ii6KEEyl8j.jpg
以下為重點介紹,完整程式碼請參考作品連結


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>

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


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-onezero-two都有25px實線的border,並維持寬高100px,也就達成數字0的樣子。

*小技巧

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

.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畫出數字吧!
作品網址
https://ithelp.ithome.com.tw/upload/images/20220909/20152191q5P4lnkz5B.jpg

數字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繪製完成的結尾用zClose Path.
下方影片,有完整的SVG path介紹,他會先繪製座標系統再繪製路徑讓觀眾能理解得更為透徹。

SVG Path tutorial: https://youtu.be/2IY-xTCFjiM
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths


後記

中秋連假的第一天,好多人跑去宜蘭玩,Thibe也跑去宜蘭烏石港給浪衝爆了,帶著曬透的臉和疲憊的身軀回家,好想睡覺呀 ~ 但還是先來完成文章吧/images/emoticon/emoticon06.gif


上一篇
[Day 1] 100 Days CSS Challenge の 設置: 善用你的工具(人)吧!
下一篇
[Day 3] Menu Icon: 漢堡包 好好ㄘ
系列文
Do you wanna play? CSS game ぎりぎり30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言