CSS3 Tricks

CSS Media query and conditional styles.css

/* Media query and conditional styles
 *---------------------------------------------*/

/*styles for 800px and up!*/
@media only screen and (min-width: 800px) {
    body{background-color: #666; }
        #container{width: 320px; min-height: 460px; background-color: #fff; margin: 0px auto 60px;}
}/*/mediaquery*/


/* iPhone 4, Opera Mobile 11 and other high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
    #container{background-color: #fff; margin: 0 auto; padding-bottom: 60px}
}

CSS3 Gradient Button.css

/* 
 * Small (collected) snippets of useful css tricks 
 * 
 * @author: Anis uddin Ahmad <[email protected]>
 * @link  : http://ajaxray.com
 */

/* CSS Gradient button
 *---------------------------------*/

a.button{
    background-color: #AB3645;
    border-radius: 6px;
    border: 1px outset #AB3645;
    display: inline-block;
    padding: 0 20px; margin: 5px;
    font-weight: bold;
    box-shadow: 1px 1px 2px #777;

    /* Create gradient background */
    background: -webkit-linear-gradient(top, #bf3b4a, #8c2b36);
    background: -moz-linear-gradient(top, #bf3b4a, #8c2b36);
    background: -ms-linear-gradient(top, #bf3b4a, #8c2b36);
    background: -o-linear-gradient(top, #bf3b4a, #8c2b36);
}