我爱水煮鱼» CSS

IE9 下如何实现 CSS3 圆角

Denis — Thu, 16 Sep 2010 07:07:08 +0000

微软最新发布的 IE9 浏览器也支持 CSS 圆角，IE 9 没有使用私有属性，直接使用 border-radius 定义圆角，border-radius 是定义四个角都是圆角，如果要具体的一个角，可以使用下面四个属性：

border-bottom-left-radius
border-bottom-right-radius
border-top-left-radius
border-top-right-radius

如果你正在使用 IE9，可以看到我的侧边栏标题已经是圆角了。另外点击这里查看 Firefox, Safari, 以及 Chrome 浏览器使用 CSS3 实现圆角效果。

>>>继续阅读全文 ...

使用 CSS3 实现圆角效果

Denis — Thu, 16 Sep 2010 07:05:00 +0000

我爱水煮鱼博客上使用的图片比较多，虽然我采用了服务器缓存，gzip 压缩以及对 CSS 和图片文件设置了一个比较合理的过期时间，但是还是比较慢。所以减少图片的使用还是速度加快的王道，所以我今天学习了下使用 CSS3 技术不需要图片即可实现圆角，把侧边栏标题背景的圆角效果和搜索框的圆角效果用 CSS3 实现。记录一下以便以后使用。

W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性：border-radius，Firefox 和 Safari 也通过私有属性实现了该功能：

代码非常简单：

Firefox 和 Safari 实现圆角

效果如下：

Firefox 和 Safari 使用私有属性实现圆角效果

其中 -moz-border-radius 是 Firefox 实现圆角的私有属性，而 -webkit-border-radius 是 webkit 内核浏览器（如 Safari 和 Chrome）实现圆角的私有属性，如果你只要指定某一个角是圆角的话，它们都分别定义了四个属性：

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

当然 IE9 以下版本还是不支持，所以该效果只能在 IE9, Firefox, Safari, 以及 Chrome 中查看。

最新的 IE9 已经支持 CSS3 圆角。

>>>继续阅读全文 ...

#grid：网页网格布局工具

Denis — Fri, 16 Jul 2010 19:36:23 +0000

如果你开始使用网格来进行网页设计，那么 #grid 是你必不可少的一个工具，#grid 是一个使用 jQuery 和 CSS 构建的小工具，它会在网页上插入布局网格线，让你能够检测和调整页面上元素位置。

#grid 适应所有宽度的页面，可以调整任意的高度布局（默认为 20px），可以实时隐藏和打开网格线，#grid 使用非常简单，一个 Javascript 文件，简单的几行 CSS 代码，和一个用于垂直网格的图片。

#grid 使用

#grid 使用非常简单，在你的页面上插入所需的 Javascript 和 CSS代码之后，只需按下 G 就会显示网格线，松开网格线消失，G + H 就会一直显示网格线，松开也不会消失，如果没有显示网格线，可以按下 G+F 把网格线调到前面。#grid：网页网格布局工具这篇日志已经启用了，你可以按下这些快捷键来测试下效果。

安装 #grid

下载 hashgrid.js 脚本，并且上传到服务器中。

然后在网页中添加如下 JavaScript 代码：

<!-- Grab latest version of jQuery -->
<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

<!-- Include the hashgrid script -->
<script type="text/javascript" src="hashgrid.js"></script>

然后在网页中添加如下 CSS 代码：

/**
 * Grid
 */
#grid{

    /* Vertical grid lines */
    background: url(bg-grid-980.gif) repeat-y 0 0;

    /* Dimensions - same width as your grid with gutters */
    width: 980px;

    /* Grid (left-aligned)
    position: absolute;
    top: 0;
    left: 0;
    */

    /* Grid (centered) */
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -490px;

}

/**
 * Horizontal grid lines, defined by your base line height
 *
 * Remember, the CSS properties that define the box model:
 * visible height = height + borders + margins + padding
 */
#grid .horiz{

    /* 20px line height */
    height: 19px;
    border-bottom: 1px dotted #aaa;
    margin: 0;
    padding: 0;

}

