一个DIV的芝士汉堡制作
项目Github地址:点击跳转
最近看到了一篇英文文章,正好看看看着也饿了,打算自己好好做一个这样的芝士汉堡,品尝一下芝士汉堡的乐趣
那么绘制如下
HTML
html绘制非常简单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cheeseburger</title>
<link rel="stylesheet" href="cheeseburger.css">
</head>
<body>
<div class="cheeseburger"></div>
</body>
</html>
CSS
由于汉堡包含内容比较多,我们想在一个div上绘制汉堡的话,会想到用伪类来扩大我们的绘制面积,废话不多说,基本构造如下
.cheeseburger{
/* 整个汉堡 */
}
.cheeseburger::before{
/* 上下两层面包 */
}
.cheeseburger::after{
/* 芝麻 */
}
绘制上下两层面包,我们采用border绘制
.cheeseburger::before{
content: '' ;
display: block ;
width: 300px;
height: 60px;
border-top: 90px solid #F5B231;
border-bottom: 60px solid #F5B231;
}
用border-radius设置圆角
border-radius: 30% 30% 20% 20%;
接下来我们做肉
.cheeseburger{
width: 280px;
height: 40px;
background-color: #962012;
border-radius: 15px;
}
但是肉的位置并不是我们想要的,想要移动我们采用margin和padding,但是这样会使我们整个汉堡都移动,此时我们采用box-shadow;
box-shadow: 10px 100px #962012;
接下来我们用同样阴影的方式将奶酪和生菜添加上
box-shadow:
10px 70px #fddb28,
10px 90px #1EE154,
10px 120px #962012;
大体已经成型,我们在撒点芝麻,同样采用box-shadow
box-shadow:
/* Top row */
55px -200px #ffffff,
105px -200px #ffffff,
155px -200px #ffffff,
205px -200px #ffffff,
245px -200px #ffffff,
/* Bottom row */
25px -160px #ffffff,
75px -160px #ffffff,
125px -160px #ffffff,
175px -160px #ffffff,
225px -160px #ffffff,
270px -160px #ffffff;
至此汉堡已经成型,可以给奶酪加点流下来的效果
content: ' ' ;
color: #fddb28;
white-space: pre;
font-size: 45px;
line-height: 45px;
结束!
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