iT邦幫忙

2022 iThome 鐵人賽

DAY 26
0
自我挑戰組

CSS甜點烘焙店系列 第 26

喵喵~鎮店【店貓】來了

  • 分享至 

  • xImage
  •  

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

今天邀請了一位貓咪,來當鎮店店貓

Html架構如下

.cat
	.ear
	.eye
	.mouth
	.body
	.tail

一、身體及腳(.body)

畫一長方形,利用border-radius做成不一樣的弧度

border-radius: 2rem 3rem 3rem 3rem

https://ithelp.ithome.com.tw/upload/images/20221011/20152592GtGWnwMtba.png

&::before畫一小長方形,並給border-radius及旋轉

border-radius: 1rem
transform: rotate(20deg)

&::after重覆同步驟,給反方向旋轉

transform: rotate(-20deg)

https://ithelp.ithome.com.tw/upload/images/20221011/20152592qOhrMBV9JC.png

二、耳朵(.ear)

&:before&:after各畫一個三角形

border-style: solid
border-width: 0.4rem 0.4rem
border-color: transparent transparent black transparent

定位在頭上左右邊
https://ithelp.ithome.com.tw/upload/images/20221011/20152592iZ8XstVe0N.png

三、眼睛(.eye)

利用box-shadow畫2個小圓

width: 0.2rem
height: 0.2rem
border-radius: 50%
box-shadow: 0.4rem 0.4rem 0 0 gray, 1.4rem 0.4rem 0 0 gray

加碼在&::before繪製身體的斑紋

&::before
	content: ''
	position: absolute
	top: 0rem
	left: 2.2rem
	width: 0.2rem
	height: 0.25rem
	border-radius: 0 0 0.1rem 0.1rem
	background: gray
	box-shadow: 0.3rem 0 0 0 gray

https://ithelp.ithome.com.tw/upload/images/20221011/20152592KtvTQvBZJ2.png

四、嘴巴及鬍鬚(.mouth)

畫一小圓,並利用box-shadow做出圓弧形狀

width: 0.4rem
height: 0.4rem
border-radius: 50%
box-shadow: 0 0.1rem 0 0 gray

https://ithelp.ithome.com.tw/upload/images/20221011/20152592FO6Xia7ZmQ.png

&::before製作一條短線段、旋轉,並利用box-shadow複製另一條

width: 0.3rem
height: 0.1rem
border-radius: 1rem
transform: rotate(-20deg)
box-shadow: -1.75rem -0.45rem 0 0 gray

https://ithelp.ithome.com.tw/upload/images/20221011/20152592wXISCfSKNI.png

同上一步驟,在&::after製作另外2根鬍鬚

top: 0.4rem
left: 1rem
width: 0.3rem
height: 0.1rem
border-radius: 1rem
transform: rotate(20deg)
box-shadow: -1.8rem 0.4rem 0 0 gray

https://ithelp.ithome.com.tw/upload/images/20221011/20152592FTYrI4f9TP.png

五、尾巴及陰影(.tail)

畫一小長方形,給弧度後定位在屁屁的地方

width: 1rem
height: 0.3rem
border-radius: 1rem
transform: rotate(-20deg)

&::before畫一長方形,給圓弧後加入透明度及模糊

filter: blur(0.06rem)
opacity: 0.8

https://ithelp.ithome.com.tw/upload/images/20221011/20152592X01SNNOPbZ.png

本店店貓
https://ithelp.ithome.com.tw/upload/images/20221011/20152592FXDeFE8DaF.png

希望今天的鎮店店貓您還滿意,請慢用~
如有任何問題,歡迎下方留言討論


上一篇
box-shadow用途廣,【雲朵】繪製多變化
下一篇
超萌【樹懶先生】,什麼都懶懶der~
系列文
CSS甜點烘焙店31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言