#grid 可以支持各种网格系统的，目前默认提供 980 宽的布局（940 内容区，两边 20 边界），如果使用别的网格模式，需要调整下CSS 和制作一张新的用于垂直网格布局的图片。

下载：#grid
演示：#grid：网页网格布局工具

>>>继续阅读全文 ...

CSS Prism：CSS 颜色查看器

Denis — Mon, 15 Feb 2010 15:00:13 +0000

颜色是网页设计中非常重要的一部分，如果一个网站中使用了太多了颜色显然是不太好的，那么如何检查网页的 CSS 文件中使用了几种颜色，显然不能一行一行查看 CSS 代码，我们需要一个自动化工具，CSS Prism 就是这方面最好的自动化工具。

CSS Prism 是一个 CSS 颜色查看在线服务，你只需按输入任何 CSS 文件，他就会扫描 CSS 文件中所有的 16 进制颜色代码并显示他们，然后你可以通过一个类似于 Photoshop 颜色选择器（使用 jQuery 的 color picker 插件）让你编辑不需要的颜色。

CSS Prism：CSS 颜色查看器

CSS Prism 是基于 Django 创建的的，并采用 jQuery 及其 color picker 插件，其详细功能有：

可以查看 CSS 文件中所有 16 进制颜色。
可以定位所有颜色在 CSS 中的位置。
可以在线编辑颜色，并且通过白色调和暗色调两种方式查看颜色。

CSS Prism 还提供一个 Bookmarklet： CSS Prism，通过它，你就可以查看任何网页使用的所有颜色了。

CSS Prism 是我最近使用比较多的服务，我用它来查看博客中 CSS 的所有的颜色，然后通过查看去掉比不要的颜色，使得博客中的颜色尽可能的少。如果你想对你博客中的颜色调整下，那么个人推荐你使用 CSS Prism 这个服务。

>>>继续阅读全文 ...

最佳 CSS 书籍推荐

Denis — Sun, 24 Jan 2010 09:20:34 +0000

最近利用 WordPress 给朋友创建一个工作室网站，朋友的设计图做得非常棒，在将其 PSD 转换成 XHTML+CSS 的时候，由于其工作室访问用户的还有相当大的比例用户使用 IE 6，所以在对兼容 IE 6 方面确实花了不少心机，不过这些问题大部分都是 mg12 帮忙解决的。

说到 CSS Hack 我想起了截至目前为止个人认为最好的一本 CSS 书：CSS Mastery – Advanced Web Standards Solutions. 中文版翻译的名字叫做精通CSS：高级Web标准解决方案。

在当当购买 | 在卓越购买

该书的官方介绍为：

本书将最有用的CSS技术汇总在一起，在介绍基本的 CSS 概念和最佳实践之后，讨论了核心的 CSS 技术，例如图像、链接、列表操纵、表单设计、数据表格设计以及纯 CSS 布局。每一章内容由浅入深，直到建立比较复杂的示例。之后本书用两章讨论招数、过滤器、bug和bug修复，最后由 Simon Collison 和 Cameron Moll 两位杰出的 CSS 设计人员，将书中讨论的许多技术组合起来，给出了两个实例研究。本书还集中介绍了现实的浏览器问题，是弥补 CSS 知识不可或缺的参考书。

本书适合具有 (X)HTML 和 CSS 基本知识的任何网页设计人员阅读。

我在阅读该书的时候，觉得我个人最有用的两点是：

1. 介绍了 IE6/Win 在怪异模式下使用的非标准的 Box 模型，和对这一问题的解决方法。这一个介绍对 IE 6 在 CSS 下为什么老是出问题和解决方法都有很好的理解。

2. 各种浏览器 Bug 的修复，当然主要是 IE 6，这方面介绍得非常详细，几乎包含了当前所有的 CSS Hack 问题。如 IE 6 的双空白浮动 bug，3像素文本偏移 bug 等，IE 6 重复字符 bug 等。对解决问题很有帮助。

