1. Hoverbox Image Gallery

鼠标移到小图上放大查看大图效果下载地址:http://sonspring.com/files/hoverbox.zip A pure css-based gallery; hovering over an image enlarges it css网页特效代码30则

2. Advanced CSS Menu

css鼠标滑过图片变化效果下载地址:http://www.webdesignerwall.com/file/advanced-css-menu.zip A creative and complex navigation scheme. css网页特效代码30则

3. Sliding PhotographGalleries

鼠标移动张开全图,其它图片收缩效果效果源码:演示页最下方 已提供css xhtml代码 An accordion effect; hovering over an image expands it. css网页特效代码30则 />

4. Lightbox Slides

Part of an article entitled "Supercharge your image borders" showcasing how you can use CSS styles to make images look more interesting. css网页特效代码30则

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".css网页特效代码30则

6. 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. css网页特效代码30则 height="180">

7. CSS PhotoZoom

css图文混排,点图片自动放大,文字自动调整 Uses a single image and adjustment of the background-position attribute. css网页特效代码30则

8. CSSgallery layout—smells like a table

css样式图片排版,缩放浏览器窗口,图片间距自动变化,跟table表格一样的效果 css网页特效代码30则 height="180">

9. Sticky Footer

A static footer with very little XHTML required. css网页特效代码30则 alt="Sticky Footer" height="180">

10. whatever: hover

windows 开始菜单效果 A navigation menu that mimics Window’s Start menu. css网页特效代码30则

11. CSS-Only AccordionEffect

鼠标滑过 段落展开,其它文字收缩效果 n accordion effect using div’s and :hover; the accordion effect can be vertical or horizontal. css网页特效代码30则

12. Scalable CSS Buttons Using PNG and Background Colors

png图片和背景颜色定义的可缩放大小的css 按钮 css网页特效代码30则 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 css网页特效代码30则

14. Scrollable Table with Fixed Header

数据表格 table 上下拉动表格,但是 头部标题栏跟底部保持不动,适合内容多而长的表格。 The table’s captions stay put which is excellent for long tables. css网页特效代码30则

15. Content Overlaywith CSS

css 浮动层效果 When you hover over the image, the container div is shown with more text. css网页特效代码30则

16. A CSS styled tableversion 2

css定义的美观的表格样式 A beautifully styled, table with semantic mark-up - uses a background image. css网页特效代码30则

17. PNG Overlay

png层效果,css定义圆角、阴影、边框 Another way to add flare to images (rounds the corners and adds a border and drop shadow). css网页特效代码30则

18. Showing Hyperlink Cues with CSS

为连接标题增加图标 Simple tutorial on adding icons to different types of links. css网页特效代码30则

19. Simple Rounded Corner CSS Boxes

css定义圆角 Uses only one image and very few lines of code and mark-up. css网页特效代码30则

20. SitemapCelebration

css定义的树形网站地图效果 Tree-like navigation using nested lists, great for sitemap pages. css网页特效代码30则

21. Easy cross-browser transparency

浏览器窗口缩放,层对象始终自适应居中对齐 Opacity technique without the use of JavaScript (but at the cost of using non-valid XHTML code). css网页特效代码30则 height="180">

 

22. Curved corners 2

随浏览器窗口缩放,圆角流动自适应 Fluid width and height divs with rounded corners. css网页特效代码30则

23. Creating agraph using percentage background images

百分比定义背景图像实现的统计表柱状图效果 List items <li> styled into bar graphs. css网页特效代码30则

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. css网页特效代码30则

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. css网页特效代码30则

26. A CSS-based Form Template

Showcases an accessible web form. css网页特效代码30则

27. CSS Image Text Wrap

文字包围图像效果 Using empty spacer div’s, the page’s text mimics a wrapping effect around the background image. css网页特效代码30则

28. Before your very eyes - afade-in image 文字与背景图片混合渐隐渐显效果

A demo using opacity and a single image that gradually fades in to cover the text. css网页特效代码30则

29. Pure CSS Pop-ups 兼容苹果系统的弹出窗口效果

A pop-up technique that works even in IE 5 Mac. css网页特效代码30则

30. CSS Gradient TextEffect

css文字渐变效果 Uses background image overlays, and empty span tag, and position: absolute to create a gradient effect on text. css网页特效代码30则

相关文章: