带锯齿PNG图片的优化

发表于 2012 年 11 月 8 日由 vivi

记录一下，图片处理的一个小方法。
这个是sprite背景图，我把背景设为黑色以便于演示，其实际是透明的背景。
优化前，图片比较多的锯齿。根据毫毫的建议，解决方法如下。继续阅读 →

border-radius不仅仅是圆角

发表于 2012 年 10 月 29 日由 vivi

border-radius，国内翻译成圆角，你可能以为这个属性就是用来画圆角，没错，但是除此之外，它还可以做点别的事情。radius其实指的是边框所在圆的半径，这个CSS3属性不仅能够创建圆角，还可以创建椭圆角（如图下图第7），把这些角按照不同的顺序和大小来展现，能够绘制成多种多样的图形。继续阅读 →

爱上朴实的CSS细节

发表于 2012 年 8 月 20 日由 vivi

未来的CSS太让人兴奋了：一方面，是全新的页面布局方式；另一方面，是酷炫的滤镜、颜色等视觉效果。这些CSS，受开发者追捧，被杂志和博客文章铺天盖地地介绍。

如果说这些特性是CSS华丽的一面，那我们来看看它朴实的一面：很不起眼的东西，如选择器、单位、函数（方法）。我经常说这是繁琐的东西，但我意思是它们能干漂亮的活，这就是我要分享的。
继续阅读 →

图片的自适应居中及兼容性处理

发表于 2012 年 5 月 30 日由 vivi

前几天在做腾讯微博的微卖场的时候，遇到需要做图片居中的需求。也就是说，商品列表中的图片需要居中显示。因为图片是卖家自己把商品图片链接过来，商品图片的大小没有做限制和过滤。所以我们需要做的是，让图片在容器当中水平居中、垂直居中、图片自适应容器大小。继续阅读 →

响应式设计的5个CSS实用技巧

发表于 2012 年 5 月 24 日由 vivi

正如我在教程响应式Web设计三步走当中所讲的，响应式的Web设计其实并不难，但是要让元素在布局切换时能够平滑过渡就比较考验技巧了。现在我分享在编码时常用的五个CSS技巧并举例说明。这些技巧都是使用简单的CSS属性，如min-width、max-width、overflow 和相对属性值，但是这些属性在响应式设计中发挥着很大的作用。

继续阅读 →