DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> jQuery插件實現css3效果
jQuery插件實現css3效果
編輯:CSS進階教程     

網頁制作poluoluo文章簡介:css3可以輕松實現很多譬如圖片邊框、多重背景、文字陰影等效果,但是目前支持css3的浏覽器少之又少,往往了實現圓角效果要去寫一堆代碼,下面介紹的這些強大的jQuery插件可以輕松幫你實現很多復雜的視覺效果。

    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

結合CSS3的 Box Shadow 屬性Rotate 實現拖動圖片過程中的陰影效果。

Creating a polaroid photo viewer with CSS3 and jQuery

jSlickmenu: A jQuery plugin for slick CSS3 menus

jSlickmenu通過類似CSS3的rotation 和shadows屬性現非常酷的菜單效果。

Super slick jQuery menu with CSS3

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved