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

    div+css基本布局：

<div id=”mm”>
<div id=”mm1″></div>
<div id=”mm2″></div>
</div>

    1、js实现div自适应高度

代码如下：
<script type=”text/javascript”>
<!–
window.onload=window.onresize=function(){
if(document.getElementById(“mm2″).clientHeight<document.getElementById(“mm1″).clientHeight){
document.getElementById(“mm2″).style.height=document.getElementById(“mm1″).offsetHeight+”px”;
}
else{
document.getElementById(“mm1″).style.height=document.getElementById(“mm2″).offsetHeight+”px”;
}
}
–>
</script>

    （注：网上公布了不少方法，但代码或多或少有错；上面的是无错代码；我测试在IE6.0/IE7.0下通过，考虑绝大数人仍然用的是IE，所以并没有在opera和firefoxs下调试，哪位用的是opera或ff，可以帮忙看看。）

    2、纯CSS方法

    css里代码（调试通过，但不会显示div下边框，即border-bottom）：

/*左右自适应相同高度start*/
#m1,#m2
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important; 
}
@media all and (min-width: 0px) {
#m1,#m2
{
padding-bottom: 0 !important;
margin-bottom: 0 !important; 
}
#m1:before, #m2:before
{
content: ’[DO NOT LEAVE IT IS NOT REAL]‘;
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
/*左右自适应相同高度end*/

 
    3、加背景图片

    这个方法，很多大网站在使用，如163，sina等。

    XHTML代码：

<div id=”wrap”>
<div id=”column1″>这是第一列</div>
<div id=”column1″>这是第二列</div>
<div class=”clear”></div>
</div>

    CSS代码:

#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}

     还有其他的一些方法，但主流就是这几种了。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>左右自适应高度</title>
<style type=”text/css”>
.outer{display:table}
.outer,.inner,.a,.b{
width:200px;
}
.outer{
margin:10px 0 10px 200px;
background:red;
color:#fff;
}
.inner{
position:relative;
float:left;
margin-left:-200px;
background:blue;
}
.a{
float:left;
}
.b{
position:relative;
float:right;
margin-right:-200px;
}
</style>
</head>
<body>
<div class=”outer”>
   <div class=”inner”>
     <div class=”a”>一边底</div>
     <div class=”b”>另一边高<br />
       <br />
       <br />
       <br />
       . 这个是另一边高,一边底,这样一边底就能自适应另一边的高度了。</div>
   </div>
</div>
</body>
</html>