CSS

CSS基础知识学习:CSS绘制铅笔

铅笔,距今已有四百多年的历史,其中,绘画素描的铅笔分为诸多类型,它分成三个发展阶段,分为石墨、木制笔杆、带帽铅笔。

1564年,在英格兰一个叫巴罗代尔的地方,人们发现了一种黑色矿物——石墨。很快,当地的一些牧羊人发现,可以用石墨在羊身上画上记号。受此启发,人们把石墨块切成小条拿来写字和绘画。但石墨条很容易弄脏手,而且容易折断。1761年,德国化学家法伯尔解决了这个问题:他先把石墨矿石研磨成粉末,用水冲洗去杂质,获得纯净的石墨粉;接着,他又在石墨粉中掺入硫磺、锑、松香等物质;然后再将这种混合物加热凝固,并压制成笔的形状,这是铅笔最早的雏形。

是不是觉得铅笔的进步非常大,这离不开先人们的摸索努力。下面我们用CSS制作一只漂亮的铅笔。

外观

有第一段话,前面由石墨、木制笔杆、带帽组成,OK,我们就简单的画出轮廓

<div class="pencil">
  <span class="taper"></span>
  <span class="barrel"></span>
  <span class="eraser"></span>
</div>

css

.pencil {
  display: flex;
  width: 50em;
  height: 3.5em;
  transform-origin: 150% center;
}

.pencil .taper {
  width: 4em;
  background: #000;
}
.pencil .barrel {
  width: 40em;
  background: green;
}

.pencil .eraser {
  position: relative;
  width: 6em;
  background: pink;
}

flex布局,铅笔分成3部分,黑色是笔尖、绿色是木质笔杆、粉色是笔帽(橡皮擦)

问一个题外话,上学的时候是不是橡皮擦永远不够用呢?上课没事就用手扣橡皮,哈哈,我反正是。

Flex简介

采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。

要想学习flex布局的,可以去我的历史文章里面,有更多更详细的介绍。

《CSS3中Flex弹性布局该如何灵活运用?》

细致化

笔尖:

/* 三角形 */
.pencil .taper::before,
.pencil .taper::after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: calc(3.5em / 2) 4em calc(3.5em / 2) 0;
  border-color: transparent;
}
.pencil .taper::before {
  border-right-color: burlywood;
}

.pencil .taper::after {
  border-right-color: #111;
  transform-origin: left;
  transform: scale(0.3);
}

用伪类画出两个三角形,然后石墨部分用transform: scale(0.3)缩小,CSS各种形状绘制推荐文章:《CSS画各种图形(五角星、吃豆人、太极图等)》

笔杆

.pencil .barrel {
  width: 40em;
  background-color: rgb(7, 150, 7);
  border-top: 1em solid rgb(9, 179, 9);
  border-bottom: 1em solid rgb(0, 128, 0);
  color: silver;
  line-height: 1.5em;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

设置border-topborder-bottom和背景,用不同颜色,达到层次感,使其更有立体感

笔帽

和笔杆同理,设置border-topborder-bottom和背景,用不同颜色

.pencil .eraser {
  width: 6em;
  background-color: lightpink;
  border-top: 1em solid pink;
  border-bottom: 1em solid lightcoral;
  border-radius: 0 0.5em 0.5em 0;
}

是不是觉得少了点什么?

还记得铅笔橡皮擦上面都有一个金属圈来固定橡皮的东西吗?

.pencil .eraser{
  position: relative;
  ...
}
.pencil .eraser::before {
  content: '';
  position: absolute;
  top: -1em;
  width: 1.5em; 
  height: 1.5em;
  background-color: silver;
  border-top: 1em solid lightgray;
  border-bottom: 1em solid gray;
}

所以我么自己用伪类,在橡皮上面覆盖一个金属圈即可

一只铅笔就这样出厂了,是不是很简单呢?跟铅笔的发展史比,这简直太简单了。

小结

本小结知识:

1、Flex布局

2、:befroe:after伪类灵活运用

3、CSS绘制三角形等

4、transform 缩放元素

5、CSS border灵活运用

小伙伴们,有问题可以评论区留言哦,欢迎大家点评。需要源码的小伙伴可以购买,私信我哦。

谢谢大家一直以来的支持。

资源下载价格1立即支付    升级VIP后免费升级VIP
本站资源一次收费,永久下载!发现资源失效,联系站长恢复即可!由于源码、主题具有可复制性、可传播性,一经购买,概不退货,购买前请再三确认!本站提供安装搭建等技术支持,网站底部联系即可。时间:周一—周五 9:30-18:00。谢谢合作!

VIP用户所有收费资源免费,登录后左上角点击 昵称 ,进入用户中心充值成为VIP会员!

(15)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注