>>>继续阅读全文 ...

好书推荐

Float 和 List Style Image 的 CSS 问题

Denis — Fri, 07 Aug 2009 13:10:20 +0000

今天把主题修改了下，主要就是把 head 图片换张新的，原来的猪好久了，没有鲜新感了，不好看了，换头新的猪，哈哈。然后把侧边栏加大一点，为什么这么干？这样可以多放点广告，给晨晨多赚钱奶粉钱，虽然现在还没有人找我投放广告，但是我相信会有的，哈哈！

在把侧边栏加宽的之后，发现侧边栏的分类和友情链接列表太窄了，非常不协调，于是乎就把它改成两栏，代码如下：

#subcontent ul.categories li{
    list-style-image:url(images/categories.gif);
    width:100px;
    float:left;
    margin:2px 0 2px 18px;
}

但是发现在 IE7 中，List-type-image 的图片不会显示出来，于是 Google 之，发现在 IE 中，float 和list-style-image 不兼容，建议使用 background-image 来代替，修改之后的代码如下：

#subcontent ul.categories li{
    background:url(images/categories.gif.gif) no-repeat center left;
    list-style:none;
    width:100px;
    float:left;
    margin:2px 0 2px 0;
    padding-left:18px;
}

>>>继续阅读全文 ...

BlueTrip：含有全部功能的 CSS Framework

Denis — Sat, 27 Jun 2009 19:16:58 +0000

前面介绍了只有 1KB 的轻量级 CSS 框架：1KB CSS Grid，今天介绍一个含有全部功能的 CSS 框架：BlueTrip。

由 Blueprint 和 Tripoli 的最好的地方组成（名字也是截自 Blueprint 和 Tripoli）。
还包含 Hartija 的打印样式。
还有960.gs 的简单性
以及Elements 的图标。

BlueTrip：含有全部功能的 CSS Framework

所以基本上 BlueTrip 包含其他 CSS 框架的优点，使用它可以让你事半功倍，跳过过去繁重的工作，BlueTrip 的详细功能有：

24 列网格
明智的版式风格
整洁的代码
含有打印样式
一个空的简化版样式
性感按钮
状态信息样式

下载：BlueTrip，这里有 BlueTrip 的详细文档和演示。

>>>继续阅读全文 ...

轻量级的 CSS 网格系统：1KB CSS Grid

Denis — Sun, 21 Jun 2009 18:18:58 +0000

CSS 框架逐渐变得流行，其中的一些，如 BluePrints, YUI, YAML 等想去实现所有的东西，如网格系统，样式重置，基本板式，表单样式，其他的仅仅关注网格，但是还是显得臃肿，最后加上复杂性，这样只会使学习曲线变得陡峭，和增加开发时间，以及无穷的调试。

所以如果你仅仅需要一个轻量级的 CSS 网格系统，来构建你网站的主框架，那么你可以尝试下 1Kb CSS Grid。

轻量级的 CSS 网格系统：1KB CSS Grid

1KB CSS Grid 网站上提供了一个生成器用来定制 CSS 网格，并且可以直接下载定制好的 CSS 网格。

另外 Usability Post 这个博客上面还有3篇关于 1KB CSS 网格非常详细介绍：

Via WebresourcesDepot

>>>继续阅读全文 ...

PureCSS Theme

Denis — Fri, 05 Jun 2009 18:45:23 +0000

这是一个纯 CSS 打造的一个主题，没有一张图片。由 WordPress 主题设计爱好者非著名设计师 Leslie 设计，Yixia 编码，本人负责发布。

该主题兼容最新版本的 WordPress，支持 Widget，通过 CSS 和 XHTML 验证，在 IE6 / 7，FF2 / 3 等浏览器表现一致，不需要任何插件支持。

预览 | 下载

PS，我的英文博客 newfish 也用这个主题。

>>>继续阅读全文 ...

使用 Styleneat 重新组织 CSS

Denis — Fri, 27 Mar 2009 17:24:57 +0000

Styleneat 是一个能够帮你重新组织你 CSS 属性的免费服务。

