iT邦幫忙

第 12 屆 iThome 鐵人賽

0
自我挑戰組

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

Day33 網頁前端-持續練習(透明人間)

Day33 透明人間

https://ithelp.ithome.com.tw/upload/images/20201004/20129161tJCTC2wKeO.png
https://ithelp.ithome.com.tw/upload/images/20201004/20129161PiknNyWS9N.png

簡單小語

這個練習只看到,哇透明的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 網頁前端-持續練習(透明人間)


上一篇
Day32 網頁前端-持續練習(玩轉同樂)
下一篇
Day34 網頁前端-持續練習(鈕紐捏捏)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言