“CSS相关”目录存档

小tips: IE7,IE8浏览器纯CSS实现正圆角效果

2016年07月6日,星期三

CSS3 border-radius可以轻易实现圆还有圆角效果,然而,需要IE9+浏览器才行。移动端自然不成问题,但是众多(尤其面向C侧)PC页面是至少需要兼容IE8的,那有没有什么办法可以让IE7, IE8也支持圆角呢?

很久很久以前介绍过一个名为PIE的东西可以实现IE7,IE8的圆角。然后,本文再介绍一个使用纯CSS实现IE7,IE8浏览器正圆角的例子……

阅读全文…

CSS3 appearance大全鉴赏以及是否影响box-sizing

2016年07月6日,星期三

CSS3 appearance可以重置和改变元素的外观,有时候还是挺有用的,目前的兼容性也令人满意,大家不妨可以简单了解下……

阅读全文…

PNG格式小图标的CSS任意颜色赋色技术

2016年06月8日,星期三

CSS可以修改图片的颜色,没错,可以,本文就带你一睹真相,再次领略CSS的潜力和造诣。

阅读全文…

理解CSS3 max/min-content及fit-content等width值

2016年05月20日,星期五

在CSS3的世界里,width属性又多了几个关键字成员,fill-available, max-content, min-content, 以及fit-content。

本文就将分析与介绍这几个关键字,顺便帮忙理一下CSS世界中的尺寸概念,相信本文的内容不仅对于CSS3的学习,包括对CSS2.1整个尺寸的认知都会有一定的帮助。

阅读全文…

CSS3 filter:drop-shadow滤镜与box-shadow区别应用

2016年05月18日,星期三

要使用标准的CSS3实现某元素的投影效果,有两个套路,第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow,那这两个阴影实现有什么具体的差异呢?

本文就将探讨此问题,其实主要目的还是介绍下相当了不得的drop-shadow滤镜。

阅读全文…

改变CSS世界纵横规则的writing-mode属性

2016年04月27日,星期三


writing-mode这个CSS属性,我们是不是很少见到,很少用到!我们往往称不常见的东西为“生僻”,就像是不常见的文字我们叫“生僻字”,因此不常见的CSS属性,我们可以叫做“生僻属性”,writing-mode给我们的感觉就是一个“生僻属性”,很弱,可有可无。

但是,实际上,我们都错了,大错特错,writing-mode很弱?卧槽,别开玩笑了,writing-mode可以说是CSS世界里面最逆天的CSS属性了,直接颠覆CSS世界的众多规则……

本月为4月压轴作品,大量demo,大量脑洞大开的创意处理,希望可以对您的学习有所帮助。

阅读全文…

简单了解CSS3的all属性

2016年03月24日,星期四

all属性实际上是所有CSS属性的缩写,表示,所有的CSS属性都怎样怎样,但是,不包括unicode-bidi和direction这两个CSS属性。

为什么会有这个CSS属性呢?

我们可能知道,有些CSS属性值基本上所有CSS属性都有,比方说继承inherit!

我们CSS reset输入框的时候,是不是有类似这样的代码…

阅读全文…

以20像素为基准的CSS网页布局实践分享

2016年03月22日,星期二

以20像素为基准进行CSS网页布局,说不定会让一些细节和潜能大放光彩,当然这需要体系的配合,还需要一些完整的解决方案在里面,本文就将分享这一实践心得,保证是其他地方都没有的。外甥点灯笼——照旧(舅),有demo有截图有必要的源代码展示,希望本文的内容能够对您的学习有所帮助!

阅读全文…

CSS direction属性简介与实际应用

2016年03月20日,星期日

至少,在我接触的这么多项目里,没有见到使用过CSS direction属性做实际开发的。

为什么呢?是因为direction长得丑吗?

虽然说direction确实其貌不扬,但是CSS并不是一个看脸卖萌的世界。

那是因为兼容性吗?

那更不是了,在那个“美女”确实是美女的年代,包括IE6在内的浏览器,CSS direction就已经被支持……

阅读全文…

腾讯微云黑色遮罩引导蒙版更好的CSS实现方式

2016年03月7日,星期一

网站有一些改动的时候,为了让用户熟知新的操作位置,往往会增加一个引导,常见的方式就是使用一个黑色的半透明蒙版,然后需要关注的区域是镂空的。

然后上周五我去微云转悠的时候,也看到了引导层,于是职业病又犯了,去学习下别人是怎么实现的。下面是观测的结果:

为了实现镂空蒙层效果,作者发挥了小时候拼积木的才能,使用两层HTML结构,内层使用5块独立区域拼接形成,至于中间镂空的区域的阴影则是使用的图片实现的。

我们实际上只需要一层标签,一层空标签就可以实现我们的效果,且不需要图片……

阅读全文…