[CSS] Draw Simple Icons with CSS
Using pseudo-elements like ::before
and ::after
we can draw some simple icons without having using image assets which can help reduce the number of requests and improve performance.
const Radio = ({
active,
children,
onChange
}) => { return (
<label className="filter">
<input checked={active}
type="radio"
name="filter"
className="filter__radio"
onChange={e => {
onChange();
}}
/>
<span className={`filter__label--${children.toLowerCase()}`}>{children}</span>
</label>
);
};
[class^="filter__label"] {
position: relative;
display: inline-block;
padding-left: 16px;
color: rgba(236,240,241,0.3);
} [class^="filter__label"]:hover {
color: #ccc;
} .filter__radio:checked + [class^="filter__label"] {
color: #fff;
} [class^="filter__label"]::before,
.filter__label--all::after {
content: '';
position: absolute;
top: 5px;
left:;
background: #647380;
display: block;
width: 10px;
height: 10px;
border-radius: 5px;
box-shadow: 0 0 2px 1px rgba(0,0,0,0.2);
} .filter__radio {
position: absolute;
opacity:;
} .filter__label--all {
padding-left: 21px;
} .filter__label--all::after {
left: 5px;
} .filter__radio:checked + .filter__label--all::before {
background: #af544f;
}
.filter__radio:checked + .filter__label--all::after {
background: #16a085;
} .filter__radio:checked + .filter__label--active::before {
background: #af544f;
} .filter__radio:checked + .filter__label--completed::before {
background: #16a085;
} @media only screen and (min-width: 730px) {
.container {
max-width: 720px;
justify-content: flex-end;
}
.todo-app {
border-radius: 4px 4px 0 0;
}
.todo-list {
order: -1;
flex-direction: column;
}
[class^="todo-list__item"] {
box-shadow: 0 1px 0 0 #e6e6e6, 0 2px 0 0 white;
}
.filters {
border-radius: 3px 3px 0 0;
order:;
}
}
[CSS] Draw Simple Icons with CSS的更多相关文章
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
Atitit.css 规范 bem 项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...
- CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
- CSS 魔法系列:纯 CSS 绘制各种图形《系列六》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列:纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- css读书笔记2:css工作原理
css就是一种先选择html元素,然后设定选中元素css属性的机制.css选择符合要应用的样式构成一条css规则. 为文档添加样式的3种方法: 1.行内样式,直接写在特定标签的style属性中:2.嵌 ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- 可否控制<link type=text/css rel=stylesheet href=style.css>
本篇文章主要介绍了"可否控制<link type=text/css rel=stylesheet href=style.css> ", 主要涉及到可否控制<lin ...
随机推荐
- JavaScript入门:003—JS中的变量
编程语言都是同样的,JS中也是有变量的.首先JS的变量是区分大写和小写的,这个须要注意.比方number和Number是不同的变量.无论是经常使用类型的,还是对象类型,比方 Object obj和Ob ...
- php课程 12-41 多态是什么
php课程 12-41 多态是什么 一.总结 一句话总结:一种请求,多种响应(根据参数类型和数量) 1.function useUsb(Usb $usb){}这句话是什么意思? 判断$usb参数是否实 ...
- 33.Node.js 文件系统fs
转自:http://www.runoob.com/nodejs/nodejs-module-system.html Node.js 提供一组类似 UNIX(POSIX)标准的文件操作API. Node ...
- node --进行后台的环境搭建
1.下载winscp --- 输入IP 端口 账号 密码 进入当前的服务器环境 2.下载xshell5 ---- 输入IP 端口 和 winscp 达成连接. 3.把本地代码放置 winscp远 ...
- AngularJsDEMO
接触AngularJs时间不长,纯粹是学着好玩而已,因此没有深挖原理,针对理论性的知识,园子里面有很多介绍,我就不多介绍了. 这里写了个简单的DEMO,部署起来就可以直接运行了,里面 大概用了最基础的 ...
- 新手前端笔记之--初识html标签
接触前端(好大气的名字啊)已经一个多月了,看了很多视频和博客,有了一定的感性认识,但还是需要总结一下以便系统化所学习的知识,就从html标签开始吧.关于标签,谈论最多的就是简洁和语义化.简洁指html ...
- 前端上传文件 后端PHP获取文件
<body> <form action="03-post-file.php" method="post" enctype="mult ...
- 发送 email 过程
发送 email 过程 SMTP基本命令集: 命令 描述 ---------- HELO 向服务器标识用户身份发送者能欺骗,说谎,但一般情况下服务器都能检测到. MAIL 初始化邮件传输 mail f ...
- animation-list -帧动画
帧动画实现起来比较简单,今天接触到使用xml来创建帧动画,记录下来. 它说白了,其实就是动态的展示图片而已 1.在xml中定义帧动画,如下 <?xml version="1.0&quo ...
- 1.IntelliJ IDEA搭建SpringBoot的小Demo
转自:http://www.cnblogs.com/weizaibug/p/6657077.html 首先简单介绍下Spring Boot,来自度娘百科:Spring Boot是由Pivotal团队提 ...