iT邦幫忙

鐵人檔案

2018 iT 邦幫忙鐵人賽
回列表
自我挑戰組

自我挑戰日記 系列

以不間斷記錄 "一天至少學一個" 為目標。

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

挑戰第 1 天,加油!

大家好,聽說 "IT鐵人賽" 是個能對自已作挑戰,又能加速成長的活動,覺得好像是滿難得的經驗,也滿有趣的!! 所以也想要挑戰自已是不是能做到...

2017-12-06 ‧ 由 bdp 分享
DAY 2

CSS:background 雙色漸層

大家好 今天要來做個有雙色或多色的漸層背景 想要有漸層但又不想使用圖檔時,可以就用 linear-gradient 來做線性漸層 這最大的好處應該是很快就看到...

2017-12-07 ‧ 由 bdp 分享
DAY 3

CSS:background 漸層的單位

大家好 上篇文章所說的線性漸層,指定方向的值可以是關鍵字及度數以外, 還可以使用 grad 百分比、rad 弧度、turn圈數 為單位 度數 deg : 繞一...

2017-12-08 ‧ 由 bdp 分享
DAY 4

CSS:background 圓型漸層

大家好 先前文章寫到的是直線性漸層 今天是 徑向漸層 能作出由中心向外漸層效果的圓 以及指定 漸層點 → 結束點 與中間顏色的距離位置 這在線性漸層也是可以使...

2017-12-09 ‧ 由 bdp 分享
DAY 5

CSS:background 線條、同心圓

大家好 今天要利用前面文章寫到的漸層做線條、同心圓背景 background-image: linear-gradient(angle, color 1, c...

2017-12-10 ‧ 由 bdp 分享
DAY 6

CSS:background 線條

大家好 前篇文章寫到的線條背景 還有另一種作法 就像是畫出大小向下一層一層增加 就可以做出下面的背景 範例 background-image: linear...

2017-12-11 ‧ 由 bdp 分享
DAY 7

CSS:background 透明重疊

大家好 繼續昨天的練習 用垂直、水平和距離畫出方格紙 background-image: linear-gradient(rgba(200,200,2...

2017-12-12 ‧ 由 bdp 分享
DAY 8

CSS:background 圓點背景

大家好 今天要說 圓點背景 background: radial-gradient(#FF6D00 2px, transparent 2px) 18px 18...

2017-12-13 ‧ 由 bdp 分享
DAY 9

CSS:background 連續內凹圓弧

大家好 今天要繼續前一天的作法 用CSS畫鋸齒邊的圖 範例 郵票 background: radial-gradient( transparent, tran...

2017-12-14 ‧ 由 bdp 分享
DAY 10

CSS:background 放射

大家好 今天來用 linear-gradient 做放射的效果 找到2種方式 第一種 background: linear-gradient(24...

2017-12-15 ‧ 由 bdp 分享