4. Tucked Corners

CSS代码允许你创建类似非常酷的Gravatar首页效果

div.tucked-corners {  
        background: #f6f6f6;  
        height: 380px;  
        margin: 50px auto;  
        padding: 10px;  
        position: relative;  
        width: 580px;  
        -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);  
           -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);  
                box-shadow: 0 1px 7px hsla(0,0%,0%,.2);  
    }  
    span.tucked-corners {  
        background: #c4453c;  
        display: block;  
        height: 380px;  
        position: relative;  
        width: 580px;  
        -webkit-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);  
           -moz-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);  
                box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);  
    }  
 
    /* Top Corner Effect */ 
 
    .top-corners:after,  
    .top-corners:before {  
        background: #e6e6e6;  
        content: '';  
        height: 50px;  
        position: absolute;  
        top: -25px;  
        width: 100px;  
        z-index: 10;  
        -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);  
           -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);  
                box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);  
    }  
    .top-corners:after {  
        left: -50px;  
        -webkit-transform: rotate(-45deg);  
           -moz-transform: rotate(-45deg);  
            -ms-transform: rotate(-45deg);  
             -o-transform: rotate(-45deg);  
                transform: rotate(-45deg);  
    }  
    .top-corners:before {  
        right: -50px;  
        -webkit-transform: rotate(45deg);  
           -moz-transform: rotate(45deg);  
            -ms-transform: rotate(45deg);  
             -o-transform: rotate(45deg);  
                transform: rotate(45deg);  
    }  
 
    /* Bottom Corner Effect */ 
 
    .bottom-corners:after,  
    .bottom-corners:before {  
        background: #e6e6e6;  
        content: '';  
        height: 50px;  
        position: absolute;  
        bottom: -25px;  
        width: 100px;  
        -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);  
           -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);  
                box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);  
    }  
    .bottom-corners:after {  
        left: -50px;  
        -webkit-transform: rotate(-135deg);  
           -moz-transform: rotate(-135deg);  
            -ms-transform: rotate(-135deg);  
             -o-transform: rotate(-135deg);  
                transform: rotate(-135deg);  
    }  
    .bottom-corners:before {  
        right: -50px;  
        -webkit-transform: rotate(135deg);  
           -moz-transform: rotate(135deg);  
            -ms-transform: rotate(135deg);  
             -o-transform: rotate(135deg);  
                transform: rotate(135deg);  
    } 

5. iPad-Specific CSS

修改一般的ipad屏幕布局

@media only screen and (device-width: 768px) {  
  /* For general iPad layouts */ 
}  
 
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {  
  /* For portrait layouts only */ 
}  
 
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {  
  /* For landscape layouts only */ 
} 

6. Style links depending on file format

修改外部链接，email链接，pdf链接的样式

/* external links */ 
a[href^="http://"]{  
    padding-right: 20px;  
    background: url(external.gif) no-repeat center right;  
}  
 
/* emails */ 
 
a[href^="mailto:"]{  
padding-right: 20px;  
 
background: url(email.png) no-repeat center right;  
 
}  
 
/* pdfs */ 
 
a[href$=".pdf"]{  
padding-right: 20px;  
background: url(pdf.png) no-repeat center right; 

(责任编辑：ken)