CIKONSS-纯CSS实现的响应式Icon

什么是 CIKONSS？

Cikonss是利用纯CSS技术构建的响应式、跨浏览器的icon。所说的“跨浏览器”是指IE8+。这意味着必须使用CSS2，因此，可以绘制的形状或图形就受到了限制。

某些icon必须有 border-radius 属性，这主要是为了在支持此属性的浏览器上更好的绘制icon，而且不会影响到不支持此属性的浏览器。

在html文件的head标签内容引入 cikonss.css 文件，如下：

    <link rel="stylesheet" href="cikonss.css">

下载： cikonss.css

现在就可以直接使用了，cikonss共有43个icon，5种尺寸、3种样式。每个icon都是由两个 元素构成。父元素定义如下：

general style: .icon (mandatory)

the size: .icon-small, .icon-mid, .icon-large, .icon-extra-large, .icon-huge (mandatory)

variant: .icon-square, .icon-rounded (optional)

<span class="icon icon-small icon-square">...</span>

子元素才是真正的icon实现

小号ICON.icon-small {font-size: 1em;
}中号ICON.icon-mid {font-size: 2em;
}大号ICON.icon-large {font-size: 4em;
}超大号ICON.icon-extra-large {font-size: 8em;
}巨型ICON.icon-huge {font-size: 12em;
}

例子：

<div><span class="icon icon-small"><span class="icon-battery-empty"></span></span><span class="icon icon-small icon-square">方</span><span class="icon icon-small icon-rounded">圆</span><span class="icon icon-mid icon-square"><span class="icon-mail"></span></span><span class="icon icon-mid icon-rounded"><span class="icon-home"></span></span><span class="icon icon-large icon-rounded"><span class="icon-plus"></span></span><span class="icon icon-extra-large icon-rounded"><span class="icon-download"></span></span><span class="icon icon-huge icon-rounded"><span class="icon-play"></span></span>
</div>

库

CIKONSS-纯CSS实现的响应式Icon相关推荐

css图标代码星,15个纯CSS实现的响应式土豪金星球类应用动画图标
CSS 语言: CSSSCSS 确定 div { position: absolute; box-sizing: border-box; margin: 0; padding: 0; border: ...
纵向时间线html,纯CSS实现的响应式时间轴（时间线）布局
HTML 导入代码模板: First Era Bacon Ipsum Bacon ipsum dolor amet ball tip jerky sirloin pancetta capicola p ...
网页规划与设计HTML5+CSS大作业——响应式个人简历介绍(5页)-模板下载
HTML5+CSS大作业--响应式个人简历介绍(5页)-模板下载常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. ...
一款纯css3实现的响应式导航
之前为大家介绍了好几款响应式导航.今天再给大家带来一款纯css3实现的响应式导航.这款导航还有个响应式的搜索框.废话少说,直接上图: 在线预览源码下载实现的代码. html代码: <di ...
html 响应式同一行,一行CSS实现各种响应式元素 – Fluidity
一行CSS实现各种响应式元素 – Fluidity 3月 31, 2014 评论 Sponsor FLUIDITY是一个极微小的CSS样式表,压缩版只有一行代码,大小只有115个字节,它能实现图像.文 ...
[css] 你对响应式设计的理解是什么？知道它基本的原理是吗？要想兼容低版本的IE怎么做呢？
[css] 你对响应式设计的理解是什么?知道它基本的原理是吗?要想兼容低版本的IE怎么做呢? 理解:在不同系统,不同设备,不同尺寸的界面,有良好的用户体验,舒适的阅读体验,交互体验. 原理:根据不同设 ...
HTML5+CSS大作业——响应式个人简历介绍(5页)-模板下载
HTML5+CSS大作业--响应式个人简历介绍(5页)-模板下载常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. ...
html+css实现一个响应式管理平台架构模板
文本将会带你使用html+css实现一个响应式的管理平台架构模板,目前来说市面上的管理平台架构模板大同小异,文本的知识点都会符合场景所需. 目录 1.管理平台的架构内容 2.顶部的布局 3.下半部分布 ...
html通过分辨率动态加载css，做响应式页面，响应式和自适应的区别
html通过分辨率动态加载css,做响应式页面响应式和自适应的区别: 自适应需要写多个页面,响应式只需一个页面即可自适应通过窗口检测,获取不同的页面:响应式通过窗口检测,在客户端做不同的处理法1 ...
JavaScript+css实现的响应式登录注册页面web前端html源码
大家好,今天给大家介绍一款,JavaScript+css实现的响应式登录注册页面web前端html源码(图1).送给大家哦,获取方式在本文末尾. 图1 响应式设计,适应各种分辨率(图2) 图2 登录界 ...

CIKONSS-纯CSS实现的响应式Icon

什么是 CIKONSS？

库

CIKONSS-纯CSS实现的响应式Icon相关推荐

最新文章

热门文章