一个DIV的芝士汉堡制作@慕课网原创_慕课网

一个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;

结束!

一个DIV的芝士汉堡制作原创

一个DIV的芝士汉堡制作

HTML

CSS