您好,歡迎光臨CSS甜點烘焙店
今天體力恢復的還不錯,除了還是有劇咳,沒力氣吼小孩之外,其它還算安好
我們就來開始店面的展示櫥窗吧~
Html部份,繼續在.all.store
下面加入結構
.all
.store
//略
.showcase
.light
畫一長方形,因為這裡是看進去的室內,所以給深色背景,並給一淺色的框
border: 0.2rem solid #abdee6
background: #4a6367
利用box-shadow
畫出邊框的亮面與陰影
box-shadow: 0.05rem 0.05rem 0 0 #78bbc6
在&::before
利用box-shadow
畫上3層層板
box-shadow: 0 1.4rem 0 0 #abdee6, 0 3rem 0 0 #abdee6, 0 4.6rem 0 0 #abdee6
光是線條還不夠,在&::after
加入一點俯視的平面
box-shadow: 0 1.2rem 0 0 #7ab5be, 0 2.8rem 0 0 #7ab5be, 0 4.4rem 0 0 #7ab5be
畫一白色長條後旋轉
transform: rotate(30deg)
利用box-shadow
畫另一條
box-shadow: 6rem 0 0 0 #fff
給透明度
opacity: 0.2
這時會發現反光跑出櫥窗框了
回到.showcase
加入
overflow: hidden
櫥窗製作好了,明天就是期待的甜點上架時刻囉~
敬請期待
如有任何問題,歡迎下方留言討論