iT邦幫忙

鐵人檔案

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

前進切版之路! CSS微體驗 系列

從 0 開始的初學者轉職筆記~
透過寫筆記的方式重新釐清自己的思緒,並把筆記整理的淺白易懂,方便未來的自己不會看的一頭霧水
在這邊分享自己踩過的坑以及解決的方法
希望我可以撐過30天!!加油

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

【踩坑】 gradient 漸層背景要寫在哪裡?

起初剛學到設定顏色時,都是使用background-color 來幫物件或是背景上色於是在學到 gradient 時,超級興奮٩(ˊᗜˋ )و竟然可以用這麼美的...

2021-09-30 ‧ 由 豹告 分享
DAY 22

【心得】不同 gradient 使用方式-- linear-gradient()

上一篇提到了gradient的放置與多圖片的放置方法今天來更深入了解一下gradient漸層怎麼設定吧!d(`・∀・)b 各式各樣的漸層 ?linear-gra...

2021-10-01 ‧ 由 豹告 分享
DAY 23

【心得】不同 gradient 使用方式-- radial-gradient()

radial-gradient() 我從前只以為它只有圓形,只能從中心開始漸層結果發現...不!不只是這樣的! background: radial-gradi...

2021-10-02 ‧ 由 豹告 分享
DAY 24

【心得】不同 gradient 使用方式-- repeating-linear-gradient() & repeating-radial-gradient()

當瞭解了linear-gradient以及radial-gradient()特性後,看到這兩個熟悉的字眼加上repeating的屬性也不會太陌生了 repeat...

2021-10-03 ‧ 由 豹告 分享
DAY 25

【心得】不同 gradient 使用方式-- conic-gradient()

我真的沒想到漸層可以寫這麼多篇XD本來預期是一篇就可以結束... 結果開始研究發現,不得了阿這個屬性怎麼這麼滴猛對熱愛漸層效果的人來說吸起來比貓還過癮(因為貓會...

2021-10-04 ‧ 由 豹告 分享
DAY 26

【踩坑】按鈕閃阿閃,gradient 在 hover 時閃爍

某天在閒逛網站,美其名觀察各種生態,實則打混摸魚的時候發現按鈕在 hover 過渡時出現閃爍的狀況(在一瞬間可以看到背景顏色) 經過研究之後發現是「漸層切換到純...

2021-10-05 ‧ 由 豹告 分享
DAY 27

【心得】border-radius 知多少~

要把物件邊角變得圓圓潤潤的,首先都會想到border-radius 初學者剛會用的時候只會設定一個值讓物件變成一個圓形然後就覺得好厲害發現新大陸(呦齁齁~手舞足...

2021-10-06 ‧ 由 豹告 分享
DAY 28

【心得】form 表單 elements 基本使用

搜尋列、登入頁面、Google表單,還有...客訴表單(目死)是我們日常都會接觸到的東西 這些都可以用HTML做出來~但是他的種類真的好多呀~剛開始學的時候真得...

2021-10-07 ‧ 由 豹告 分享
DAY 29

【心得】checkbox表單實作-待辦清單

上一次介紹了各種表單的使用那麼實戰練習必不可少呀! 今天就演練演練自製待辦清單吧 首先來看一下想做出來的樣子 目標: 1. 點選文字就可以勾取方塊 2. 改變核...

2021-10-08 ‧ 由 豹告 分享
DAY 30

【分享】CSS-底線畫起來!底線動起來+尾聲

當年求學的時候有個老師很喜歡說 "老師說這個很重要的意思就是......這個很~ 重 ~ 要~" 身為填鴨式教育下的孩子馬上就跟老師心心相印...

2021-10-09 ‧ 由 豹告 分享