CSS3

闲谈CSS单位rem

前段时候有个朋友问我rem需要注意些什么,我回她说这个参考网上一搜一大把。因为如果我没有记错2011年左右这个rem的单位就已经被各大技术博客讨论的铺天盖地。而现在已经快2016年了,不得不感慨时间的流逝。曾经的IE6已经消亡,虽然过程缓慢,但相信IE8最终也会和IE6一样成为历史。到了那个时候,rem就可以真正走上历史舞台了。如是,我觉得自己还是有必要拿rem出来写一写,一来证明一下我这个博客只是诈尸,二来对当前可能没人讨论到的方面做一个补充。不过自己年纪大了,不太适合长篇大论,小标题就不拟了,主要是简短闲谈。 rem是一个好东西。如果没有兼容IE8的顾虑,rem可以说是一个非常理想的单位。rem和em一样是相对单位,只是有别于em相对于父元素,rem相对于根元素html,即root em。这样的设定使得rem天生具备扁平级联的特性。早期IE不支持px单位的缩放,这是人们使用em单位的一个主要原因,但em单位存在过深的级联性,…

Chrome的onload动画bug

一开始的起的标题是《Chrome中CSS3 transition和form导致的意外的onload动画》,不过太长了,所以最后删减了一下。但至少我遇到这个chrome的bug的时候,确实是transition和form同时出现时。 这个bug的具体的表现是:chrome会在页面加载后自动开始一段动画。 我使用的是chrome 36.0.1985.125 m,算是当前的最新版。页面中的全局样式添加了<a>的transition,而且还是非常偷懒的使用了all这样的参数,所以最后整个页面在加载完成后,所有的<a>都开始了过度效果,从尺寸到颜色,结果就导致了的整个页面的抖动。…

那些CSS的细节问题(4) —— 圆角边框和outline

能写文章,说明时间略有空余,这应该算好事吧~看了下草稿箱,果断还是选这篇先写完,因为和前面的几篇有关联。在之前的 圆角响应区 以及 圆角边框和overflow 中,已经讨论过圆角边框的一些问题,本篇如题,是关于圆角边框和 outline 的,这里也正好回答了一丝在圆角响应区里提出的“为什么不在做DEMO的时候用 outline 描画边缘?”的问题。在写那篇之前做DEMO的时候,我是用了 outline 的,但注意到 outline 的一些问题之后,又把它从DEMO里移除了,并起草了这篇文章的标题,…

那些CSS的细节问题(3) —— 圆角边框和overflow

本篇是上篇《那些CSS的细节问题(2) —— 圆角响应区》的一个简短的延续,因为在上篇的篇幅里实在已经容不下更多混乱的部分。 尽管现在圆角边框的教材已经烂了大街到处都是,并且这个属性已经是诸多CSS3属性里应用最为广泛的特性之一,但却丝毫无法掩盖这个属性一路走来的坎坷。时至今日,现代浏览器对圆角边框的解释仍然存在诸多问题,比如上篇那些CSS的细节问题(2) —— 圆角响应区 讲到的对“响应区”影响的问题,实则也只是这个属性一路而来的问题之一而已。因为,单看一个属性确实很明了——无论是定义还是实际实现起来,然而,一旦这个属性和其他属性作用在一起,事情就没这么简单了。 下文中的内容,皆以如下版本的浏览器为基准:Chrome-24,IE-9,Firefox-18,Opera-12.…

那些CSS的细节问题(2) —— 圆角响应区

之前《那些CSS/JavaScript的细节问题》我都是凑足3个再开始写,现在发觉,很多时候要凑出3个古里古怪的问题还真不是件易事~ 有的时候想到要写一个问题,想等凑多些再写,但又总是一直拖着,好端端的讨论话题都过期了。更糟糕的是,往往好不容易凑足了数量,结果之前要写的东西居然又模糊不清了...以后,在一定时间里凑不出数量的话,也只好先写起来再说:) 所以今天,就只有一个问题,关于边框圆角:圆角边框是否影响元素的响应区域? 想象一下,一个 div 通常被我们认知为一个盒子(box),现在在它的周围有一个圆角边框,那么在这个矩形盒子的四个角上,必然会出现一些空隙(特别是当这个圆角矩形变成一个圆时候)。那么对于这个元素而言,…

