currentColor-CSS3非常有用的变量
一、currentColor-简介
currentColor
顾名思意就是“当前颜色”,准确讲应该是“当前的文字颜色”,例如:
.xxx { border: 1px solid currentColor; }
二、currentColor的使用与表现
上面提到,currentColor
表示“当前的标签所继承的文字颜色”。可能一下子蒙圈了,还是上代码的好,CSS代码如下:
aaarticlea/png;base64,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" alt="" />
于是,文本边框颜色就会是文章文字颜色,如下这样子:
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVMAAABpCAIAAAAIv1dcAAAFcUlEQVR4nO3bP27iQBSAce6Tw3ALrmIpJ+AGLqlzAqpISEg0dEYCWQaEXKR9W4Q/Mx5DMmPjPPZ9P7lYsM2O0H54GLwjAWDP6K8HAOAPUD5gEeUDFlE+YBHlAxZRPmAR5QMWUT5gEeUDFlE+YBHlAxZRPmAR5QMWUT5gEeUDFlE+YBHlAxZRPmAR5QMWUT5gEeUDFlE+YBHlAxZRPmAR5QMWUT5gEeUDFlE+YBHlAxZRPmAR5QMWUT5gEeUDFlE+YBHlAxZRPmAR5QMWUT5gEeUDFlE+YBHlAxZRPmBR5/JHo/9hG1j1+T9sg3t/K/6Dbfj3rRXlUz7lU37KC/x1tJRP+S+1Df++teqv/Ff05+W/IgXlD/9Xd6dt8JRP+ZEoP4m2wVM+5Uei/CTaBk/5lB+J8pNoGzzlU34kyk+ibfCUT/mRKD+JtsFTPuVHovwk2gZP+ZQfifKTaBs85VN+JMpPom3wlE/5kSg/ibbBU77y8g+yX8jX00cUgfKTaBv8UOXvcsnmbTvmzv3zY9kFZ133jvOuQw3pL/+0kKpR/kH2wS30tX/W1/q263Toc+SiuPzFtuU++UlZXg+oyult1+ajun+6e9Ywgx/cs8vfyfhyQFj+Lvdqz8few10uo8x7nd7j115+IcdVUH7xQ8ynhVSr85/r8PTOtJZfzjbTWe0/s73lvdh6tT98uMz6j99a+Rf5uKX8bCS5e5Xfydh5pnFK42OiF8rLP65Eirjyv9be8ZbKX878Vqtymu0vD+qPSdH4XFhmxfv5gPpjUuQLd2f4TFeU78iCiUDml3+75jemAD3RXH69klqiyz8t5Pjkf1tay29YZu58vqXkcrY5l1+V02Dy73wu9IPyHdnIj3kn45G0rgY82tWB3vKLS8BB+V/r++UfZP+EL/YNL1G+d8EX+e7cn8CXs835s6Ct/PD4jij/vnnW8k3+usjXe/aiuPzT6lJ7W/m1yPG6vOfuLc5LevXK4gqfw7/gn5Wzzfvbdvn9oCrz2+R/n781ZgT7/K24HdwHyr9n/nAyb2mFz7uqt5XvLuZ73+QLqT5l70z4GwcPMPhn+m08VTltvVxXZT4r8/OLeFUvM/eZ+mOymU4o/4cX6KX8x9lfj+n7yq+x/IMc187D8Ht+4PjpfDX4bH7PPy1kv247LZX68sNFfhGRxdadvfupX5+5/eDX+/I+5Yd+k72ItK0IdqSwfHei/vhH+6vbql7RMr2vV7cf+Z49+Cf7XTzh1F2+L+Mxa3j1x4QVvh9eoGP597PPgum9hfKbgmv+8bNZ8q38g+yDa7618tuW66Qqp+HU3Z8FBMfzq94PL9Cl/J2Ms+Yz+fyyq1H+XEaN3/87e73yw7b99Xz3Np7rM6Zm+4vte0u0+/zx6r1/J0/vC/tit/zwAi4iWXBnzjy7tT3PvOlA8yfAPugvv3FnjojUK6/kZurfi3xr53RbK3zlbNNWvr+wL8EHhFt+4/a+nlgr37l797xd6537z182d2Ywz+zet+/ee1/5M3xvVziTd2/sf8L/9tFd/p1rvoj8cN++s8LX55L+lbXyddNcvlrKy9dK2+Apn/IjUX4SbYOnfMqPRPlJtA2e8ik/EuUn0TZ4yqf8SJSfRNvgKZ/yI1F+Em2Dp3zKj0T5SbQNnvIpPxLlJ9E2eMqn/EiUn0Tb4Cmf8iNRfhJtg6d8yo9E+Um0Db6/8l96G9i9/4H/WtvgrvG89Db8+9aK8imf8ik/5QX+OlrKp/yX2oZ/31q95vdzAN1QPmAR5QMWUT5gEeUDFlE+YBHlAxZRPmAR5QMWUT5gEeUDFlE+YBHlAxZRPmAR5QMWUT5gEeUDFlE+YBHlAxZRPmAR5QMW/QPujazgBxZ+DwAAAABJRU5ErkJggg==" alt="" />
(我把边框改成3px了,上面的代码也就没改,知道就行啦。。。)
注意:由于是CSS3新增关键字,需要IE9+以及其他现代浏览器才有效果。
换种方式表示就是:currentColor = color的值
用图示意是:
aaarticlea/png;base64,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" alt="" />
任意替换性
凡事需要使用颜色值的地方,都可以使用currentColor
替换,比方说背景色 – background-color
, 渐变色 – gradient
, 盒阴影 – box-shadow
, SVG的填充色 – fill
等等。很灵活,很好用!
下面问题来了,我要让图片边框蓝色,直接:
border: 1em solid blue;
不就好了,还要费尽周折弄个currentColor
搞摩斯(武汉话,’干嘛’意思)啊?这活生生多了好多字节的大小啊!
这个想法其实短见了,当我们应用一些CSS高级技能,尤其CSS3图形技术的时候,你会发现,currentColor
就是雾霾天气下的强劲冷空气,带来无比的清爽与洁净,下面一章节的栗子大家不妨好好感受下!
三、 currentColor的实战表演秀
实战1:背景色镂空技术
这种设计的目的就是鼠标hover时候,图标可以跟着文字一起变色。如果不考虑兼容性问题,我们可以稍稍改造下,使其实现更加简单:
.icon {
display: inline-block;
width: 16px; height: 20px;
background-image: url(../201307/sprite_icons.png);
background-color: currentColor; /* 该颜色控制图标的颜色 */
}
于是,我们想要鼠标hover文字链接,其图标颜色要跟着一起变化,只要改变文字颜色就可以了:
.link:hover { color: #333; }/* 虽然改变的是文字颜色,但是图标颜色也一起变化了 */
HTML结构如下:
<a href="##" class="link"><i class="icon icon1"></i>返回</a>
于是鼠标hover就是#333
颜色图文合体变化:
您可以狠狠地点击这里:背景色镂空技术与currentColor demo
实战2:CSS3图标生成与hover控制
所谓CSS3图标生成,就是图标完全由CSS3特性代码组合合成。由于多半跟链接文字混用,因此,有个交互效果就是:hover文字的时候,图标的颜色也要跟着变化。我一开始使用的是定值颜色,为了hover
时候颜色控制方便,就大肆使用border
属性构建图形,虽然效果也有,但HTML和CSS都啰嗦了点。借助currentColor
, hover
时候的颜色变化,我们根本无需关心,因为无论是border
, background
, 还是box-shadow
都使用currentColor
作为图形颜色,hover时候自然就会变成我们想要的文字颜色。
具体每个图标代码也简化了,拿平铺图标举例,9个点:
之前为了hover方便,使用border
实现,于是5个元素上阵才模拟出来的,代码熙熙攘攘如下:
.ico-repeat::before,
.ico-repeat::after,
.ico-repeat z { width: 3px; height: 7px; border-top: 3px solid #777; border-bottom: 3px solid #777; top: 5px; left: 3px; }
.ico-repeat::before { left: 3px; }
.ico-repeat::after { left: 13px; }
.ico-repeat z { left: 8px; }
.ico-repeat z::before { width: 7px; height: 3px; border-left: 3px solid #777; border-right: 3px solid #777; top: 2px; left: -5px; }
.ico-repeat z::after { width: 3px; border-top: 3px solid #777; top: 2px; }
使用currentColor
我们可以摆脱实现方式的限制,例如,我们可以使用box-shadow + currentColor
, 只要一个元素就可以了。
.ico-repeat::before { width: 3px; height: 3px; background-color: currentColor; box-shadow: 0 5px currentColor, 5px 0 currentColor, 5px 5px currentColor, 10px 0 currentColor, 0 10px currentColor, 5px 10px currentColor, 10px 5px currentColor, 10px 10px currentColor; top: 5px; left: 3px; }
HTML方便也没有必要再内嵌一个<z>
元素,直接如下就可以了:
<a href="javascript:" class="ico-a"><i class="ico ico-repeat"></i>平铺</a>
鼠标hover效果依然杠杠的,如下:
其他很多图标也可以做类似的优化,例如列表图标可以放心使用background-color + border + background-clip
单标签三边框生成技术,于是,只要两个元素就足够了,而之前至少要四个。
首先,border
和box-shadow
默认的颜色就是当前的文字颜色,也就是类似currentColor
;
其次,在iOS Safari浏览器下(iOS8)下,currentColor
还是有一些bug的,例如伪元素hover时候,background:currentColor
的背景色不会跟着变化,怎么办呢?等升级,或者使用border来模拟。由于发现这个问题有一些时日,我有没有时间及时记录,因此,一些细节我也记不清楚了。
currentColor-CSS3非常有用的变量的更多相关文章
- Makefile有三个非常有用的变量。分别是$@,$^,$
原文地址:https://blog.csdn.net/u013774102/article/details/79043559 假设我们有下面这样的一个程序,源代码如下: /* main.c */ #i ...
- CSS/CSS3中的原生变量var详解以及布局响应式网页扩展
使用语法 首先我们先来看一个例子:html代码: <div class="element">这是一段文字</div> css代码: .element { w ...
- Makefile-有三个非常有用的变量。分别是$@,$^,$<代表的意义
$@ 代表目标文件,$^ 代表所有的依赖文件,$< 代表第一个依赖文件. # 这是简化后的Makefilemain:main.o mytool1.o mytool2.o gcc -o $@ $^ ...
- Linux命令行--使用linux环境变量(转)
5.1 什么时环境变量 bash shell用一个成为环境变量的特性来存储有关的shell回话和工作环境的信息,这是它们成为环境变量的原因.它允许你在内存中存储数据,以便运行在账户.系统.shell的 ...
- PHP中使用的变量
变量是用于临时的存储值的容器.这些值可以是数字.文本,或者复杂得多的排列组合. 变量在任何编程语言中都居于核心地位,理解它们是使用PHP的关键所在.变量又是指在程序的运行过程中随时可以发生变化的量,是 ...
- Scala变量| 流程控制
Scala 是 Scalable Language 的简写,是一门多范式(编程的方式)的编程语言 Scala是一门以java虚拟机(JVM)为目标运行环境并将面向对象和函数式编程的最佳特性结合在一起的 ...
- JavaScript高级程序设计学习(三)之变量、作用域和内存问题
这次讲的主要是变量,作用域和内存问题. 任何一门编程语言,都涉及这三个. 变量,比如全局变量,局部变量等,作用域,也分全局作用域和方法作用域,内存问题,在java中就涉及到一个垃圾回收的问题,由于ja ...
- JavaScript读书笔记(4)-变量、作用域和内存问题
1.ECMAScript数据类型分为:基本类型值和引用类型值: ECMAScript中所有函数的参数都是按值传递的: 检查对象的类型:varible instanceof constructor Al ...
- vue UI库iview源码解析(2)
上篇问题 在上篇<iview源码解析(1)>中的index.js 入口文件的源码中有一段代码有点疑惑: /** * 在浏览器环境下默认加载组件 */ // auto install if ...
随机推荐
- 使用MEF实现通用参数设置
通用后台管理系统必备功能模块包含日志管理,权限管理,数据字典,参数配置等功能.参数设置主要用于设置系统运行所需的一些基础性配置项,比如redis缓存,mq消息队列,系统版本等信息.好的参数设置需要达到 ...
- 用上CommonMark.NET,.NET平台终于有了好用的markdown引擎
缺少好用的markdown引擎之前一直是.NET平台上的一个痛点.因为这个痛点,我们被迫痛苦地使用了pandoc--不是pandoc做的不好,而是pandoc是由Haskell开发的,只能在Windo ...
- MongoDB的基本操作
环境:CentOS6.8 Mongodb3.2.10 启动 启动mongoDB服务器 # service mongod start 启动mongoDB客户端 # mongo 该客户端是一个JavaS ...
- Redis集群(四):主从配置二
一.本文目的 主要介绍redis主从模式下各种情况 二.说明 主从的基本概念:Master用于写入,Slaver用于读取,不能写入或修改,一个Master可以对应多个Slaver Mas ...
- mysql返回最后一列数据
获取MySQL的表中每个userid最后一条记录的方法,并且针对userid不唯一的情况,需要的朋友可以参考下 表结构 CREATE TABLE `t1` ( `userid` int(11) DEF ...
- Python 从零学起(纯基础) 笔记 之 深浅拷贝
深浅拷贝 1. import copy#浅拷贝copy.copy()#深拷贝copy.deepcopy()#赋值 = 2. 对于数字和字符串而言,赋值.浅拷贝和深拷贝无意义,因为其永远指向同一个 ...
- nginx + mysql + php相关源码包及安装
nginx + mysql + php安装 引言 完整的搭建一个nginx+php-fpm+mysql的服务器,一直是我向做的,不过一致没有完成过,这次工作需要,终于安装成功了 我列出了我遇到的一些问 ...
- 11月8日下午Jquery取属性值(复选框、下拉列表、单选按钮)、做全选按钮、JSON存储、去空格
1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- Arcgis10安装说明
注意无需覆盖任何文件,只需根据文章后面的内容自己随机建一个任意格式的文本文件即可 安装license manager,将后面的license 内容新建一个文本文档拷贝进去.使用这个文件作为lice ...
- [Unity3D] Normal map、Diffuse map 和 Speculer map
Normal map : Normal map (法线贴图) 它的作用是模拟出高模上的一些细节纹理,特别是将高模上的圆滑和粗糙度投射到低模上,让低模也有高模的效果. 因为高模的面数非常多,导入引擎后电 ...