Day27 六角 RWD#3

簡單小語

圖片的版型看到就想要練習，又看到這種斜一邊然後小尺寸變正的圖片縮放樣式，模糊效果及觸及事件，看到就忍不這想趕快學習並實作，過程中因為一些觀念的不熟悉而卡關，像是預設一張圖片內容展開，但要如何接續之前的觸及事件，讓預設展開的圖片可以跟其他依樣縮放，內容文字出現時間設定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)