iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 27
0
自我挑戰組

2020 iT邦幫忙鐵人賽 網頁前端-刻意練習系列 第 27

Day27 網頁前端-刻意練習(RWD#3)

Day27 六角 RWD#3

https://ithelp.ithome.com.tw/upload/images/20200927/20129161LY9ReO02ft.jpg
https://ithelp.ithome.com.tw/upload/images/20200927/20129161AASSW51PVD.png

簡單小語

圖片的版型看到就想要練習,又看到這種斜一邊然後小尺寸變正的圖片縮放樣式,模糊效果及觸及事件,看到就忍不這想趕快學習並實作,過程中因為一些觀念的不熟悉而卡關,像是預設一張圖片內容展開,但要如何接續之前的觸及事件,讓預設展開的圖片可以跟其他依樣縮放,內容文字出現時間設定2500s,若在2500s中又再觸及其他圖片會導致出現時間還沒結束就觸發下個事件,所以內容就會破版,印象深刻的練習及學習,使用JQuery如何選到自己要的事件,發現一件重要的事,思考著每一步動作並轉化為程式,開始慢慢有這種感覺(咦!?自己說算嗎?)。

筆記分享

  1. 先至做好一個container的架構及樣式,然後再複製微調,重複的是不用重複寫。
  2. 斜邊使用transform:skew()去改變呈現的角度。
  3. 內容因父層使用transform:skew()所以也會變斜,因此使用絕對定位脫離父層並自訂樣式。
  4. text半透明背景使用偽元素製作並根據斜邊角度微調,符合父層外框。
  5. 使用width+flex應用讓圖片顯示縮小並排取間隔。
  6. 排除第一個.container增加後面的.container樣式,.container:not(:first-child)
  7. JQuery想好事項觸發步驟及優先權的定義,讓樣式觸及後呈現完美效果。
  8. 使用 filter: blur(1px);讓圖片產生模糊效果,而hover後呈現清新圖片。
  9. 若顯示變化時間中就觸及下一事件,會導致破版行為發生(想好久啊)。
  10. 內容物的推移使用padding並讓排版舒適役讀,掌握空間。

刻意練習

Practice(200821 Day 27)

樣板來源

Showcase experiment NoJS


2020 iT邦幫忙鐵人賽 Day27 網頁前端-刻意練習(RWD#3)


上一篇
Day26 網頁前端-刻意練習(RWD#2)
下一篇
Day28 網頁前端-刻意練習(模仿遊戲#1)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40

尚未有邦友留言

立即登入留言