[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 ...
随机推荐
- 混合式框架-AngularJS
简单介绍 AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门非常好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也能够认 ...
- java中异常的限制
子类在覆盖父类方法时,父类的方法如果抛出了异常,那么子类的方法只能抛出父类的异常或者该异常的子类.如果父类抛出多个异常,那么子类只能抛出父类异常的子集.简单说:子类覆盖父类只能抛出父 ...
- Android自定义系统分享面板
在Android中实现分享有一种比较方便的方式,调用系统的分享面板来分享我们的应用.最基本的实现如下: public Intent getShareIntent(){ Intent intent = ...
- Pairs Forming LCM
题目: B - Pairs Forming LCM Time Limit:2000MS Memory Limit:32768KB Description Find the result of ...
- HTTP浅谈
HTTP浅谈 1···什么是HTTP? HTTP协议就是超文本传输协议(HyperText Transfer Protocol),通俗理解是浏览器和web服务器传输数据格式的协议,HTTP协议是一个应 ...
- Dubbo学习总结(4)——Dubbo基于Zookeeper实现分布式实例
入门实例解析 第一:provider-提供服务和相应的接口 创建DemoService接口 [java] view plaincopyprint? <span style="font- ...
- 用py2exe打包成一个exe文件
用py2exe打包成一个exe文件 http://blog.csdn.net/franktan2010/article/details/46514607
- Jquery获取select选中的option的文本信息
注意:以下用的$(this)代表当前选中的select框 第一种: $(this).children("option:selec... ...查看全文
- html5 audio标签相关知识点总结
1.audio指JS原生对象,假如用jquery获取到audio标签后,需要dom[0]转为原生JS对象 if(audio.paused){ //如果音频暂停,就播放 audio.play(); }e ...
- QQ群功能设计与心理学
刚刚在一个Java技术交流群,发了个 "博客投票"的广告. 群主两眼一黑,瞬间就把我给干掉了. 看到QQ给出的系统消息,发现QQ群的一个功能做得很不错. 大家注意到,右边有个&qu ...