为了账号安全,请及时绑定邮箱和手机立即绑定

一个DIV的芝士汉堡制作

标签:
Html5 CSS3

一个DIV的芝士汉堡制作

项目Github地址:点击跳转

最近看到了一篇英文文章,正好看看看着也饿了,打算自己好好做一个这样的芝士汉堡,品尝一下芝士汉堡的乐趣

hanbao.jpg

那么绘制如下

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;

}
bread.jpg

用border-radius设置圆角

 border-radius: 30% 30% 20% 20%;
bread-cirtle.jpg

接下来我们做肉

.cheeseburger{
    width: 280px;
    height: 40px;
    background-color: #962012;
    border-radius: 15px;   
}
meat.png

但是肉的位置并不是我们想要的,想要移动我们采用margin和padding,但是这样会使我们整个汉堡都移动,此时我们采用box-shadow;

    box-shadow: 10px 100px #962012;
meat-center.png

接下来我们用同样阴影的方式将奶酪和生菜添加上

    box-shadow: 
    10px 70px #fddb28,
    10px 90px #1EE154,
    10px 120px #962012;
chess.png

大体已经成型,我们在撒点芝麻,同样采用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;
sesame.png

至此汉堡已经成型,可以给奶酪加点流下来的效果

    content: '                ' ;
    color: #fddb28;
    white-space: pre;
    font-size: 45px;
    line-height: 45px;
success.png

结束!

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
15
获赞与收藏
30

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消