一个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;
复制代码

结束!

最后

喜欢的记得点个star.鼓励一下,谢谢!
微信 cuixianseni
qq群号 424072183

一个DIV的芝士汉堡制作相关推荐

一个div 上下两行_纯CSS实现单一div的正多边形变换
纯粹利用CSS,让"单一个"div,从正三角形变换为正八边形(单一div最多只能做到正八边形),最后再搭配动画的效果,变成正多边形的变换动画,也由于正多边形需要用到不少的三角函数计 ...
html div显示页面中间,使一个div始终显示在页面中间
使一个div始终显示在页面中间假设我们有一个div层: 首先,我们用css来控制它在水平上始终居中,那么我们的css代码应该是这样: *{margin:0;padding:0;} #myDiv{wi ...
怎样用一个DIV绘制熊猫头像
今天要给大家展示的是如何绘制一个熊猫头像,就是这个如果这是用Photoshop绘制出来的,你也许并不感到奇怪.但是,我要告诉你这是HTML中的一个DIV,配合CSS3绘制出来的. 惊不惊喜!?意不意 ...
php隐藏指定id的div,CSS_纯css3显示隐藏一个div特效的具体实现，复制代码代码如下: !DOCTYPE H - phpStudy...
纯css3显示隐藏一个div特效的具体实现复制代码代码如下: #showDiv { background-color:red; width:300px; height:300px; display: ...
一个DIV调用多个CSS样式
1使用以上两个CSS样式表对描述同一个DIV的写法class利用class可以对于同一个标签多重定义样式. 比如用1.2两种样式同时控制一个DIV,可以写成以下格式: <div class=&q ...
点击文字弹出一个DIV层窗口代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
Dreamweaver——如何使网页中的第一个DIV水平居中
PS:红色为关键代码方法1: 在style标签里,输入一个这样的样式(使得最后一个margin的设值是height的负1/2): .a { position:relative; left:50% ...
Aveiconifier是一个非常实用方便的制作ico格式文件的小工具~
本文地址:http://www.jb51.net/article/8314.htm Aveiconifier是一个非常实用方便的制作ico格式文件的小工具~ 也许有一些对网页知识不是很了解的网友并不清 ...
HTML4如何让一个DIV居中对齐？float输入日志标题
float:left,right clear:both 如何让一个DIV居中对齐? 第一步:设置外层的DIV的text-align:center; 第二步:设置里层的DIV的margin:auto 以 ...

一个DIV的芝士汉堡制作

一个DIV的芝士汉堡制作

HTML

CSS

最后

一个DIV的芝士汉堡制作相关推荐

最新文章

热门文章