eddie.Yang's creative » headline

CSS3:文字阴影知多少

eddie — Fri, 19 Jun 2009 13:05:27 +0000

最近我因为要安装Firebug 1.4导致我不得不安装了Firefox 3.5,所以很不小心地接触到了Wordpress后台那漂亮的文字阴影.也就是CSS中的text-shadow属性.所以今天我整理了一些资料,希望可以对大家有所启发.

首先我们看看wordpress 2.8后台使用了text-shadow的部分(绿色箭头).觉得怎么样?没错,这些都是CSS3属性,而不是图片做成的.

text-shadow是什么?

text-shadow早在CSS2中已经存在,而现在CSS3也准备将他加入其中.并且由于一直以来只有Safari支持这个属性所以我们很少见到真正的应用,直到最近Firefox 3.5对它的支持然重新唤起了人们对它的兴趣.

text-shadow可以支持给文字加上阴影,这样我们在设计时可以利用css3属性增加文字的质感而不用使用任何图片.

目前支持的浏览器有Firefox 3.1+,Safari 3+,Opera 9.5+等现代浏览器(数据可能有偏差).当然IE家族是无法支持的.

接下来看看text-shadow的语法:

text-shadow:color length length length;

color:颜色; length分别按顺序指”X轴方向长度 Y轴方向长度阴影模糊半径”

正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上.

其中任意一个值可以为零也可为空(将做默认处理)

举个例子:

text-shadow: -1px 2px 3px #ffb69a;

表示X轴方向阴影向左1px,Y轴方向阴影向下2px,而阴影模糊半径3px,颜色为 #ffb69a

一些试验与demo

我做了点小小的试验,做成了一个Demo页面.

为了向浏览器不支持text-shadow的用户看到阴影效果,请直接看以下截图(有位朋友说那个”火鸟”看起来像”鸡”):

如果你使用的是Firefox 3.1+,Safari等浏览器,那请直接点Demo演示

为什么使用text-shadow

可以增强文字质感
可以减少图片的使用,减少带宽支出
随着Firefox 3.5支持text-shadow,不久很多人将可以看到你定义的阴影

不相信?请看看下面的截图,这是对http://tweetcc.com/网站分别在safari 4(win)与Firefox 3.0.11下所进行的截图.很明显在有text-shadow应用下整体文字层次感好了许多.

其他例子

接下来我们继续看看一些有趣的text-shadow下的例子吧,首先看看vikiworks用text-shadow来显示程序代码.很多人都觉得这个效果很赞,没错,该网站用的就是css3属性.

参考资料及常见问题

看完上面觉得不够,那么可以参考一下下面的文章.

问题有:

如果使用了blur,也就是定义了阴影模糊半径,会导致页面在滚动时变慢.

转载请注明来源:http://www.ediyang.com/css3-text-shadow-why-and-how/

请留意:本文章旨在~~借刀杀人~~抛砖引玉引起大家对CSS3的兴趣.

也比较侧重该属性呈现的效果,所以对该属性的技术性讲解及定义都有所偏差,请原谅.

10个最漂亮的国人制作Wordpress主题

eddie — Sat, 28 Mar 2009 13:24:32 +0000

尽管制作Wordpress主题的国人不多,但是在仅有的主题之中,我们还是可以发现很多水平很高,十分漂亮的主题.
今天eddie给大家搜集了10个个人觉得最漂亮的免费Wordpress主题,而且它们全部是由国人制作的.

1.Infinity

Infinity是由国人设计师yichi与Smashingmagazine联合发布的一款高水平的免费wordpress主题,该主题设计之漂亮与精细都让我叹服.
下载信息

2.SimpleG

SimpleG风格简洁,但是整体布局很协调,而且主题的DIY性也很强,很适合喜欢简约的朋友.
DEMO演示下载信息

3.O-Box

U-Box是橙色系的2栏主题,头部部分虽然很简约但是给人的视觉冲击很强,同时可以注意到作者处理细节的能力很强.
DEMO演示下载信息

4.Omagazine

sofish制作过很多优秀的主题,但是个人还是比较喜欢这款颜色很清新可爱的主题.如名字所示,这是一款杂志型的主题.
DEMO演示下载信息

5.Hello D

hellowiki带来的主题,配色与导航栏的设计都很有特色.同时我也很喜欢该作者目前使用的主题.（能不能分享？）
下载信息

6.G7 v1

Wordpress中文论坛第一届主题设计大赛的第一名 ,同时作者underone还陆续发布了v2 v3 v4 v5 v6..需要指出的是underone主题的特色就是头部都很矮.
下载信息

