" css"存档

BlueTripCss

2008/11/17 Posted in 互联网产品设计 ,

BlueTrip是一款类似960、Blueprint、YAML的950PX 24-column grid的Css Framework。比较特别的是BlueTrip对网站中Button、Link、Tips等做了一些比较2的定义。 预览地址：http://5key.net/down/bluetrip/examples/index.html Features List: 24-column grid Sensible typography styles Clean form styles A print stylesheet An empty starter stylesheet Sexy buttons Status message styles 官方站点下载： http://bluetrip.org/

Leave a comment - 1,785 views

良好的代码注释

2008/06/06 Posted in 用户体验设计 ,

当你加入到一个项目，相关的CSS文件可能会看得你头昏眼花。时间一长，修改了哪些内容，增加了哪些内容，也都弄不清，维护成本相当的高。正好我们国际站正在进行代码的规范工作。下面的这段代码注释的思路值得借鉴。 通常写法: #sidebar ul li a { display: block; background-color: #ccc; border-bottom: 1px solid #999; margin: 3px 0 3px 0; padding: 3px; } 注释的代码段： #sidebar ul li a { display: block; background-color: #ccc; border-bottom: 1px solid #999; /* ADDED Apr. … Continue reading →

9 Comments - 2,951 views

自适应的标题

2008/03/18 Posted in 用户体验设计 ,

阿里前端（方凳）出了道题，有点意思，想了一方案，给大家分享一下：） 预览地址：http://5key.net/demo/liquid-css-title/ 要求如下： 宽度自适应 标题文字自适应 尽量用一张背景图 尽量少的嵌套 效果嘛，先给出我的截图如下： 以前曾做过一个自适应宽度的圆角按钮。不过这里有两个自适应在里面，所以也得稍微的修改一下。 1、先来看用到的背景图： 2、代码部分： 我是第一

18 Comments - 4,779 views

关于《CSS权威指南 第三版》

2008/03/01 Posted in 互联网产品设计 ,

前两天在宜山路新华书店翻书，在一个角落里发现《CSS权威指南》，惊叹！居然还有？仔细一看，已是第三版。 记得曾有不少人问我哪里买，更甚者愿出三倍价格买去…… 发此一文，只为告知仍有需要得朋友。卓越似乎已断货，要下手尽快。 豆瓣地址: http://www.douban.com/subject/2308234/ p.s: 豆瓣上的卓越亚马逊 (RMB 21.2)链接错误。

10 Comments - 3,137 views

PNG结合CSS渐变文字效果

2008/01/18 Posted in 互联网产品设计 , ,

其实这算一个老问题了。利用PNG图片的透明属性和CSS滤镜可以轻松制作渐变的文字效果。但由于IE6对AlphaImageLoader滤镜的不支持，使得这种方式并不完美。 前两天看到CSSGLOBE上的这篇《Css Text Gradient》，已经能很好的适用于IE6，7及FF的方案。 关键归结与以下两点： 一、PNG自身可透明的属性。 需要注意的是：在保存PNG图片的时候，一定要注意保证背景是透明的。 二、CSS滤镜progid:DXImageTransform.Microsoft.AlphaImageLoader的使用。 示例地址：http://5key.net/demo/css-gradient-text/ 示例下载 代码： h1 { color:#333; font-weight:bold; text-transform:uppercase; letter-spacing:-.05em; position:relative; } h2 { color:#0033FF; font-weight:bold; text-transform:uppercase; letter-spacing:-.05em; position:relative; }h1 span{ position:absolute; display:block; top:0; left:0; height:100%; width:400px; background:url(gradient.png) repeat-x; } h2 span{ position:absolute; … Continue reading →

15 Comments - 5,508 views
12