一个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;
结束!
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