iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Modern Web

喪屍黑白切 系列

學習切版一段時間了,
紀錄一下這段時間學到的內容,
主要以金魚都能懂的網頁切版內容為主,
同時整理各種筆記,方便未來喪失記憶的時候複習。

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

Day 21 | 這些人都是我的小弟...是員工 - 人員介紹卡片

今天要講的是金魚都能懂的網頁切版 : 人員介紹卡片 NO003。 本篇關鍵字 clip-path animation transform: tran...

2020-10-06 ‧ 由 Zombie@Dump 分享
DAY 22

Day 22 | 煩欸!我又忘記密碼了啦 - 登入表單

今天要講的是金魚都能懂的網頁切版 : 登入表單 NO017,有沒有人跟我一樣超常忘記密碼的?有些密碼重設還不能跟之前一樣,然後我就每次都會忘記我新設定的密碼,不...

2020-10-07 ‧ 由 Zombie@Dump 分享
DAY 23

Day 23 | 是最後,但不是結束 - 頁尾

今天要講的是金魚都能懂的網頁切版 : 網頁頁尾版塊 NO006,應該很少網頁沒有頁尾吧!所以就把他學起來吧! 本篇關鍵字 :focus、outline...

2020-10-08 ‧ 由 Zombie@Dump 分享
DAY 24

Day 24 | 遙想那個用表格排版的年代

今天要講的是金魚都能懂的網頁切版 : 表格怎麼切 NO012,聽說以前切版都是用表格切呢!我是沒有經歷過那個年代啦~(裝嫩)雖然現在切版不用表格切了,但你需要表...

2020-10-09 ‧ 由 Zombie@Dump 分享
DAY 25

Day 25 | 不是古代的那種翻牌 - 翻牌效果

今天想要來講一下好像是滿常見到的翻牌效果,不想一下提供太多資訊的時候,這算是一個還不錯的方式,讓使用者 hover 到物件上時,再顯示出更多的訊息,還能讓別人有...

2020-10-10 ‧ 由 Zombie@Dump 分享
DAY 26

Day 26 | 打破規則,勇敢創新 - 破格式設計

今天要講的是金魚都能懂的網頁切版 : 破格式設計 NO011,破格式的設計在很多樣版網站可以見到,近期工作中也有接觸到,滿多時候就是拿來製造兩物件重疊的效果。...

2020-10-11 ‧ 由 Zombie@Dump 分享
DAY 27

Day 27 | 等待的時間不無聊 - loader

今天想要分享的是這一個 Youtube 影片做出來的等待畫面,我只有挑他的其中一個寫,其他可以看他影片做做看。 loader 是個在網頁 render 前的東西...

2020-10-12 ‧ 由 Zombie@Dump 分享
DAY 28

Day 28 | 來組合個畫面吧 - Part 1

終於要來組合畫面嚕~寫了這麼多天的小區塊切版,終於要派上用場了!是不是常常有一種:「我想要學的是整個網頁的切版,不是這種小區塊!」的吶喊啊?其實小區塊切得好,切...

2020-10-13 ‧ 由 Zombie@Dump 分享
DAY 29

Day 29 | 來組合個畫面吧 - Part 2

昨天稍微提了一些我切畫面時,對 HTML 的規劃,今天就來講 CSS 的部分啦!(鐵人賽剩一天好興奮啊~終於可以休息一下了) 在 CSS 撰寫習慣上,有人喜歡加...

2020-10-14 ‧ 由 Zombie@Dump 分享
DAY 30

Day 30 | 鐵人賽完賽,切版之路未完 - 結語

第一次挑戰鐵人賽就寫兩邊,老實說有想過兩邊就貼一樣的結語,但想想還是有所不同,決定還是乖乖的寫個結語,都最後一天了,再累也就這樣了。 今年整理了一些切版的內容,...

2020-10-15 ‧ 由 Zombie@Dump 分享