CSS Snippets

snippets.css

/* Vertical align */
.verticalcenter{  
    position: relative;  
    top: 50%;  
    -webkit-transform: translateY(-50%);  
    -o-transform: translateY(-50%);  
    transform: translateY(-50%);  
} 

/* Stretch an element to full window height */
html,   
body {  
    height: 100%;  
}  

/* Applying different styles based on file format */

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;  
} 

/* Cross-browser image grayscale */
<svg xmlns="http://www.w3.org/2000/svg">  
    <filter id="grayscale">  
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>  
    </filter>  
</svg> 

img {  
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */  
    filter: gray; /* IE6-9 */  
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */  
}  


/* ANimated button gradient background */
button {  
    background-image: linear-gradient(#5187c4, #1c2f45);  
    background-size: auto 200%;  
    background-position: 0 100%;  
    transition: background-position 0.5s;  
}      
button:hover {  
    background-position: 0 0;  
}  

/* Showing box shadow only on one or two sides */
.box-shadow {  
    background-color: #FF8020;  
    width: 160px;  
    height: 90px;  
    margin-top: -45px;  
    margin-left: -80px;  
    position: absolute;  
    top: 50%;  
    left: 50%;  
}  
.box-shadow:after {  
    content: "";  
    width: 150px;  
    height: 1px;  
    margin-top: 88px;  
    margin-left: -75px;  
    display: block;  
    position: absolute;  
    left: 50%;  
    z-index: -1;  
    -webkit-box-shadow: 0px 0px 8px 2px #000000;  
       -moz-box-shadow: 0px 0px 8px 2px #000000;  
            box-shadow: 0px 0px 8px 2px #000000;  
}

/* Wrapping long text context */
pre {  
    white-space: pre-line;  
    word-wrap: break-word;  
}