menu

纯CSS圆角Tab

Tab能算的上是网页里最为常见的组件,不论是作为内容切换,还是直接作为导航,形形色色的Tab扮演着各种交互角色。既然是重要的交互角色,那么无论其颜色还是形状都关乎整个交互过程——圆角是有意义的,在视觉上把Tab和其他分隔元素区别开来是必要的,就如同圆角按钮一样——可能很多时候圆角按钮都与整个设计风格格格不入,但却是必须的,因为交互元素的凸显比整个设计浑然一体更为重要。

在IE67日渐边缘的如今,2012可能是前端重心转移最为明显的一年。于此也就不去考虑过时浏览器的兼容性了,对于它们,能看看内容就已经不错了,管它美不美观错不错位,时代在进步,往前看才不至于失业……

今天琢磨了会写了下面这样一个CSS圆角Tab,和网上流行的圆角Tab不同之处在于:Tab底部也使用圆角过渡

Pure CSS Rounded Tab Navigation
Read more... »

再谈清除浮动

清除浮动对于任何CSSer来说都是基本中的基本,但我不喜欢称其为基础,因为最近我浏览网页看到各种充斥的清除浮动的方法后,才彻底明白,虽然各种方法被大量的使用,却甚为混乱。最糟糕的是很多有问题的流传版本的搜索排名都非常靠前,用神大人的话说就是:“错误的知识是毫无意义的”。

然而坊间流传的很多方法并非错误,而是有偏差——往往使用中不会出现问题,但是严格地说,它们是不准确的,难道我们搞技术的不应该严谨一点么?于是,怀着一种无可奈何的心情,试图用我所知道的“也有可能是不正确的”知识,来“再解”清除浮动。虽然不知道能有多少人看到这篇文章,但有时我还是想喊出声来——“那样做并不妥”。

Read more... »

再谈inline-block

我们对 inline-block 并不陌生,在工作中经常会碰到类似的应用,比如 list 的居中,比如各种 gallery 的列表展示,细小到可能只是一个段落里的一个元素,大到也许是整个的布局,都可以见到。

引用怿飞的 display:inline-block的深入理解,对于其中已经提到的这里不再冗叙。这篇文章里,我试图谈论的是网络上对于 inline-block 的一些误解,以及个人对于 inline-block 理解上的一些补充。

Read more... »

开发过程中的调试样式

甚少有人论起这种主题,因为使用的人真的不多。这些开发过程中的用于调试的CSS虽然可能很管用而且很高效,但毕竟不是必须的——实际上,即使是我自己都未曾在自己的开发过程中使用过。但我并不是不信这些调试CSS的作用,它们能很快的通过视觉层面指出问题,但显然它更加适合标准流程化的开发进度而不是像现在的大多数开发那样的随意。

Read more... »

新的wordpress主题

自从尝试做了swordis主题之后,对wordpress的主题也有所认识。于是决定做一个自己的主题。并且这次和上次不同,是很认真地要做完的。名字还没有想好,但是目标很明确:

  • 没有图片的纯CSS主题。意味着线条和空间是首要设计元素。
  • 必须过XHTML1.1以及CSS3验证。CSS3阴影和变换等,由于有前缀,所以即使使用也会暂时注释掉。
  • 通过主题单元测试( Theme Unit Test )。这是一组严酷的内容兼容性检测。
  • 流体布局。右边栏,因为我调查下来,比起侧边栏在左面,似乎更多人习惯在右面。
  • 弹性em值。
  • 兼容所有主流浏览器,包括IE6在内。
  • 以及良好的可访问性和自适应性。

这些天从睁开眼睛开始我就在思考怎么把这个新的主题写好。主要考虑的是线条和颜色的虚实,实际上和篆刻类似,如何把自己其他方面的知识应用进去,就是这次的主要问题。

最大的挑战应该还是来自IE6的,因为这次不能写违规的hack,也不能用IE的私有属性。其实早该如此,IE6虽然仍旧苟延残喘,但是终究会被历史的洪流冲走的,我坚信这IE8成为下一个IE6的时代的来临。

前端工作类似一道工艺,相同的设计,工艺不同,价值也会天差地远

上次试作的主题,设计用了半天,HTML化也是半天,总共才一天时间,加上才第一次做主题,自然漏洞百出。虽然大的问题暂时也没有,但是代码级别差距很大。这次截然不同,纯CSS,没有设计直接写,但是style.css我已经写了2天有余,到现在也仅仅只是有一个框架。期间数易其稿,多次改动整个布局。

现在就是主题单元测试的内容,相当周到。有多层次的页面,有混合布局、超长、超短、甚至是无标题或者无内容的文章,也有超多分类、标签的极限测试,还有何种视频嵌入,总之是应有尽有。

Read more... »

CSS3 Media Queries 详解

