Day33 透明人間

簡單小語

這個練習只看到，哇透明的header並用fixed的方式，不過萬萬沒想到，還是忘記該如何製作透明模糊背景，經過Google後又找回記憶，這次的練習算是喚醒並再次熟悉，CSS的應用千千萬萬種，學習不懈的分分秒秒，練習再練習，技術就是靠練習，能力就是靠學習。

筆記分享

1. 主要都是利用flex排版，熟悉像參數使用及寬度換行設定。
2. 這次幾乎全部的padding，margin都是使用%還做設定，為了版面更有彈性及RWD的自適應。
3. 麵包屑應用觸擊後出現陰影，套用box-shadow並指產生Y方向的模糊。
4. 麵包屑應用觸擊後樣式稍微放大，套用transform:scale(1.05)產生些微放大的感覺。
5. box-shadow+transform:scale帶出凸出的立體效果。
6. 圖片增加了JQuery的點擊事件，讓自己不要忘記JQuery啊啊啊。
7. header使用position:fixed定置在螢幕上方，注意在RWD在大尺寸需設定width:1024px，避免跑版。
8. 模糊背景在header中加入class header_bg利用position:absolute及fliter:blur()就可以產生模糊效果(謹記)。
9. 利用container包住內容並用position:relative後使用top:140px，就能避免全部內容都要調整top距離。
10. JQuery的點擊取消siblings的方式，好用，學起來。

持續練習

Practice(200830 Day 33)

樣板來源

Blurry Header (Chromium/webkit recommended)

2020 iT邦幫忙鐵人賽 Day33 網頁前端-持續練習(透明人間)