以前有很多方法给图片加阴影，但那都是通过另外的图片实现的，而且只能显示一种阴影，要想换其它的阴影，就得换图片，十分费事。这个Hack可就不同了，它不是通过图片实现阴影的，而是用CSS+JS，想要什么颜色的阴影，只要换个颜色代码就可以了。它不仅可以给图片加阴影，而且可以给一段文字或者链接加上阴影，真是非常非常棒。
这是截图： 
具体效果可以看这里。下面就看怎么实现吧！
实现方法：
1：备份模板
2：在<head></head>间添加下列代码，以引用脚本文件（其中的脚本文件建议自己保存并上传到自己的网络硬盘里）<script src='http://bryant0315.googlepages.com/cssshadow.js' type='text/javascript'/>3：添加一个CSS用于控制阴影的样式，如大小、位置等。代码如下.shadow{4：保存模版
border:1px solid silver;
font:10pt arial;
position:relative;
display:inline;
background:white;
z-index:100
}
.shadow_inner{
overflow:hidden;
position:absolute;
top: -1000px;
filter:alpha(Opacity=10); /*modify to change the shade solidity/opacity, same as below*/
opacity:0.1; /*firefox 1.5 opacity*/
-moz-opacity:0.1; /*mozilla opacity*/
-khtml-opacity:0.1; /*opacity*/
z-index:10
}
5：现在就可以为你的图片或文字添加阴影了
如果是文字，就在<p class="shadow" style="display: block" rel="#ff0000">和</p>之间加入你要写的字，shadow是类名，注意rel后面就是要显示的颜色，随便换个代码就可以改变阴影的颜色。
如果是图片，代码格式是<img src="图片地址" class="shadow" rel="#ffff00" />，换个图片地址就可以了。
如果是链接，是这样表示的，<a href="http://bryant0315.blogspot.com" class="shadow" rel="#0000ff">Dream Dynasty</a>，在原来的链接里加入类别和颜色就可以了，很简单。
怎么样，这种方法是不是很方便，不需要制作许多阴影图片换来换去，只要改个颜色就可以。这个Hack的制作者真是太有才了。
CSS精彩实例(五)——CSS Gradient Shadow
|
标签：
CSS
|
订阅：
博文评论 (Atom)
0 评论:
发表评论