iT邦幫忙

2022 iThome 鐵人賽

DAY 23
0
自我挑戰組

CSS甜點烘焙店系列 第 23

skew()這樣用!左傾右傾來做【活動招牌架】

  • 分享至 

  • xImage
  •  

您好,歡迎光臨CSS甜點烘焙店

有了店面和飲料攤,我們要再來做一個活動招牌架

Html架構如下

.signboardStand
	.front
	.back

https://ithelp.ithome.com.tw/upload/images/20221008/20152592Sgj2J8JeRv.png

一、招牌正面(.signboardStand.front)

畫一正方形,給深色背景及border-radius做成上圓下平的形狀

border-radius: 2rem 2rem 0 0
background: #36383c

加入border的上+左+右,共3條線段

border-right: 0.2rem solid #f2c68f
border-left: 0.2rem solid #f2c68f
border-top: 0.2rem solid #f2c68f

https://ithelp.ithome.com.tw/upload/images/20221008/20152592ZSqd1zuv38.png

skewX做透視傾斜

transform: skewX(-15deg)

https://ithelp.ithome.com.tw/upload/images/20221008/2015259265WIcpx6p9.png

再利用box-shadow做下方飾條及厚度

box-shadow: 0.08rem 0 0 0 #d4aa75, 0 0.2rem 0 0 #f2c68f, 0 0.25rem 0 0 #d4aa75

https://ithelp.ithome.com.tw/upload/images/20221008/20152592e7DHMa3htt.png

招牌的板子做好了,再來做柱腳的部份
&::before

box-shadow: 2.2rem 0 0 0 #f2c68f, 0.08rem 0 0 0 #d4aa75, 2.28rem 0 0 0 #d4aa75, 0.05rem 0.1rem 0 0 #36383c, 2.25rem 0.1rem 0 0 #36383c

https://ithelp.ithome.com.tw/upload/images/20221008/20152592bZnwT62pQc.png

來寫一些字吧
&::after

content: 'BREAD & DESSERTS'

引入的是Google Font的Gloria Hallelujah
同樣的做傾斜及文字細節設定

line-height: 0.4rem
text-align: center
transform: skewX(-15deg)

https://ithelp.ithome.com.tw/upload/images/20221008/20152592mHrIkyhWn3.png

二、招牌背面(.signboardStand.back)

複製一份正面,傾斜角度及border顏色置換一下

border-right: 0.2rem solid #b38b59
border-left: 0.2rem solid #b38b59
border-top: 0.2rem solid #b38b59
transform: skewX(10deg)

陰影顏色

box-shadow: 0.08rem 0 0 0 #987346, 0 0.2rem 0 0 #b38b59, 0 0.25rem 0 0 #987346

https://ithelp.ithome.com.tw/upload/images/20221008/20152592kzFPs6Gvmv.png

加入柱腳

box-shadow: 2.2rem 0 0 0 #b38b59, 0.08rem 0 0 0 #987346, 2.28rem 0 0 0 #987346, 0.05rem 0.1rem 0 0 #36383c, 2.25rem 0.1rem 0 0 #36383c

https://ithelp.ithome.com.tw/upload/images/20221008/20152592d6VArhTpkH.png

完成囉~
https://ithelp.ithome.com.tw/upload/images/20221008/20152592HqU7WTNsa7.png

希望今天的活動招牌架您還滿意,請慢用~
如有任何問題,歡迎下方留言討論


上一篇
三角旗幟怎麼做?來看看【珍珠鮮奶茶】攤位擺設吧~
下一篇
你的店面想開在哪裡?【冰棒森林】用perspective + rotateX就可以做到
系列文
CSS甜點烘焙店31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言