iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
1
自我挑戰組

前端新手進化史系列 第 11

番外篇 - 胡搞 box-shadow (下)

文章將陸續整理並更新至個人部落格


誰說影子一定要是黑色的呢?
誰說影子永遠當不了主角呢?
放下先入為主的偏見~

來看看幾個 box-shadow 幹的好事吧~
(以下純屬好玩~不要太認真~~)

1. 日曆

一個 <div> 加上一個偽元素box-shadow 畫一個日曆!


codepen 程式碼




2. 調色盤

猜猜這個調色盤哪裡使用了 box-shadow/images/emoticon/emoticon39.gif


哈哈~只有矩形的大方框是個貨真價實的 <div>~

調色盤中的矩形大方框是整個畫面唯一的 div,上方黑色長條是 shadow,「select a color」是偽元素(::before)的內容,左上方第一個紅色圓點也是偽元素(::after),其餘 19 個圓點皆是紅色圓點的 shadow。

codepen 範例連結


3. 魔術方塊

再來,猜猜這個魔術方塊哪裡使用了 box-shadow~



哈哈~依然只有一個 \<div>

紅色小方框是個貨真價實的 div,與其相鄰的藍色(上方)和黃色(右方)方框是偽元素,其餘方框皆是這三個方框的 shadow

codepen範例連結


4. 製造點擊按鈕的互動效果

box-shadow 除了讓鍵帽看起來更立體之外,也可以搭配 :active 做出點擊時互動效果

設定點擊(:active)時,讓原本的陰影(box-shadow)範圍縮小,同時讓鍵帽整體微微向下移,就可以達到真的在按壓的效果囉!

codepen 範例連結


5. 製造月亮移動的效果

這個 idea 是在吳哲宇老師的線上課程中學到的~非常有趣!!/images/emoticon/emoticon34.gif

下圖中,左上角月亮的移動效果就是利用 box-shadow 的動畫做出來的。

多數人第一眼的直覺會認為黃色部分是元素本身,因為 shadow 通常給人感覺就是黑黑暗暗的,但其實黃色部分才是 shadow!!(元素本身的預設背景顏色(background-color)是透明的)

技巧: shadow 會如影隨形地跟著元素本身,所以元素往右上方移動時,影子也會被拉著往右上方移動,但要讓元素移動時,影子不動

shadow 自己反方向往右下方移動
⇒ 往右上的力量與往右下的力量會相互抵消,所以 shadow 最後停留在原地只有元素在動


box-shadow 若再加上迴圈可以玩出更多酷炫的效果,不過......Just for fun~
過度使用影分身之術做動畫是很消耗查克拉(效能)的唷~
/images/emoticon/emoticon13.gif

box-shadow 的介紹就到這邊!如果之後有發現其它有趣的點子會再更新~
也歡迎大家與我分享有趣的 ideas!
明天見囉!



/images/emoticon/emoticon37.gif

參考資源

動畫互動網頁特效入門(JS/CANVAS)
動畫互動網頁程式入門 (HTML/CSS/JS)


上一篇
番外篇 - 胡搞 box-shadow (中)
下一篇
Containing block
系列文
前端新手進化史30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言