设计观点View
12

那些年我们一起清除过的浮动

浮动(float),一个我们即爱又恨的属性。爱,因为通过浮动,我们能很方便地布局; 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器)。也许很多人都有这样的疑问,浮动从何而来?我们为何要清除浮动?清除浮动的原理是什么?本文将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手。

作者头像

[置顶]inline-block 前世今生

【一丝冰凉】/2012-08-10/层叠之美

inline-block 前世今生

曾几何时,display:inline-block 已经深入「大街小巷」,我们随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了,上面的代码是为了兼容 IE6、7而已。那么你真的了解 inline-block 了吗?
我们来看几个问题:
IE6、7 真的不支持 display:inline-block 吗?
display:inline-block 后的元素为什么会产生水平空隙,这真的是 bug 吗?
如何更好的解决 display:inline-block 元素间产生的水平空隙?

作者头像

inline-block 未来

【一丝冰凉】/2013-06-17/层叠之美

inline-block 未来

当《inline-block 前世今生》写完之后,很多朋友戏说为啥没有未来呢?现在,未来真的来了。且听我娓娓道来。虽然前文中连 inline-block 他爸都写出来了,但无论是 YUI 的解决方案,还是我给出的解决方案都是一坨一坨的,如何做到更好呢?

未知高度多行文本垂直居中

近日,微博上有朋友比较纠结未知高度的文本垂直居中问题。这个和「未知高度图片垂直居中」有些类似,但是有一些细节需要注意。

这里有之前写的一个未知宽高对话框的垂直居中(拖动改变大小看是不是依然居中?),只不过对话框是相对于 viewport(视口)居中的,这里的文字需要的是相对于容器垂直居中。

响应式十日谈第一日:使用 rem 设置文字大小

上集回顾:在序言中我们已经提到了响应式的一些基本理念,比如:响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流,让所有人无障碍的获取信息,同时这也是 Web 的初衷。序言中同样提到,响应式的设计应该秉承「内容优先,移动优先」的设计原则,那么我们知道网页中的内容主要是由文字图片等元素组成的,那么文字该如何响应式呢?当我们每天面对缤纷的互联网世界的时候,文字不仅仅传递给我们众多的信息资讯,而且在设计师的手里,文字在网页中的排版承载着一种艺术的直觉。网页中常用的文字大小单位是 px(Pixels),em,现在《CSS Values and Units Module Level 3》中新增了 rem 这个

作者头像

CSS3 Windows 8 Loading 动画

【一丝冰凉】/2013-01-16/层叠之美

CSS3 Windows 8 Loading 动画

看到 Windows 8 的 Loading 动画效果挺好的,用 CSS3 试了以下,交互细节可能还需要调整一下。Chrome 由于 transform: rotate() 开启了硬件加速,效果最流畅,FPS基本维持在 58-60之间。查看 DEMO这里有一 在线生成 Windows 8 loading 图片的网站

作者头像

贡献标准——第一季

【一丝冰凉】/2012-11-20/层叠之美

贡献标准——第一季

什么是 WEB 标准?为何要贡献标准?如何贡献标准?全篇将围绕着三个问题深入浅出的分析标准,结合实际的案例,你会有意想不到的收获。更多精彩内容在「下面」……

作者头像

Test the Web Forward 论剑归来

【一丝冰凉】/2012-11-09/层叠之美

Test the Web Forward 论剑归来

静静地,悄悄地,时光就这么在指尖流淌着。转眼从 TTWF 大会归来已半个月有余了,非常感谢 Opera 公司 kenny 的盛情邀请和全程帮助。从小生长在南方,帝都总予我以「遥」之感觉,短暂的三日让我对重新认识了北京。对于上海总有一种道不清的情愫,北京至于上海,一个古朴浓郁,一个时尚小资。北京的地铁显得有些「古老」,透出这座文化古城独有的忧郁气息。上海的地铁显得非常现代,人民广场站仿若偌大的地下宫殿;北京的马路方正拥挤,上海的马路整洁宽敞;北京的人热心好客,上海的人独立冷傲;北京的水容易有水垢,上海的水总带有一丝腥味;北京的姑娘之于上海的姑娘……

作者头像

Mac 网页字体优化小议

【一丝冰凉】/2012-11-02/层叠之美

Mac 网页字体优化小议

字体问题一直是前端和视觉设计师都会头疼的问题,加之各个平台(Windows,Mac,IOS等)或者用户代理(各种浏览器,Photoshop 等)使用字体渲染的技术皆有不同,在不用图片的前提下,想要达到同视觉设计产出的PSD效果一样的字体效果肯定是不可能的了。今天只说说 Mac OS X 下字体渲染的问题。Mac OS X 默认字体1.默认简体中文Mac OS X 10.6 之前:系统默认的简体中文为「华文黑体」,由「华文细黑(STXihei)」和「华文黑体(STHeiti)」这两个字重组成。前者是细体,后者是中黑。他们的 font family 都是「STHeiti」。Mac OS X 10.6 之后:系统默认的简体中文为「黑体-简(Heiti SC)」它是在华文黑体基础上经过重新开发出来的新字体。华文黑体(

Windows7 下 Safari 字体模糊 bug

最近在改版一淘专享的过程中再次发现 Windows 7 下的 Safari 5.1.7(以下简称 Safari)出现字体渲染模糊的问题,如下图:案情剖析上图中「他们抢到了红包」后面的文字是绝对定位+JS滚动效果的,开始以为是这两个因素导致的,于是去掉JS,字体依然变形,去掉「 position: absolute」后发现文字恢复正常。此问题只在 Windows 7 下的 safari 出现,XP 中测试没有这个问题。最后通过排除法删除页面上不相干的 html,找到了真凶:禁用该属性后一切和谐了。案情再现为了重现此 bug,写一个单例来测试:查看 Demo通过此例我们发现 「-webkit-transform: translate3d(0,0,0)」是一切祸害的根源,这段代码本来是为了解决 Chrome 某些低版本旋转动画造成页面闪动

12