如何创作用纯 CSS 绘制一支栩栩如生的铅笔
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/PaZYBw
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cEQqefK
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义dom, 容器中包含笔头、笔杆(包含文字)和橡皮 3 部分:
<div class="pencil">
<span class="taper"></span>
<span class="barrel">made in China</span>
<span class="eraser"></span>
</div>
居中显示:
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: lightskyblue;
}
定义铅笔的尺寸:
.pencil {
position: relative;
width: 50em;
height: 3.5em;
}
画出笔杆:
.pencil .barrel {
position: absolute;
width: 40em;
left: 4em;
background-color: green;
border-top: 1em solid forestgreen;
border-bottom: 1em solid darkgreen;
}
设置笔杆上文字的样式:
.pencil .barrel {
line-height: 1.5em;
font-family: sans-serif;
text-transform: uppercase;
color: silver;
text-align: center;
}
用伪元素画出笔头:
.pencil .taper::before,
.pencil .taper::after {
content: '';
position: absolute;
left: -4em;
border-style: solid;
border-width: calc(3.5em / 2) 4em;
}
.pencil .taper::before {
border-color: transparent burlywood transparent transparent;
}
.pencil .taper::after {
border-color: transparent green transparent transparent;
transform: scale(0.3);
}
画出橡皮:
.pencil .eraser {
position: absolute;
right: 0;
width: 6em;
height: 1.5em;
background-color: lightpink;
border-top: 1em solid pink;
border-bottom: 1em solid lightcoral;
border-top-right-radius: 0.5em;
border-bottom-right-radius: 0.5em;
}
用伪元素画出橡皮上的铁箍:
.pencil .eraser::before {
content: '';
position: absolute;
top: -1em;
left: 0;
width: 1.5em;
height: 1.5em;
background-color: silver;
border-top: 1em solid lightgray;
border-bottom: 1em solid gray;
}
最后,增加阴影:
.pencil {
filter: drop-shadow(5px 10px 3px gray);
}
大功告成!
原文地址:https://segmentfault.com/a/1190000015153865
如何创作用纯 CSS 绘制一支栩栩如生的铅笔的更多相关文章
- 41.纯 CSS 绘制一支栩栩如生的铅笔
原文地址: https://segmentfault.com/a/1190000015153865 感想: 不难 HTML code: <div class="pencil" ...
- 碉堡了! 纯 CSS 绘制《辛普森一家》人物头像
这篇文章给大家分享一组纯 CSS 绘制的<辛普森一家>人物头像.<辛普森一家>(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧.该剧通过对霍 ...
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 摘记 史上最强大的40多个纯CSS绘制的图形(一)
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
- 史上最强大的40多个纯CSS绘制的图形
Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...
- 40多个纯CSS绘制的图形
本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...
- CSS 魔法系列:纯 CSS 绘制各种图形《系列六》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列:纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列:纯 CSS 绘制图形(各种形状的钻石)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
随机推荐
- VC++6.0下新建工程中有17个选项,都是做什么用的?
要理解每种工程的作用需要很多基础知识,只能简要的和你讲一下: 1.ATL COM AppWizard 用来新建一个COM组件的向导,比如WORD里用的公式编辑器就是一个COM组件. 2.Cluster ...
- cmd - 使用curl命令的注意点
前言 最近在cmd中使用curl命令来测试rest api,发现有不少问题,这里记录一下. 在cmd中使用curl命令的注意事项 json不能由单引号包括起来 json数据里的双引号要用反斜杠\转义 ...
- python操作redis之String操作
# __author__ = 'STEVEN' import redis,time # 方式1,直接链接操作 # r = redis.Redis(host='192.168.43.22',port=6 ...
- [译]Understanding ECMAScript6 函数
函数 函数是任何编程语言的重要组成部分,而自从JavaScript被引入以来,JavaScript的函数就未有太多改变.遗留下来的积压问题及微妙行为使我们很容易犯错误,或者需要更多的代码来实现一个非常 ...
- MvcPager无刷新分页,包含搜索和跳转功能
1.MVC无刷新分页和搜索(第一版) http://pan.baidu.com/s/1eRQ7Ml8 密码:uqf7 出现的问题: 1)程序不走判断条件一直为false, 错误原因:1)可能没有引 ...
- BS3 多级菜单
<div class="container"> <div class="row"> <h2>Multi level drop ...
- kafka基础四
消费者消费过程(二) 消费组状态机:消息的产生存储消费看似是杂乱无章的,但万物都会遵循一定的规则成长,任何事物的发展都是有迹可循的. 开始消费组初始状态为Stable,经过第一次Rebalance之后 ...
- vue之导入Bootstrap和Jquery
Vue引入bootstrap主要有两种方法 方法一:在main.js中引入,此方法导入的bootstrap中对于html,body的一些预设置的css样式可能无效. 一.引入jQuery 在当前项目的 ...
- webpack入门之最简单的例子 webpack4
webpack在目前来说应该是前端用的比较多的打包工具了,那么对于之前没有接触过这块的该怎么办呢?答案很明显嘛,看资料,查文档,自己去琢磨,自己去敲一敲,跑一跑: 那么,这边我将以一个最基础的例子来将 ...
- 【Web应用】JAVA网络上传大文件报500错误
问题描述 当通过 JAVA 网站上传大文件,会报 500 错误. 问题分析 因为 Azure 的 Java 网站都是基于 IIS 转发的,所以我们需要关注 IIS 的文件上传限制以及 requestT ...