2016年11月 存档

小tips:了解CSS/CSS3原生变量var

2016年11月26日,星期六

在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处。

随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,CSS工作组迅速跟进CSS变量的规范制定,并且,很多浏览器已经跟进,目前,在部分项目中已经可以直接使用了。

本文几乎就是业界关于CSS3 var()变量首发的文章,希望里面的内容能够对您的工作和学习有所帮助~~

阅读全文…

解决文字和text-decoration:underline下划线重叠问题

2016年11月23日,星期三

CSS text-decoration:underline可以给内联文本增加下划线,但是,如果对细节要求较高,就会发现,下划线经常会和中文文字的下边缘搞在一起,英文的话甚至直接穿越,看起来就比较香菇蓝瘦。

有没有什么办法让下划线不要靠得这么近,或者文字可以完整清晰地显示呢?

有,方法还不少……

阅读全文…

基于CSS color属性的静态UI组件重构策略

2016年11月18日,星期五

技术的发展往往会带来相应的思维方式上的转变,这样才能相辅相成,发挥新技术的潜力,如果还是使用以前的思维模式,怎么说呢,有着劳斯莱斯加着92#汽油在跑的感觉。

传统的实现,包括现在移动端几乎所有的实现套路都是下面这样的,无论是标签还是按钮,都是先设定一个基础类名,写下基本样式,然后不同的颜色重新命名一个状态类名,覆盖默认的边框色或者背景色或者文字颜色,是什么颜色就写什么颜色。

但,实际上,如果采用基于color重构UI组件的策略,则可能会有意想不到的裨益……

阅读全文…

基于HTML5 drag/drop模块拖动插入排序删除完整实例

2016年11月15日,星期二

做了个基于HTML5 drag/drop模块拖动插入排序删除完整demo,非常适合作为学习案例,以及在此基础上定制属于自己的模块拖拽功能。

希望本文的内容可以帮助一些小伙伴节约开发时间和成本。

阅读全文…

CSS content换行技术实现字符animation loading效果

2016年11月13日,星期日

CSS content字符生成配合CSS3 animation可以各类字符loading效果实现,一起过来看看眼界,学习学习新的实现思路吧~~

阅读全文…

CSS unicode-range特定字符使用font-face自定义字体

2016年11月12日,星期六

一看名称,很多小伙伴可能认为是个什么生僻的东西,实际上,这玩意只是名字怪怪的,功能关键时刻还是很管用的。

unicode-range是一个CSS属性,一般和@font-face规则一起使用。在自定义字体的时候,可以指定某些字符使用该字体,其他字符依然使用默认的或者其他的字体。这种特性在某些场景非常有用,也可以用来实现一些特殊的效果。

本文有详尽文字阐述,必要的源代码展示,精彩的实例页面和签到好处的效果截图以及多个字符处理相关的工具露脸,总之希望本文的内容能够对您的学习有所帮助。

阅读全文…

HTML可访问性fieldset,legend元素及CSS布局应用

2016年11月12日,星期六

本文主要介绍平时用的不多的,尤其现在的小伙伴很少关注的fieldset和legend元素,从可访问性以及CSS布局这块展示这两个元素的作用,价值以及应用场景。希望本文的内容能够对您的学习有所帮助。

阅读全文…