说起CSS3的新特性,就不得不提到 Media Queries 。最近 Max Design 更新的一个泛读列表里,赫然就有关于 Media Queries 的文章。同时位列其中的也有前天我刚刚翻译的 IE9, Opacity 和 Alpha

虽然标题相同,但本文并不是列表上 CSS3 Media Queries 的译文,因为原版有Demo有例子有图片,全文不长而且不难看懂,所以我也就不翻译了。基于自己已经了解到一定程度,所以就打算自己写。

CSS2中有已经定义了 Media 的部分,包括类型、组别和规则等。CSS并非为了显示器而创造,而是应用于各种各样的媒体,比如常见的显示器,越来愈多的手持设备,可能略显过时的电视机等等。

而 Media Queries 的引入,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备。

引用CSS3 Media Queries里的直观的 DEMO,当浏览器宽度改变时,应用的CSS发生变化。而这一切,原本需要 JavaScript 的控制才能做到。

Web移动化的趋势越加明显,各种手持设备的发展现在完全引领着整个互联网的发展。虽然国内受到很多制约,但是这种浪潮却无法阻挡。前段时间jQuery宣布mobile计划,也加速了这种变化。Media Queries 不久的将来应该就会被广泛使用,以更好的支持新兴设备比如iPad。事实上, jQuery 甚至有 Media Queries的插件

下面来看看 Media Queries 做了什么。

Read more... »

IE9,Opacity 和 Alpha

译自同名IEBlog:IE9, Opacity, and Alpha,关于IE9和透明度兼容CSS和JS代码。日期是昨晚(8/17)6:15。

以下为我的译文:

IE9引入了 CSS3 Color Module 的支持,包括其中已普遍使用的透明度( opacity )属性。如同我们已经完成的其他基于标准的特性,为了在其他浏览其中的相同的标记能工作在IE9的标准模式下,IE9实现了透明度。

IE8以及其之前的版本实现了另一种替代的机制,使用IE特定的滤镜( filter )属性中的 alpha filter 来应用透明度。这就形成了一个兼容性的挑战,因为IE9标准模式只支持 opacity,而不支持 alpha filter ( IE9的兼容即怪异模式,7和8仍然支持 alpha filter 但不支持实现opacity )。

对于使用最佳实践特性检测法的站点,兼容性不是问题。它们会检测 opacity 在IE9中是否被支持并使用 opacity 替代滤镜。问题在于那些使用了浏览器检测的站点以及那些错误的假设了IE总是使用透明度滤镜而不是opacity并在脚本中只使用滤镜的站点。那些站点里的web页面,在IE9默认的9的文档模式下,透明度效果会失效。解决方法是先检测基于标准的 opacity 特性,然后是浏览器特定滤镜,就如同我们之前文章里描述的那样

Read more... »

WordPress主题swordis

终于下决心挤个时间出来做个wordpress主题。但是即使做出来估计自己也不会用的囧,因为我是bito主题的铁杆fans!

用了半天时间出了个PSD设计稿,又用了半天时间HTML化。还好设计的时候就着眼于简单,所以虽然搞了一天有些头晕,但还算比较快。基于wp的default,总的来说除了comment以外的CSS都重写了。

当然,因为刚刚写好的关系,背景图还么有整合,CSS也没有优化,并且还有众多的bug。不过没关系,作为自己第一个wp主题,慢慢琢磨就行了~

已知的问题有:

  • 虽然一开始写完测试环境是通过HTML5验证的,不过自己博客上的文章一加上就超多error。
  • 只用IE6和chrome开发的,所以其他浏览器情况完全未知,尽管我都尽可能的按标准来。
  • 颜色问题还值得推敲,排版也有很多要微调下。
  • 还有好几个小图标在绘制中,所以标签、分类、评论前面现在都还是空的。
  • 功能还不全,比如搜索、RSS,还没来得及赶上去。

现在先拿出来用几天,过些时候总结出一堆问题后就可以着手改进。目标版本0.5,基本实现功能完整~

CSS定位机制之一:普通流

文档流,其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow ,但标准里只有另一个词,叫做普通流( normal flow ),或者称为常规流。但似乎大家更习惯文档流的称呼,因为很多中文翻译的书就是这么来的。比如《CSS Mastery》,英文原书中至始至终都只有普通流 normal flow 这一词,从来没出现过文档流 document flow 。但是中文译本“普通流”和“文档流”却是交替出现的。

那么什么是普通流?

Read more... »

漫谈font-size

起因仅仅是下面的这句话:

font-size: 75%; /* Resets 1em to 11px */

这是我最喜欢的wordpress主题 Bito 的第一句CSS。我想那可能是作者的笔误。因为印象里还是记得默认值是16px,那么75%就是12px了。不常写CSS,但是喜欢挖点东西出来。一开也没想到一个属性值可以挖出这么多,最后导致这篇东西组织起来都有些麻烦: )

Read more... »
Page 1 of 212