Day31 來杯咖啡

簡單小語

看似簡單卻又充滿挑戰細節的咖啡杯，一開始的躍躍欲試到後面的苦惱煩惱，運用各種偽元素拼拼湊湊，最後的波浪顏色區分，還是想不到方法，只能先用線條代替，一開始的簡單不是簡單，是自我感覺良好，是妄自菲薄，結論就是，不知道的還太多，勤加練習學習，並持續練習。

筆記分享

1. 其實可以通用class但為了方便查看目前選擇狀況，因此改用群組式宣告。
2. 第一杯輕鬆愜意，掌握偽元素及z-index再用transform:rotate()，可以處理完成。
3. 第二杯挑戰開始，增加偽元素加強樣式，杯蓋，吸管，冰塊更是靠偽元素與animation共同完成。
4. 第三杯，杯蓋漸層及梯形，杯套則是用定位及偽元素三角形，共同繪製。
5. 第四杯敗筆在波浪上下顏色做不出，查找資料僅看懂線條波浪，背景顏色尚有考驗。
6. 其實許多元素都有overflow情況，但背景色可以通吃，導致視覺上不會有差異
7. 特殊樣式就沒做RWD(其實是結構很爛，RWD根本崩潰)。
8. 第一杯若再用transform:rotate()，則會變成公事包(想像ing)。
9. 第二杯的內容物與外層間隔，長寬及偽元素尺寸確定好，排版一下，落然開朗。
10. 星巴客杯子好貴，小魯買不起。

持續練習

Practice(200827 Day 31)

樣板來源

Minimalistic Cups

2020 iT邦幫忙鐵人賽 Day31 網頁前端-持續練習(來杯咖啡)