Styleneat 能够把 CSS 的选择器（selectors），子选择器（ sub-selectors）和属性（properties）按照层式结构化重新组织，这样使得程序员更加容易去定义页面区域和查看它们之间的关系。

Styleneat

比如它会把下面这段 CSS 代码

id1 { width: 100px; }
id1 .class1 { background: #000; }
id1 .class1 a { text-decoration: none; color: #fff; }
id1 .class1 a span { text-indent: 10px; }
id2 { width: 200px; }

重新组织成：

id1 { width: 100px; }
    id1 .class1 { background: #000; }
        id1 .class1 a { color: #fff; text-decoration: none; }
            id1 .class1 a span { text-indent: 10px; }
 
id2 { width: 200px; }

Styleneat 提供三种使用方式：

直接粘贴 CSS 代码。
上传一个 CSS 文件。
提供 CSS 文件的 URL 地址。

另外 Styleneat 还提供一些选项，如按照 CSS 选择的字母顺序排列，单行格式或者多行格式等。Styleneat 在 CSS 优化方面还是提供了比较多的帮助。

>>>继续阅读全文 ...

更新 PureCSS 主题到 2.7

Denis — Sun, 28 Dec 2008 07:43:33 +0000

Leslie 设计的纯 CSS 的 WordPress 主题 PureCSS 更新到 2.7。

本次修改主要是在 PureCSS 主题上实现 WordPress 2.7 的 Thread Comments。由于我修改的时候没有兼容旧版本的 WordPress，所以现在该主题只适合最新的 WordPress 2.7。另外支持 Widget，通过 CSS 和 XHTML 验证，在 IE6 / 7，FF2 / 3 等浏览器表现一致，不需要任何插件支持。

预览 | 下载

>>>继续阅读全文 ...

把 WordPress 作为 CSS Gallery

Denis — Sat, 15 Dec 2007 18:45:39 +0000

虽然用 CSS Gallery 展示一些优秀设计已经不是什么新事物了，但是使用 WordPress 去驱动 CSS gallery 正成为潮流。用很多 WordPress 驱动的 CSS Grallery 中的一个，CSSRemix.com 来举个例子。如果要完全克隆 CSSRemix 的所有功能是一件很消耗时间的工具，但是去模仿基本的结构还是不太难的。

第一，你需要知道怎么使用自定义字段 (custom fields)。
第二，下载 Lester Chan 的 WP-PostRatings 插件，安装并集成它。这个插件不是必需的，但是人们喜欢对东西进行评定，那就用这个插件让他们评定吧。
第三，决定给每个精选的网站使用多少个自定义字段，包括健 (key) 和值 (values)。举个例子：url (key) = http://www.wpdesigner.com (value)，url_img (key) = wpdesigner_screenshot.png (value)。给每个站点的自定义字段健和值的数量越多，你就会为自己准备的工作量越多。

这里是一个如何实现上面说明的例子：

php the_title(); ?>
<a href="value of url"><img src="value of url_img" alt="" />a>

当你建立所有的东西之后，外包索引成千上万个优秀设计网站的工作。这样你就完成了一个 CSS 驱动的 CSS Gallery。

翻译自：Using WordPress as a CSS gallery

>>>继续阅读全文 ...

我爱水煮鱼» CSS

IE9 下如何实现 CSS3 圆角

相关日志

使用 CSS3 实现圆角效果

相关日志

#grid：网页网格布局工具

#grid 使用

安装 #grid

相关日志

CSS Prism：CSS 颜色查看器

相关日志

最佳 CSS 书籍推荐

好书推荐

Float 和 List Style Image 的 CSS 问题

相关日志

BlueTrip：含有全部功能的 CSS Framework

相关日志

轻量级的 CSS 网格系统：1KB CSS Grid

相关日志

PureCSS Theme

相关日志

使用 Styleneat 重新组织 CSS

相关日志

更新 PureCSS 主题到 2.7

相关日志

把 WordPress 作为 CSS Gallery

相关日志