再谈box-shadow

早先,我详细地写过2篇关于 box-shadow 的文章: CSS3 box-shadow 详解(1) 以及 CSS3 box-shadow 详解(2)。但用现在的眼光来看,内容已经有些旧了。趁着这片闲言碎语,对 box-shadow 再做一些补充。 box-shadow 是我最喜欢的CSS3特性之一,它能创建凸显层次的阴影,但却还可以充当很多角色:边框/层叠/渐变/勾线,等等。当前浏览器的支持程度已经非常理想,除了IE8及以下,…

CSS实现字体内阴影

上篇 像Photoshop一样地使用CSS 讲到PS和CSS的关系日趋紧密。但是我遗漏了一些,那就是字体的阴影效果的实现。对于投影,text-shadow 能很好的满足,但是如果是字体的内阴影或内发光,又该如何?熟悉CSS3 text-shadow 的朋友都知道,text-shadow 并没有类似 box-shadow 的 inset 值来表示内外阴影,所以虽然 text-shadow 虽然也支持多阴影,但在内阴影方面却无能为力。 但真的是这样吗?先看看下面的字体效果(IE10+,以及其他所有浏览器,如果你是通过RSS,请到我的博客查看效果)—— SwordAir.…

像Photoshop一样地使用CSS

无论是作为前端,还是作为设计师,应该对下面这个界面颇为熟悉。 Photoshop的图层样式,恐怕是网页设计里最常接触的操作界面之一,因为传统Web设计很大程度上就是图层的样式层叠。很多年前,我还是一个蹩脚的设计师的时候,就常常看那些设计教程里大段大段的关于图层样式调整的描述,所以直到现在即使自己成了前端,但那些样式的调整都历历在目。而现在,如果用一个前端的眼光来看待Photoshop的图层样式,是可以把层的概念和样式直接映射到代码里的。 CSS究其本质,无非是一种描述性语句,与我们操作GUI的界面而言其实没有什么太多不同:选项和参数组成了完整描述使得浏览器能准确地反映出来。随着CSS3的普及,大部分的图层样式就能直接对应于CSS代码,而不需要我们再去切图。 如你所想,投影、内阴影、外发光、内发光,乃至斜面浮雕和光泽,都部分或全部的由 box-shadow 模拟出来。…

边角阴影渐变

最近看一些网站的时候经常看到边角阴影,所以单独拿出来说说。 比如 Nettuts+ 的设计,主内容区的右上角有非常浅的渐变,并有1px的白色勾线。这些细节设计虽然非常淡,甚至很多人根本不会去注意到这些,但它们累加起来的效果非常出色——不论我们有否发觉,重要的是我们确实受到了这些细节的视觉上的影响。 虽然 Nettuts+ 用了一张png的边角渐变的图片,但显然代码也能实现。线性渐变作为CSS3的标配,虽然使用上需要加上麻烦的前缀,但放眼望去用上代码渐变的页面也已经相当普遍。使用上需要注意的是 Chrome 9- 以及 Safari 4- 使用的都是非标的 webkit-gradient 语法: corner-gradient:before{…

响应式Web设计

响应式Web设计(Responsive Web Design – RWD)一般是指那些使用CSS3 Media Query特性制作站点,其可以适应不同视窗尺寸的布局。 虽然很早就已经有了类似RWD的概念,但直到最近一年里才开始变得特别流行,各种文章、例子、工具、模板,不断地从无到有,诸如: 响应式Web设计50个例子和最佳实践 21个响应式Web设计工具 响应式Web设计的模板和框架 这些资源,仿佛都是一下子冒出来似的…这要归功于IE9的发布,从而使得主流浏览器上升到全部支持Media Query的程度。 然而眼花缭乱的资料堆里,可供细细品读的资料其实也就那么几篇:ETHAN MARCOTTE 的…