7.iNove

iNove是Wordpress官方网站最受欢迎的主题之一,曾一度占据主题下载板第一的位置.头部与背景阴影都十分好看.整体很酷很协调.
DEMO演示下载信息

8.Prower v2

Prower主题有点apple的感觉,整体布局为白色,但是部分地方的蓝橙色使主题增色不少.
DEMO演示下载信息

9.iBlue

iBlue风格很简洁,但是板块之间的空隙处理的很好,使得阅读起来很舒服,不会有很大阻碍.
DEMO演示下载信息

10.BlogBus

这是由柠檬制作的一款十分漂亮大气的主题,特别是头部设计以及不断重复的花图腾.
DEMO演示下载信息

选择国人的主题有什么好处？

使用上的问题可以方便提问
风格与阅读习惯更适合
支持中国web产业发展(囧)
你觉得呢？

同时也呼吁一下使用wordpress主题的同学们,应该多支持制作主题的作者们,因为从设计到写代码是一件很辛苦的事.做出来的主题能得到大家的认可与支持,才是这些制作免费主题的作者所希望的.

jQuery制作淡入淡出的网站导航栏

eddie — Fri, 20 Mar 2009 17:37:29 +0000

前些天有朋友问我关于如何用jQuery制作淡入淡出的效果,就像本网上方的导航栏一样的效果.
借助jQuery的帮助,我们只需要几行代码就可以实现这样的效果.
当然这样的效果不止可以用来制作网站导航栏,同时也可以用来用在其他有鼠标悬停的地方.这就需要发挥各位的想象力了.

在线DEMO
下载源文件

XHTML的代码

首先,我们需要在之间把jQuery引用进来,这里我们使用Google CDN提供的jQuery.

首先让我们看看本例子中用做导航栏的背景图片

每个按钮的尺寸都是一样大:125*52px.

接下来我们要看看导航栏的代码,这里我使用ul来进行布局(较常用的方法),代码如下:



	主页
	作品
	关于
	联系

各位可以看到每个li中还包含了

这样的空div,而这个空div就是本例子中用于鼠标悬停时显示的div.在后面我们可以看到它的作用.继续..

CSS的代码


ul.nav{
	height:52px;
	text-indent:-9999px;
	list-style:none;
	}

这里text-indent:-9999px;是把xhtml里的文字缩进到我们看不到的地方.


ul.nav li{
	float:left;
	position:relative;
	}

注意这里position:relative;的设置是为了hoverHome等层进行相对定位做准备.


ul.nav a{
	display:block;
	width:125px;
	height:52px;
	}

这里把宽度与高度设置为按钮的尺寸,即125*52px.


.hoverHome,.hoverWork,.hoverAbout,.hoverContact{
	position:absolute;
	top:0;
	left:0;
	width:125px;
	height:52px;
	cursor:pointer;
	}

CSS部分的重点就在这,使用position:absolute;后这4个层就会以ul.nav li为基点进行定位,这里我们需要让.hoverHome,.hoverWork,.hoverAbout,.hoverContact这4个div与每个li完全重叠,所以我们设置top与left都为0.
接下来我们定义导航栏的背景图片


.home a{
	background:url(images/nav.gif) no-repeat 0 0;
	}
.work a{
	background:url(images/nav.gif) no-repeat -125px 0;
	}
.about a{
	background:url(images/nav.gif) no-repeat -250px 0;
	}
.contact a{
	background:url(images/nav.gif) no-repeat -375px 0;
	}

我们会特别注意到背景图片的偏移位置.例如“home”的背景图片在距离左边0px,距离上边0. 而第2个按钮”work”距离左边125px,所以我们设置为-125px(记住是负号).距离上边为0;以此类推.


.hoverHome{
	background:url(images/nav.gif) no-repeat 0 -52px;
	}
.hoverWork{
	background:url(images/nav.gif) no-repeat -125px -52px;
	}
.hoverAbout{
	background:url(images/nav.gif) no-repeat -250px -52px;
	}
.hoverContact{
	background:url(images/nav.gif) no-repeat -375px -52px;
	}

这里我们依然用的是同一张背景图片,而我们这一次需要的是图片下方蓝色的部分,也就是距离上边52px的线以下的部分.所以我们看到每个层的背景图偏移位置第2个属性都是-52px,这就让背景图从距上边52px的地方开始.

现在刷新你的页面,如果你的代码没错,你应该可以看到一条蓝色的导航栏了.但是它没有任何鼠标悬停的变动效果.没有淡入淡出,轮到jQuery出场了.

jQuery代码

请依然把代码写在里面.