iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
自我挑戰組

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

在前端網頁的領域之中,有著五花八門的工具,但最初的本質還是HTML/CSS/JavaScript,筆者將透過「100 Days CSS Challenge」的題目, 每天選一題進行實作與筆記,讓大家更熟悉CSS並能夠透過網路資源達到持續自我提升,這30天就來會會CSS吧 ~ ぎりぎり!

鐵人鍊成 | 共 30 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文
DAY 1

[Day 1] 100 Days CSS Challenge の 設置: 善用你的工具(人)吧!

筆者Thibe為初入前端領域兩個月多的新人,由100 Days CSS Challenge的第一天挑戰概念啟發,製作了此次鐵人賽挑戰圖,期望自己能順利每天產出...

2022-09-08 ‧ 由 steventhibe 分享
DAY 2

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

100 Days CSS Challenge 今天在了解前置設定之後,咱們來一起破關吧~就從Day #1開始!以下為重點介紹,完整程式碼請參考作品連結 1....

2022-09-09 ‧ 由 steventhibe 分享
DAY 3

[Day 3] Menu Icon: 漢堡包 好好ㄘ

前言 在每天的實作中,都會遇到不熟、不知道如何使用語法完成的難題,可以點擊CSS 100作者本身的CodePen參考(參考下圖紅色箭頭),像是背景色、動畫效果之...

2022-09-10 ‧ 由 steventhibe 分享
DAY 4

[Day 4] The Pyramide: 金字塔日落陰影動畫

The Pyramide 今天我們來挑戰Day #3 金字塔,不要問我為什麼多了個e,我們要尊重作者的命名~金字塔這個作品是一個連貫的動畫,在天空、太陽、金字塔...

2022-09-11 ‧ 由 steventhibe 分享
DAY 5

[Day 5] Loadinggg: 這30天Loading好重(?

Loading 滴..滴滴..滴滴滴,讀取完成!今天我們來實作Day #4我們在讀取網頁期間,常會看到不同的讀取畫面,雖然讀取有可能讓人厭煩,但看到漂亮的loa...

2022-09-12 ‧ 由 steventhibe 分享
DAY 6

[Day 6] Statistic: 來呈現文章瀏覽數逐漸下滑的趨勢(>_<)

Statistic 今天我們來實作Day #5 搭配上筆者Thibe這一週的文章瀏覽和預期數據,看來這下滑趨勢達到顯著呢(p &lt; 0.05)!此次作品建議...

2022-09-13 ‧ 由 steventhibe 分享
DAY 7

[Day 7] Profile: 來製作個簡單樸實的個人檔案吧!

挑戰開始快一周了,今天我們來挑戰Day #6 Profile 就來製作一個Thibe的鐵人檔案吧!雷茲狗! 完整作品CodePen: https://codep...

2022-09-14 ‧ 由 steventhibe 分享
DAY 8

[Day 8] Notifications, Search and Menu: 叮咚~您有一則新訊息~

Notifications, Search and Menu 在資訊爆炸的時代,每個人都有許多社群媒體,訊息通知是不停不停地響,叮咚叮咚,今天就來實作Day #...

2022-09-15 ‧ 由 steventhibe 分享
DAY 9

[Day 9] Metaballs: 西索伸縮自如的黏黏球

Metaballs 今天我們來實作Day #8黏黏球,這是一個很常見的動畫,但實作上還是蠻有難度的,就讓我們繼續看下去吧~CodePen: https://co...

2022-09-16 ‧ 由 steventhibe 分享
DAY 10

[Day 10] Rainy Night: 一個人度過多少寂寞的雨夜?

Hello, Gang! It's Thibe! 雖然今天天氣很好,但在寂寞雨夜的時候,還是有Thibe的文章陪著你的,我們就來實作Day #9吧~ Rainy...

2022-09-17 ‧ 由 steventhibe 分享