存档
搜网志编号：001 Vista玻璃效果 搜网志天字第一号带来的是Vista那炫目的Aero效果。自从换了新电脑转到Vista系统后，终于认清了不是Vista不好，而是用的机器不对。呵呵，大家如果不是机器很旧也来尝试一下Vista吧。回到我们的主角，GlassBox，一个基于Prototype和Scriptaculous(可选)的js类库。给我们带来非常逼真的玻璃效果，而且API也很丰富，不只是简单的网页特效。推荐一下。效果图如下：
本文概要：CSS 代码压缩优化工具，加快页面加载速度，节省网络带宽 前天给推荐了“CSS代码生成器”，今天继续第二波攻势，最近跳槽换新工作了，这两天处于无业状态，多更新几篇。下周起就不做张江民工了，改做八佰伴民工了。:-) 推荐两款CSS压缩优化工具： CSS Formatter and Optimiser (based on csstidy 1.1) http://www.cleancss.com/index.php Cascading Style Sheets Optimization http://www.cssoptimiser.com/
程序员都是懒人，这应该也是推动我们不断创造新东西的源动力吧。今天IT民工推荐大家一个非常不错的小工具，可以帮助我们生成页面的CSS模板。当然是不包含定义的模板。也不能太懒是不是，结合之前“创建性感CSS样式表的十个技巧”，应该可以事半功倍了。 http://lab.xms.pl/css-generator/ 没有越俎代庖替我们生成很多，恰到好处，是不是很酷啊。
原文出处：http://stylizedweb.com/2008/03/12/most-used-css-tricks/ 版权声明：本文版权归原作者所有 译介仅供国内读者参考 本文概要：最常用的CSS Trick，诸如圆角、首字下沉等等。 之前有篇译介“8个一句话CSS小诀窍”介绍了8个非常使用的一句话CSS小技巧，这周再给大家带来一篇类似的文章，介绍了一些最常用的CSS Trick，或者叫做CSS小把戏。当然我相信每个设计师都会有一些个人的偏好，我个人对文中的一些小把戏就不太感冒。 1. 不使用图片的圆角效果 <div id=”container”> <b class=”rtop”> <b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b> </b> <!–content goes here –> <b class=”rbottom”> <b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b> </b> </div> .rtop, .rbottom{display:block} .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden} .r1{margin: 0 5px} .r2{margin: 0 3px} [...]
原文链接：http://www.thinkvitamin.com/features/design/creating-sexy-stylesheets 版权声明：本文版权归原作者所有 译介仅供国内读者参考 如果你想成为一位CSS专家的话，光背出一堆选择器是不够的，还要能够提高CSS样式表的可读性，开发效率以及维护性。这里，Jina Bolton 将给我们分享一下她关于如何创建性感的CSS样式表的十个技巧。 本文主要内容为：CSS代码编码规范，教你如何写出整洁漂亮性感的css代码，如何清晰的组织你的样式表文件。闲言少叙，直接进入正题，完整文字请查看原文。doubanclaimff3e7764f748141c 1. 不要在HTML文件中使用CSS样式定义 相信对于多数有一定工作经验的设计师来说，使用外部样式表来定义CSS样式是小菜一碟的工作。但我在这里仍然需要再次告诉你这点，因为我看到相当多的站点在最开始的时候，有着非常结构清晰，组织良好的代码。但是随着时间的推移，慢慢地内部定义乃至内联样式开始蔓延到站点的各个角落。也许是因为项目周期十分紧迫，抑或只是因为我们有点偷懒。 想象一下，当这样的坏习惯被我们保持了下来，一段时间后，如果老板希望在不改动网页内容的前提下重新设计网站的样式的话，OH，你将不得不去查找这些自己丢在各个角落的垃圾代码，如果项目碰巧规模又非常之大，那我恐怕只有祝你好运，或者推荐你去找黄健翔了。 千万别给自己找这样的麻烦，创建干净的代码，并始终让他们保持干净，这样你会让生活变得充满快乐。 注意：请小心使用过多的外部样式表，如果每次更改你都创建一个新的样式表，这不会给你带来任何好处。过多的样式表会让你将来的调试和更新工作变得更加复杂，当然我理解你希望将样式分组管理的初衷，后面的内容中我会专门和你一起讨论这个问题。 友情提醒：过多的样式表应用，会带来潜在的性能问题，并且在IE6下，最多只能引入32个外部样式表。 2. “语义学Semantics”不是猜字谜游戏 我要告诉你们，“语义学Semantics”将是你们最好的朋友。在你选择最合适，语义最正确的元素来描述文档内容之外，也请选择语义清晰，合适的词语来定义你的class名称以及元素ID名称。不仅仅是做正确的事，这样做还能让你和你的团队成员的工作变得更加简单。让我们来看一条样式定义： .l13k { color: #369; } 我相信你乍看到这条定义，你能否知道它是用来干嘛的吗？我想你肯定答不上来。这个名称应该是某个只有作者本人知道的缩写，即使作者现在知道含义，但一个月后，一年以后你还能知道它的含义吗？让我们再来看一条定义： .left-blue { color: #369; } 这条定义，你可能立刻猜到它是用来干什么的了，页面左边区域，文字颜色为蓝色，表述的非常清楚明确。但是让我们来假设一下，不久的将来，老板希望重新设计样式，这个区域的内容位置将换到右边，文字颜色将换成红色。很显然，这个名称将变得不再合适，甚至变得不正确，现在你有两个选择，一是替换掉每个使用该class的地方，二是继续使用这个让人产生误解的名称。 这样看来，名称不是描述清晰就是好的，我建议你们最好是不要采用诸如颜色或者是高度宽度尺寸等非常具体的细节来命名样式定义，同样的也尽量避免使用具有具体形象的词汇来命名（比如使用 box），这样的做法某种程度上破坏了我们希望将内容和样式分离的初衷。怎样做才是最好的呢，让我们来看一下这个： .product-description { color: #369; } 这个定义命名，无论你重构多少次，它都是非常合适的，美丽的东西永远是美丽的。
原文出处：http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/ 版权声明：本文版权归原作者所有 译介仅供国内读者参考 BANG421388A95514C2DCE6B44914XIANGUO 对于一个网站来说，导航栏菜单应该是最为重要的一个元素。由于网页没有什么可供用户作为定位的东西，所以全站一致的导航栏就成了少数可以给用户带来方向，引导他们浏览整个网站的元素之一。用户很依赖它，所以设计师绝对不能在这个地方马虎了事。 还是那句老话，最好的往往是最简单的，当然简单的东西绝对不代表就是乏味的。去年，我们就曾经就导航栏写过一篇文章 modern approaches of navigation design 。现在让我们看看这方面的设计的最新趋势吧。 下面就让我们来看看，最新的导航栏设计趋势，实例和一些非常炫的设计。 1.会“说话”的导航栏 （Speaking navigation） 对于导航栏来说，最重要的任务莫过于非常清楚的引领用户访问站点的每个模块。但是通常来说，很难用1-2个关键字来准确描述这个模块的具体内容和功能，特别是在水平导航栏布局下。这就是为什么通常导航栏不会简单地将关键字一个个排列起来来展示所拥有的选项（“沉默”导航栏 silent navigation），设计师多数会选择使用比较具体的描述来表达该选项的内容或者功能。 过去的几个月里，我们发现这种趋势越来越流行。 为了让信息变得更加容易接受，通常使用相同高度宽度的块状显示，大图标的使用也越来越普遍，当然评判导航栏好坏最主要的还是网页的整体布局和设计。鼠标悬停效果的设计使用，能让你的网页变得更加亲切。
