一起CSS

当前位置:一起CSS

令人难以置信的纯CSS3图标和Logo

日期:2010-08-31 分类:CSS

尽管被批评为走火入魔,CSS3 痴迷者们仍然在尝试实现各种基于纯 CSS 的图形与图标设计,如果你看到本文介绍的这些精美图标,你绝对不会相信它们完全是由 CSS3 代码生成的。尤其是那套由 Louis Harboe 设计的 iOS 图标,那么微妙的色彩与纹理,真的难以置信。

奥林匹克标志

作者: Doug Neiner

基于纯 CSS,以 em 为单位,可动态调整尺寸,需要浏览器支持 border-radius 属性,目前支持的浏览器包括 Chrome, Safari, Firefox 和 IE9。

CSS 实现的奥林匹克标志

阅读全文 >

查看:80 评论:2 标签:

用Minify加快你的网站速度

日期:2010-08-18 分类:可用性/可访问性

Web 性能越来越被重视,其中很重要的一条是减少 HTTP 请求,减少 HTTP 请求包括很多方面,今天来介绍一下用 Minify 减少网站的 HTTP 请求。

Minify 是 PHP5 应用程序,它能合并、压缩 jscss 文件,并且能通过 HTTP gzip/deflate 及一些相关头,优化客户端缓存。

那么以本博客为例来看看 Minify 的效果如何。本博客 js 文件有 5 个,css 文件 1 个。下图是没有使用 Minify 的截图:

阅读全文 >

查看:209 评论:4

jQuery过滤选择器:not在IE中的bug

日期:2010-08-11 分类:前端技术

在《jQuery插件Flip》的第二个例子中 (查看 Demo),写过滤选择器的时候,发现在 IE 下有问题,无法过滤。代码是这样的:

$('.flipbox:not(:first)').hide();

代码在非 IE 浏览器下没有问题,即除了第一个含有 flipbox 类的元素外,其他的隐藏,但在 IE 里却全部隐藏了。

经过测试,除了上面的写法在 IE 下有问题外,下面的几种写法在 IE 下也有问题:

$('.flipbox:not(:first)');
$('.flipbox:not(:last)');
$('.flipbox:not(:even)');
$('.flipbox:not(:odd)');
$('.flipbox:not(:eq(1))');
$('.flipbox:not(:gt(1))');
$('.flipbox:not(:lt(1))');

很奇怪的是:如果把 className 换成 tagName,如上面把 .flipbox 换成对应的标签名,又不会出现问题。当然,换成标签名的话,你要确定不会选择到其他不需要选择的标签,以免产生混乱,出现其他问题。

阅读全文 >

查看:219 评论:2 标签:,

7月份全球主流浏览器市场份额

日期:2010-08-2 分类:浏览器

又过去了,浏览器经过一番“斗争”后,又出现了怎样的局面呢?根据市场研究公司 Net Market Share 最新发表的统计数据显示,微软 IE 浏览器依旧以 60.74% 的市场份额位列第一,并且份额连续连两个月上升。而排名第二的 Firefox 则连续三个月下滑,7 月的市场份额降到了 22.91%。第三名为 Chrome,为 7.61%,比上个月下降了 0.08%。Safari 则一路上升,连续 5 个月份额上升,虽然每次上升的份量不多。7 月 Safari 的市场份额为 5.09%。第四名是 Opera,只有 2.45%,但比上个月增加了 0.18%。

2010 年 7 月主流浏览器市场份额占有率图片

也就是说和上个月相比:

  • IE +0.42%
  • FF -0.90%
  • CH -0.08%
  • SA +0.24%
  • OP +0.18%

从上面的数据可以看出总体的趋势是:Firefox 的份额被 IE 和 Safari 抢夺了。

IE 9 将月 9 月公测,其他浏览器也在不停的更新,浏览器的战争还在进行中,以后局面会怎样,我们静观其变吧。

查看:210 评论:2 标签:,

jQuery插件Flip

日期:2010-07-27 分类:未分类

flip 插件示例图片

Flip 是一个基于 jQuery 的插件,它模仿流行的卡片翻转的效果,可以轻易的让元素在左右上下四个方向翻转。先看看效果吧,查看 Demo

Flip 同时基于 jQuery UI ,所以,要使用 Flip 需要引入 jQueryjQuery UI

Flip 使用很简单,只需让元素调用 flip 方法就可以了。

$('.flipbox').flip({})

不过,仅仅只是单纯的调用 flip 方法的话,很多属性是默认的,也许不一定符合你的要求,你可以根据自己的要求、喜好添加相应的属性,Flip 提供的全部属性有:

阅读全文 >

查看:430 评论:4 标签:,,

页面 1/2012345678910...尾页

© Copyright 2010 一起CSS All Rights Reserved