“css相关”目录存档

真正了解CSS3背景下的@font face规则

2017年03月30日,星期四

很多人只要一提到@font face规则,心中就会不由自主“哦~~”的一声:“这个我知道,可以用来生成自定义字符小图标!”话是没错,问题在于很多人就以为生成字符小图标就是@font face规则的全部,实际上只是功能之一,如果真正了解@font face规则,你会发现,@font face规则可以做的事情其实非常多,尤其我们不考虑IE7,IE8浏览器的情况下……

阅读全文…

CSS font-family常见中文字体对应的英文名称

2017年03月25日,星期六

虽然一些常见中文字体直接使用中文名称作为CSS font-family的属性值也能生效,但我们一般都不使用中文名称,而是使用英文名称,主要是规避乱码的风险。还有一些中文字体,直接使用中文名称作为CSS font-family的属性值是没有效果的,需要使用对应的英文字体名称才可以。也即是说,不管怎样,你要想使用中文字体,就必须要知道其对应的英文名称…

阅读全文…

使用CSS offset-path让元素沿着不规则路径运动

2017年03月5日,星期日

在web端,要让一个元素按照特定的路径运动,在之前,基本上只能借助于SVG SMIL animation来实现,但是,随着浏览器的发展,CSS代码也能实现这样的功能,本文就将介绍如何使用CSS中的offset-path属性让元素沿着不规则路径运动。有demo有截图还有gif演示,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

了解CSS属性font-kerning,font-smoothing,font-variant

2017年02月23日,星期四

本文很简单,了解几个可能平时用得不太多,长得不太熟的font相关的几个CSS属性,分别是:font-kerning, font-smoothingfont-variant

阅读全文…

“蝉原则”与CSS3随机多背景随机圆角等效果

2017年02月17日,星期五

在web设计或交互实现的时候,随机效果是非常常见的,比如说我们希望我们动画看上去运行的是更随机,则可以把动画分解为多个维度,例如水平移动,垂直移动以及旋转缩放等,然后不停的循环,然后很关键的一点就是每个维度动画循环的时间遵循“蝉原则”,这样最后实现动画效果就显得非常随机以及丰富等。

阅读全文…

基于CSS3 column多栏布局实现水平滑页翻页交互

2017年02月15日,星期三

column多栏布局和flex弹性布局基本上是同一时间段出现的,从兼容性来讲,column多栏布局一直以来更稳定更兼容,而flex弹性布局前前后后历经多个版本,直至现在有些移动设备支持依然不好,但是两者的命运却截然相反,column多栏布局鲜有人问津,而flex弹性布局则风生水起。面试的时候,就算面试者并未在实际项目中使用过flex弹性布局,也会时不时扯到这东西上来,好像不提flex布局就跟时代脱节一样,其实完全没有必要,每个CSS属性都有它的潜力和价值所在,挖掘其内在价值而不是单纯的被外在的那层表现困于庐山才是真正想要看到的。

而本文就是通过挖掘column多栏布局潜力实现了看上去很棘手的交互效果,这里特异分享给大家,希望能够对大家的学习有所帮助~

阅读全文…

小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组件的策略,则可能会有意想不到的裨益……

阅读全文…

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

2016年11月13日,星期日

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

阅读全文…