今天在了解前置設定之後,咱們來一起破關吧~就從Day #1開始!
以下為重點介紹,完整程式碼請參考作品連結
<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。
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 {
position: relative;
width: 200px;
height: 100px;
left: -10px;
.number 我設定為position: relative
(psr),並將其往左推10px,這是在完成作品時發現有點偏右,才再給予的設定。
.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 {
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-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 {
left: 110px;
z-index: 5;
}
和.zero-one設定的CSS大多相同,再推向較右邊的位置,和給予較低的z-index。
.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 {
letter-spacing: 1px;
letter-spacing
幫助我們拉開字元間距,視覺效果更好,若是該字元已換到下一行,可以考慮調整font-size
或是letter-spacing
。
這個CSS Game最大的樂趣就是把成品變成自己的版本,恰好我遇到了30天鐵人賽,想說如何畫出30這兩個數字呢?嘗試了一下,想要用兩個0疊在一起並用一個長方形遮住半邊來達成數字3,後來遇到些問題,就決定從SVG解決了,我們就來看看如何用SVG畫出數字吧!
作品網址
<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介紹,他會先繪製座標系統再繪製路徑讓觀眾能理解得更為透徹。
SVG Path tutorial: https://youtu.be/2IY-xTCFjiM
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
中秋連假的第一天,好多人跑去宜蘭玩,Thibe也跑去宜蘭烏石港給浪衝爆了,帶著曬透的臉和疲憊的身軀回家,好想睡覺呀 ~ 但還是先來完成文章吧