快速业务通道

jQuery插件实现css3效果

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-02

    css3可以轻松实现很多譬如图片边框、多重背景、文字阴影等效果,但是目前支持css3的浏览器少之又少,往往了实现圆角效果要去写一堆代码,下面介绍的这些强大的jQuery插件可以轻松帮你实现很多复杂的视觉效果。

   在这之前我们先来看一下几个CSS3实例代码是怎么实现各种效果的。

1.多重背景

#backgrounds-box {
background: url(top-backgroundg.png) top left no-repeat,
url(bottom-backgroundg.png) bottombottom left no-repeat,
url(middle -backgroundg.png) left repeat-y;
padding: 35px;
}

2.文字阴影

b { text-shadow:  5px 5px 5px #666666; }

3.圆角

#rounded-corners-box {
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-rightright-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-rightright-radius: 8px;
}

 4.透明效果

.div-name { background: #333333; opacity:0.8; width: 380px; height:70px; }

 下面来看看jQuery插件实现css3效果的插件:

jQuery Corners 0.3

轻松地实现漂亮的圆角,无需额外的标签或图片。支持 iPhone.、Chrome、Firefox、Safari 2+、 Opera 9.0+、Internet Explorer 6+。

jQuery Corners 0.3

 jQuery Canvas Rounded Corners

通过canvas 实现圆角的jQuery插件,支持IE7、FF。

jQuery Canvas Rounded Corners

How To  Border Image with CSS3 and jQuery

CSS3 draft 介绍灰墙强大的图片边框技术。

How To  Border Image with CSS3 and jQuery

 

How To CSS Multiple Backgrounds / Background Layering with jQuery

实现多重图片背景的这个插件可以极大地减少xhtml标签,精简你的代码,多重背景的概念类似于PS的图层,一个图层叠在另一个图层上面。

How To CSS Multiple Backgrounds / Background Layering with jQuery

How To Drop Shadow with jQuery

为页面上的文字和透明图片添加柔和和阴影效果。

drop-shadow

How To Text-shadow in Internet Explorer using jQuery

这个教程会教你如何在IE中轻松实现文字阴影效果。

How To Text-shadow in Internet Explorer using jQuery

How To Element Gradient with jquery

允许你自定义元素的填充渐变效果,支持指定渐变的方向。

How To Element Gradient with jquery

How to Rounded Corners in jQuery

一个简易的用jQuery实现圆角的教程。

How to Rounded Corners in jQuery

CSS3 Template Layout realized with jQuery

实现CSS3布局。

CSS3 Template Layout realized with jQuery

Creating a polaroid photo viewer with CSS3 and jQuery

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号