用CSS transitions实现动画式下拉菜单

2012 3 22 02:02 PM 0 条评论 5798 次查看

分类：CSS 标签：CSS

在CSS3中主要有3种实现动画的方式：transform、transition和animation。其中，transform是改变形状，例如伸缩和翻转等（本站上方的那几个图标就用了这个属性来翻转）；transition是实现渐变效果，将原本只能瞬间完成的变换，在一个指定的时间段里慢慢展现出来（那几个图标翻转的渐变过程就是用这个属性来设置的）；而animation则是最为强大的动画功能，通过定义关键帧和时间，浏览器可以自动完成关键帧之间的演变（本站曾用过的koi皮肤中，那个不停翻滚的feed图标就是用这个属性来实现的）。

昨天在V2EX看到有人用CSS3特效做页面菜单，其实主要就是用transition这个属性。于是想着本站右上角那个“热门文章”的菜单是否也能弄成动画效果呢，便也尝试了一番，做出了目前这种效果。
不过拿它来讲解也蛮复杂的，于是还是从入门的开始，先做个不依赖JavaScript的没有动画效果的下拉菜单。

本博客换新主题啦～

2011 9 17 10:19 PM 57 条评论 2618 次查看

分类：网站建设 标签：HTML, CSS

最初做这个博客时，就想找款涂鸦风格的主题，结果最后连名字都叫Doodle了…
虽说很喜欢koi这个主题，但我毕竟经常需要贴代码，而原主题太窄，导致阅读比较困难，于是萌生了制作一款适合宽屏的主题的想法。
耗时一天多，这款新主题终于面世了；然后又花了一天，变成了现在这样。名字没想好，暂时叫null吧。虽说还有些细节需要调整，不过我已经迫不及待地放上来测试了。
借鉴了不少东西，做的过程中获得了不少感悟，于是记录下设计时的过程吧。

为视网膜显示屏优化网页上的图片

2011 7 16 03:16 PM 0 条评论 4038 次查看

分类：Web 标签：HTML, JavaScript, iPhone, CSS

说起iPhone 4带来的革新，retina display绝对是最吸引眼球的一项，以至于我现在看电脑的显示屏时，都能看到满屏幕的像素点了⋯

正是依赖这视网膜显示屏，iPhone 4的分辨率达到了640×960 pixels；不过为了保持向下兼容性，它采用的仍然是320×480 points。
也就是说，在不进行缩放的情况下，显示普通图片时，它会用4个像素来显示图片中的1个像素；而在显示retina图片时，每个像素都对应图片中的1个像素。
如此一来，老的应用无需修改就可以在iPhone 4上运行了——虽然显示效果差了点，但是不会出现只有左上角那1/4的区域有内容的情况。

在用iOS SDK开发iOS应用时，只要将图片名加上“@2x”后缀，就能让支持retina display的设备自动显示这个解析度更高的图片。
但Safari等使用UIWebView的应用在展示图片时，却无法利用这个特性，因为这样可能会造成大量没必要的HTTP请求。
既然不能自动实现，那就只能手动来弄了。原理很简单，准备2种图片，当检测到支持retina display时，就显示大图，然后把图像的长宽各缩小一半即可。

解决Opera和Safari下难看的中文显示问题

2010 12 2 09:25 PM 0 条评论 4546 次查看

分类：Web 标签：CSS

昨天闲得无聊测试了下各种字体的显示效果，今天看到一篇《Mac 和 Windows 的中文字体显示效果》，才想起这玩意还和操作系统有关。

其实玩Mac和iPhone时都觉得中文很好看的，同样的字体弄到Windows下就大打折扣了。Android的字体也是这样，所以问题肯定还是Windows惹的。
而且关键是我用的还是英文版的Windows，缺省的中文字体虽然是宋体，但有的浏览器很傻（例如Opera），会把简体中文当成日文和繁体中文，而用新细明体（PMingLiu）来显示。
更扯淡的是直接设置font-family为"新细明体"或PMingLiu都正常，显示效果和宋体一样。但是当浏览器匹配失败，而使用缺省的"新细明体"时，它的表现却类似于“新細明體”；于是这些文字看上去就像异体（或繁体），而简体字独有的汉字则显示成其他字体，结果导致文字参差不齐，看上去非常糟糕。
最扯淡的是Opera这种糟糕的浏览器还不遵循font-family的规则，匹配字体时，如果英文字体写在前面且在系统里找到该字体，就会无视后面的字体，于是显示中文时就会用缺省的新细明体了。

CSS浮动布局与inline-block

2010 11 13 04:36 PM 0 条评论 5130 次查看

分类：C++ 标签：CSS

今天凌晨改博客主题时，突发奇想去搜索了一下清除浮动，然后发现了3篇很好的文章（CSS float浮动的深入研究、详解及拓展(一)、CSS float浮动的深入研究、详解及拓展(二)和拜拜了,浮动布局-基于display:inline-block的列表布局），结果不小心就读到6点了，不过收获不少。

有些见解和其作者张鑫旭不同，因此这里我总结并阐述一下自己的看法。为了避免太复杂，我不会对不符合标准的IE浏览器进行hack处理。

在Chrome上使用小于12px的字号

2010 11 4 08:13 PM 0 条评论 1913 次查看

分类：CSS 标签：CSS, Google Chrome

很早以前Chrome就强制把小于12px的字显示为12px了，这导致要做一些特殊效果时很不给力，前些天在别人的CSS reset里看到了这一行，就是用于解决这个问题的：
-webkit-text-size-adjust:none;

采用HTML 5别忘了CSS Reset

2010 10 14 12:36 PM 0 条评论 1806 次查看

分类：CSS 标签：CSS, HTML

今天在测试博客的主题时，发现Chrome下显示得好好的，但是Firefox 3.5下却一团糟，让我非常无语。当初采用HTML 5，本来就不想支持IE的，没想到连Firefox都败下阵来，这也太囧了吧。

检查了下CSS后，发现那些新的HTML元素居然都是display: inline的，于是加了这行代码，问题解决：
header, footer, nav, section, article {display:block;}

顺便测试了一下Opera 10.5，发现也存在这个问题，看来要采用HTML 5，别忘了使用HTML 5的CSS Reset。

« 看看还有什么好玩意