css網頁特效代碼30則

1. Hoverbox Image Gallery

滑鼠移到小圖上放大查看大圖效果：http://sonspring.com/files/hoverbox.zip A pure css-based gallery; hovering over an image enlarges it

2. Advanced CSS Menu

css滑鼠滑過圖片變化效果：http://www.webdesignerwall.com/file/advanced-css-menu.zip A creative and complex navigation scheme.

3. Sliding PhotographGalleries

滑鼠移動張開全圖，其它圖片收縮效果效果源碼：示範頁最下方 已提供css xhtml代碼 An accordion effect; hovering over an image expands it. />

4.

<p>borders" href="http://bitesizestandards.com/bites/supercharge-your-image-borders" target="_blank">Lightbox Slides

Part of an article entitled "

<p>borders" href="http://bitesizestandards.com/bites/supercharge-your-image-borders" target="_blank">Supercharge your image borders" showcasing how you can use CSS styles to make images look more interesting.

5. Drop shadow on an image

css表格、圖片投影陰影製作效果 Aan image effect demo and discussion based on a A List Apart article entitled, "title="A List Apart - CSS Drop shadows">CSS Drop shadows".

6.

<p>Gallery" href="http://www.cssplay.co.uk/menu/lightbox.html#Portraits" target="_blank">Cross Browser Multi-Page Photograph Gallery

css tab標籤切換相簿分類：http://www.cssplay.co.uk/menu/zips/gallery.zip Hovering over the tabs changes the category, while hovering over an image enlarges it. height="180">

7. CSS PhotoZoom

css圖文混排，點圖片自動放大，文字自動調整 Uses a single image and adjustment of the background-position attribute.

8. CSSgallery layout—smells like a table

css樣式圖片排版，縮放瀏覽器視窗，圖片間距自動變化，跟table表格一樣的效果 height="180">

9.

<p>Page" href="http://ryanfait.com/resources/footer-stick-to-bottom-of-page/" target="_blank">Sticky Footer

A static footer with very little XHTML required. alt="Sticky Footer" height="180">

10. whatever: hover

windows 開始菜單效果 A navigation menu that mimics Window’s Start menu.

11. CSS-Only AccordionEffect

滑鼠滑過 段落展開，其它文字收縮效果 n accordion effect using div’s and :hover; the accordion effect can be vertical or horizontal.

12.

<p>Background Colors - David’s kitchen" href="http://monc.se/kitchen/59/scalable-css-buttons-using-png-and-background-colors" target="_blank">Scalable CSS Buttons Using PNG and Background Colors

png圖片和背景顏色定義的可縮放大小的css 按鈕 height="180">

13. Pushbutton Links

不使用任何圖片，css定義的按鈕效果 css代碼：href="http://mikecherim.com/experiments/support/C_css_pushbutton_links.txt" mce_href="http://mikecherim.com/experiments/support/C_css_pushbutton_links.txt">http://mikecherim.com/experiments/support/C_css_pushbutton_links.txt

14.

<p>Header" href="http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html" target="_blank">Scrollable Table with Fixed Header

資料表格 table 上下拉動表格，但是 頭部標題列跟底部保持不動，適合內容多而長的表格。 The table’s captions stay put which is excellent for long tables.

15. Content Overlaywith CSS

css 浮動層效果 When you hover over the image, the container div is shown with more text.

16. A CSS styled tableversion 2

css定義的美觀的表格樣式 A beautifully styled, table with semantic mark-up - uses a background image.

17. PNG Overlay

png層效果，css定義圓角、陰影、邊框 Another way to add flare to images (rounds the corners and adds a border and drop shadow).

18.

<p>with CSS" href="http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html" target="_blank">Showing Hyperlink Cues with CSS

為串連標題增加表徵圖 Simple tutorial on adding icons to different types of links.

19.

<p>CSS Boxes" href="http://www.modxcms.com/simple-rounded-corner-css-boxes.html" target="_blank">Simple Rounded Corner CSS Boxes

css定義圓角 Uses only one image and very few lines of code and mark-up.

<p>Boxes" src="http://www.51flash.cn/wp-content/uploads/2008/05/17_simple_rounded_corner_css_boxes.jpg" width="450">

20. SitemapCelebration

css定義的樹形網站地圖效果 Tree-like navigation using nested lists, great for sitemap pages.

21.

<p>transparency" href="http://bitesizestandards.com/bites/easy-cross-browser-transparency" target="_blank">Easy cross-browser transparency

瀏覽器視窗縮放，層對象始終自適應置中對齊 Opacity technique without the use of JavaScript (but at the cost of using non-valid XHTML code). height="180">

 22. Curved corners 2

隨瀏覽器視窗縮放，圓角流動自適應 Fluid width and height divs with rounded corners.

23. Creating agraph using percentage background images

百分比定義背景映像實現的統計表柱狀圖效果 List items <li> styled into bar graphs.

24. CSS Bar Graphs:Examples

css實現的三種圖表效果 3 bar graph examples - "Basic CSS Bar Graph", "Complex CSS Bar Graph", and "Vertical CSS Bar Graph" using div’s and definition list tags.

25. Animated Rollover Arrow

The arrow follows along the entire width of the navigation bar smoothly, without the use of JavaScript or animated gif’s.

26. A CSS-based Form Template

Showcases an accessible web form.

27. CSS Image Text Wrap

文字包圍映像效果 Using empty spacer div’s, the page’s text mimics a wrapping effect around the background image.

28. Before your very eyes - afade-in image 文字與背景圖片混合漸隱漸顯效果

A demo using opacity and a single image that gradually fades in to cover the text.

29. Pure CSS Pop-ups 相容蘋果系統的快顯視窗效果

A pop-up technique that works even in IE 5 Mac.

30. CSS Gradient TextEffect

css文字漸層效果 Uses background image overlays, and empty span tag, and position: absolute to create a gradient effect on text.