使用CSS做一碗营养充足的早餐面

4,626 阅读6分钟

「这是我参与11月更文挑战的第28天,活动详情查看:2021最后一次更文挑战

🎄前言

愉快的周末又要结束了,又要迎来新的打工日,小包心中有一丝悲伤。(那是绝对不可能啊,小包爱工作,老板看到希望能给加点工资)

微信图片_20211128163253.jpg

不管未来的路会有多苦多难,饭的质量一定要跟上,特别是早饭,重要的不得了啊!于是小包为了大家的身心健康考虑,亲自下厨,使用 CSS 中的 :before/:afterbox-shadow 内外阴影、线性渐变与径向渐变等顶级原材料,采用最顶级的烹饪工艺,为大家带来上流早餐面条一份。

学习本文,你会学会:

  • :before/:after 伪类元素的使用
  • 巩固 box-shadow 的使用
  • 线性渐变和径向渐变的学习

通过封面我们可以看到这碗丰盛的早餐面共有餐具、煎蛋、面条、葱花、火腿五部分组成,下面咱们来一起看看小包是如何烹饪的。

🍴 餐具

餐具有三种,分别是碗、筷子、小勺子。

筷子有两根,小勺子由勺柄和勺心两部分组成。根据我们编码的习惯,这种密切相关的两部分无需建立多个 div 元素,可使用 :before/:after 伪类元素实现。

上面将筷子和小勺子的实现分为两部分,初步构建好筷子和勺子,下面增加立体感,美化一下。box-shadow 提供内阴影和外阴影,配合起来可以很好的增加图形的立体感。

下面以小勺子为例,讲解一下上面思路的具体实现:

  • 实现勺柄
width: 15px;
height: 150px;
background: #963;
/* 增加圆角,使勺柄更加生动 */
border-radius: 5px;
  • 实现勺心部分
width: 70px;
height: 80px;
/* 现实中饭勺形状大多都是椭圆 */
border-radius: 50%/60% 60% 40% 40%;
/* 第一个背景为椭圆的阴影效果,增加立体感 */
background-image: radial-gradient( ellipse at center 70%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0) 40% ), linear-gradient(to top, #aa7744, #bb8855);

经过上面两步,就可以得到勺子的最初形态——平面勺子。

spoon1.png

  • 添加内外阴影

在具体设置阴影之前,先补充一点阴影方面的知识:

  1. inset 阴影水平方向设置为 0,垂直方向设置为负值,那么阴影会从底部往上蔓延。
  2. 如果设置多个阴影,先设置的阴影权重高,当阴影发生重合时,权重高的阴影会覆盖权重低阴影
/* 勺柄 */
box-shadow: 0 1px 2px 1px rgb(0 0 0 / 20%), 
            inset 0 -5px 2px 0 rgb(0 0 0 / 10%);
/* 勺心 */
box-shadow: 1px 1px 2px 0 rgb(0 0 0 / 10%), 
            -1px 0 2px 0 rgb(0 0 0 / 10%), 
            inset 0 -5px 1px 1px rgb(0 0 0 / 5%), inset 0 -5px 8px 1px rgb(0 0 0 / 10%)

关于 box-shadow: inset 的具体可以参考 :【缅怀钱老先生】实现炫酷的火箭发射效果

添加阴影后,小勺子是不是很可爱?

spoon2.png

碗与筷子的实现与小勺子类似,都是借助了内外阴影加背景色的效果,餐具最终效果图:

canju.png

餐具都已经具备了,那么剩下来要干啥那?干饭干饭,最强干饭人来袭。

ganfan.jpg

🍜 面条

小包看完面条的实现方式,不由被创意者的绝妙创意震撼到,真的是精彩绝伦,简单的属性大大的用处。

CSS 中提供两种类型渐变: 线性渐变、径向渐变。

径向渐变 radial-gradient 由它的中心定义,语法比较复杂,举个例子来描述语法:

radial-gradient(circle at center, red 0, blue, green 100%)
  • <shape>: 渐变形状,圆形和椭圆形,例子中的 circle
  • <position>: 中心点位置,例子中的 center
  • <color-stop>: 某个确定位置的固定颜色,设置模式通常为 color percentage/length,例子中的 red 0, blue, green 100%

有径向渐变的基础,我们就可以利用这个属性来做些文章。

比如将中间部分设置为透明色,外层设置为黄色,就可以实现一个圆环或者椭圆环效果。

/* 设置中空的椭圆环 */
radial-gradient(
    ellipse at center center,
    rgba(0, 0, 0, 0) 20%,
    rgba(0, 0, 0, 0.1) 21%,
    #ffcc33 21%,
    #ffcc33 23%,
    rgba(0, 0, 0, 0.1) 23%,
    rgba(0, 0, 0, 0) 24%
);

noodle1.png

看起来是不是很像一根面条,有可能一根面条带来的观感不够强烈,我们添加多组不同的径向渐变,不多说了,看饿了。

noodlelast.png

🍳 煎蛋

早上光吃面条可不行啊,一方面营养不够,另一方面,你吃你也噎啊。咱们来添加点开胃小菜助助兴,首先咱们添加个鸡蛋保证充足的营养。

煎蛋的实现与勺子类似,大椭圆蛋清加小椭圆蛋黄,最后添加一下内外阴影修饰,美味的煎蛋就摆在碗中了。

蛋清部分:

.egg{
    border-radius: 50%/60% 60% 40% 40%;
    box-shadow: inset 0 -5px 2px 0 rgb(0 0 0 / 10%), 1px 5px 5px 0 rgb(0 0 0 / 30%);
}

蛋黄部分:

.egg:before {
    background: #fc0;
    border-radius: 50%;
    box-shadow: 0 0 1px 1px #f90, inset 0 0 5px 1px rgb(255 153 0 / 50%)
}

让煎蛋稍微旋转一下,摆盘的艺术。

.egg {
    transform: rotate(20deg);
}

egg.png

🍖 海苔、火腿

添加完煎蛋后,可以添加点咸菜,比如火腿啊、海苔等,我们就可以吃完这碗热腾腾的早餐面,快快乐乐的打工去了。

两者的实现方法与上文极度类似,因此不再扩展讲述。

🛕 源码仓库

传送门: 早餐面

如果感觉有帮助的话,别忘了给小包点个 ⭐ 。

💘 往期精彩文章

💥 后语

伙伴们,如果大家感觉本文对你有一些帮助,给阿包点一个赞👍或者关注➕都是对我最大的支持。

另外如果本文章有问题,或者对文章其中一部分不理解,都可以评论区回复我,我们来一起讨论,共同学习,一起进步!

如果感觉评论区说不明白,也可以添加我的微信(li444186976)或者 qq(3315161861) 详细交流,名字都是战场小包。