奔向远方

CSS是一个为网友文档添加诸如字体、颜色和间隔等属性的机制。我喜欢使用CSS，胜于JavaScript 和 jQuery，如果相同的功能可以通过CSS和JavaScript实现时，那么建议使用CSS。或许有些设计师会表达不同意见——CSS缺少动态特性。真是这样吗？我们来看看CSS的高级技巧吧。

1. CSS 实现文字和背景渐变

 

转自：http://www.kooxo.com/tutorial/webdesign/css/200903/28-92.html

难道通过CSS实现背景的渐变不比通过图片实现更好吗？因为这能使网页更快地加载。

• 使用纯CSS实现 渐变 
• 使用 CSS 实现背景的渐变

文字的渐变又如何实现呢？

• CSS 文字渐变特效
• 纯CSS实现文字渐变

2.使用Z-index实现图像层叠

使用z-index 属性来设置一批元素的层叠次序，你可以设置一张图像显示在另一张图像或文本之上。

• 认识  Z-Index
• CSS Z-index

3. 使用CSS创建特殊边框 

• CSS Box Border test : This utility enables the sampling of Cascading Style Sheet (CSS) border styles, and creates the corresponding CSS code for implementation.
• Border-image CSS3 only.
• CSS Side Border Image Using CSS.

• Create a Scalable Star using using CSS border
• Border Slants

4. A Cool CSS Effect – Dashboard

• Create a Dashboard like effect using CSS.

5. 使用CSS创建 2D/3D 按钮

Create some cool looking buttons using CSS only.

• 3D Rollover Button using CSS
• How to make sexy buttons with CSS
• CSS rollover buttons

6. 用CSS实现文本的浮雕和阴影特效

Using this technique you can create iPhone like embossed Text

   1. text-shadow: 0px 1px 0px #e5e5ee;

• Text Embossing
• CSS Text Drop Shadows

7. 使用 CSS 为文本链接添加图标

 

 

• Add icon to the hyperlink.
• Iconize Textlinks with CSS

8. CSS 格式化引用内容

• Curly Quotes with Pure CSS
• Swooshy Curly Quotes Without Images

9. 使用CSS透明属性实现超酷特效

• A CSS only fly-out menu with transparency
• CSS Menu using CSS opacity property
• Opacity Background Blending Effects

  

• Transparency Menu Watermark on an image

10. 模糊的背景特效

• CSS Guru Chris Coyier explains how to create a blurry background using CSS

11. CSS视差特效

• Examples of and How to Create the CSS Parallax Effect
• A parallax illusion with CSS: The Horse in Motion

12.仅使用CSS创建 Lightbox 图像特效

• Here is another useful  technique that is using CSS and a little Javascript to create the lightbox effect.

13. 纯CSS实现折叠特效

• This post explains how to create Accordion using CSS
  

14. 使用简单CSS 实现文本修饰效果

• In this short tutorial you will see how to add grunge effect to your text using just CSS and one image.

15.创建区块或元素悬停效果

• Learn how to create a block hover effect for a list of links
• CSS element hover effect.

16. 使用CSS实现抖动效果

• Dezinerfolio shows how to create a dither effect using CSS .

17. 创建一个类似 liDock 的按钮效果

• Horizontal Menus That Grow on You

18. CSS 悬停翻转特效

• CSS swap hover effect

19. CSS实现偏振光滤镜特效

• Do you like Polaroid pictures? Well using this technique you can make the pictures on website look like Polaroid.
• Polaroid-izing photos with CSS and one Image.

20. CSS 实现杂志风格布局

• Create a Magazine Type layout Using CSS

21. CSS 悬停框菜单

A really cool CSS Menu using Images and CSS

22. 纯CSS 实现Tab 效果

• Using CSS only Create a Tabbed content. No jquery or Javascript at all.

23.CSS 实现固定的背景

• Ask the CSS Guy shows a trick that reveals a magic as you scroll.

24.CSS提示信息

• Show a message when hovering over the links.

25. 纯CSS装载图

• Add a “loading” icon to your larger images

Trackback URI | Comments RSS