推荐5个最棒的Firebug扩展

firebug
原文翻译自:The 5 Best Firebug Extensions

众所周知,Firefox浏览器外加Firebug插件是互联网开发的最佳平台和调试工具。与此同时,Firebug最人性化的地方还是可以再做插件扩展,下面将介绍的是WebMonkey推荐的5款最棒的Firebug扩展。(安装下面插件的之前必须先安装Firebug插件) Continue reading

CSS中background-image的另类使用

CSS-background
在CSS众多的样式当中,background可以说是扮演着重要的角色,它可以设置对象的背景样式。如颜色或者使用一张图片代替,今天我要多说两句的就是使用一张图片的参数:image。准确的来说应该是background-image。我们可以这样用它:

body{
background-image: url(http://www.icyleaf.cn/logo.jpg);
}
/* 也可以直接使用background 代替 */
body{
background: url(http://www.icyleaf.cn/logo.jpg);
}

这都是可以的,所以说css的自由度很高,这点我很喜欢。其实css显示图片分3种,第一种是单纯的显示一个图片;第二种称之为CSS Sprites,也就是说把若干小图片合成一个大图片,然后通过background的postion参数实现效果,第三种就是我们今天说的另类用法,它也有学名称之为Inline images。实现声明一点,这个方法不适用于IE浏览器,恩,没错,IE,我们都遗弃你了。(关于CSS Sprites 的描述信息来自7career.org

CSS Sprites是一种把所有的图片都以base64编码以源代码的形式写在CSS文件里,格式是这样的:data:[<mediatype>][;base64],<data>

data:URL标签是在1995年第一次提出,按RFC2397规范的描述:它是”allows inclusion of small data items as ‘immediate’ data.(允许在页面中包含一些小的即时数据)”。如一个内嵌的的图片可以这样引用:

body{
background-image:url(data:image/gif;base64,R0lGODlhCAAIAJEAAOnp6eTk5O7m8AAAACH5BAEAAAIALAAAAAAIAAgAAAINjAMJh2q6DnxOVsqmLQA7);
}

这段代码可以在firefox浏览器运行,恩,图片是我取自mg12当前模板的背景图,呵呵(^___^)

base64编码简单的说是,Base64内容传送编码被设计用来把任意序列的8位字节描述为一种不易被人直接识别的形式。最早使用在windows系统的电子邮件传输的,主要是附件的传输。在那个时候的黑客们也流行过一段base64编码版的木马和病毒。为了简单篇幅,想了解的看这里
第一次我也是通过这个方法获取的图片的base64编码,主要原因是网上没有现成的转换这种编码的工具,估计已经被大家所遗忘掉了。我这里简单的写了个PHP代码,实现了图片编码的转换:
在线转换:Demo | Download

这个在线转换的背景就是上面那段代码,大家可以通过查看网页源码看到。图片的代码转换原理也很简单,通过读取图片的文件并把图片储存在一个数组(或字符串)里面,然后使用base64_encode转换即可~ok,讲解完毕。

CSS资源:CSS Creme,不仅仅是赏析

Logo
CSS Creme
主要的服务内容和cssbeauty以及cssmania相似:CSS galleries(CSS 展廊)。展示收集以及提交的网站的模板,共大家欣赏。而CSS Creme不仅仅提供了欣赏的平台,还提供了高达1500的免费资源,其中包括:
免费CSS模板和壁纸,最大分辨率高达2560 x 1600,而且还有专门的iPhone的壁纸。 网站还提供一些对网页编程者,美工都很实用的在线工具,如在线生成标签云(Tag Cloud),CSS技术的文本倾斜特效(CSS Gradient Text Effect),Web2.0徽章收集(Web 2.0 badges collection),Ajax效果的密码长度检测器(Ajax Password Strength Checker),以及一些推荐的相关书籍。 网站亮点:
1. 网站采用了传统的分类方式之外还根据了颜色进行了系统的分类(看下图):
分类

2. 这么漂亮的一个网站你猜猜是怎么开发出来的?自主研发,利用现成的框架?使用的博客系统?
现在提示一点,如果你仔细看cssbeauty和cssmania的底部你会发现他们都是使用Movable Type系统。
难道是WordPress系统?
是不是WordPress?你确认么?
……
答案就是:【WordPress】 <-刮刮看~