CSS & CSS3 Notes, Constantly Used, Very helpful.

css-notes.css

/*
 * CSS & CSS3 Notepad
 * 
 * These were made for my personal usage, as I constantly use them.
 * I have decided to open-source the file.
 *
 * Some is very useful, other things may be re-dundant.
 *
 * Once again, these are simply my css notes.
 *
 * @author Nijikokun <[email protected]>
 * @copyright (c) Nijikokun 2011
 * @website http://nijikokun.com
 */

/**
 * Importing CSS
 *
 *  You can import using the method below, also, 
 *  the word beside it is the type of css you are importing.
 *
 *  that word can be used with @media to target specific browsers / settings.
 */
@import url("otro.css") screen;

@font-face {
    /**
     * Font-face
     *
     *  To utilize font face, unescape below and use a _LOCAL_ .ttf (most-widely supported format) file.
     *  Firefox note: It must be a local (same server, directory location) file.
     */
/*
   font-family: 'Graublau Web';
   src: url('GraublauWeb.eot');
   src: local('?'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
*/
}

@highlighted-text {
    /**
     * Selection
     *
     *  You know when you select text on a page, or say even in this file, the background and color of the text changes?
     *  These css selectors allow you to control that.
     */
    ::selection {
       color: #000000;
       background-color: #FF0000;
    }

    ::-moz-selection {
       color: #000000;
       background: #FF0000;
    }
}

@input-placeholder {
    
    /* all */
    ::-webkit-input-placeholder  { color: grey; }
    input:-moz-placeholder { color: grey; }

    /* individual: webkit */
    .field::-webkit-input-placeholder { color: grey; }

    /* individual: mozilla */
    .field:-moz-placeholder { color: grey; }
}
 
@multiple-backgrounds {
    /**
     * Multiple Images
     *
     *  These also work with Gradients.
     *  To utilize multiple images/gradients, seperate items via comma (,).
     */
    .multiple-images {
       background: 
        url(image_1.png) top left no-repeat, 
        url(image_2.png) bottom left no-repeat, 
        url(image_3.png) bottom right no-repeat;
    }
}

@columns {
    /**
     * Columnizing
     *
     *  Allows you to split a div into (x) amount of sections.
     *  Below is an example of three.
     */
    .columns-three {
       text-align: justify;
      -moz-column-count: 3;
      -moz-column-gap: 12px;
      -moz-column-rule: 1px solid #c4c8cc;
      -webkit-column-count: 3;
      -webkit-column-gap: 12px;
      -webkit-column-rule: 1px solid #c4c8cc;
    }   
}
 
@opacity {
    /**
     * Opacity
     *
     *  Cross-browser opacity settings.
     */
    .opaque {
       filter:alpha(opacity=50);
      -moz-opacity:0.5;
      -khtml-opacity: 0.5;
       opacity: 0.5;
    }
}

@transitions {
    /**
     * Transitions
     *
     *  Transitions are an amazing thing in CSS3
     *  to utilize them you have to quote 4 different browser specific nodes.
     *
     * Some examples are below.
     */
    .all-easin {
       -webkit-transition: all .5s ease-in;
       -moz-transition: all .5s ease-in;
       -o-transition: all .5s ease-in;
        transition: all .5s ease-in;
    }

        .background-easin {
           -webkit-transition: background .5s ease-in;
           -moz-transition: background .5s ease-in;
           -o-transition: background .5s ease-in;
            transition: background .5s ease-in;
        }

        .color-easin {
           -webkit-transition: color .5s ease-in;
           -moz-transition: color .5s ease-in;
           -o-transition: color .5s ease-in;
            transition: color .5s ease-in;
        }
}

@rounded-borders {
    /**
     * Rounded Borders
     *
     * Rounding borders can get difficult, each browser has a seperate one
     * and none of the wording is consistent.
     * 
     *      -khtml-border-radius: [amount]; - older konq. browsers  
     *      -moz-boder-radius: [amount]; - FF  
     *      -webkit-border-radius: [amount]; - Chrome  
     *       border-radius: [amount]; - FUTURE.  
     *
     * Sides are the part that is inconsistent, below we have given you 3px
     * and 5px as an example of how side naming is very difficult to memorize.
     */
    .rounded-three{
       -khtml-border-radius: 3px;
       -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
        border-radius: 3px;
    }

        .rounded-three-top {
           -webkit-border-top-left-radius: 3px;
           -webkit-border-top-right-radius: 3px;
           -moz-border-radius-topleft: 3px;
           -moz-border-radius-topright: 3px;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }
        
        .rounded-three-bottom {
           -webkit-border-bottom-right-radius: 3px;
           -webkit-border-bottom-left-radius: 3px;
           -moz-border-radius-bottomright: 3px;
           -moz-border-radius-bottomleft: 3px;
            border-bottom-right-radius: 3px;
            border-bottom-left-radius: 3px;
        }
        
        .rounded-three-left {
           -webkit-border-top-left-radius: 3px;
           -webkit-border-bottom-left-radius: 3px;
           -moz-border-radius-topleft: 3px;
           -moz-border-radius-bottomleft: 3px;
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }
        
        .rounded-three-right {
           -webkit-border-top-right-radius: 3px;
           -webkit-border-bottom-right-radius: 3px;
           -moz-border-radius-topright: 3px;
           -moz-border-radius-bottomright: 3px;
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
        }

    .rounded-five {
       -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
        border-radius: 5px;
    }

        .rounded-five-top {
           -webkit-border-top-left-radius: 5px;
           -webkit-border-top-right-radius: 5px;
           -moz-border-radius-topleft: 5px;
           -moz-border-radius-topright: 5px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        
        .rounded-five-bottom {
           -webkit-border-bottom-right-radius: 5px;
           -webkit-border-bottom-left-radius: 5px;
           -moz-border-radius-bottomright: 5px;
           -moz-border-radius-bottomleft: 5px;
            border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
        }
        
        .rounded-five-left {
           -webkit-border-top-left-radius: 5px;
           -webkit-border-bottom-left-radius: 5px;
           -moz-border-radius-topleft: 5px;
           -moz-border-radius-bottomleft: 5px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }
        
        .rounded-five-right {
           -webkit-border-top-right-radius: 5px;
           -webkit-border-bottom-right-radius: 5px;
           -moz-border-radius-topright: 5px;
           -moz-border-radius-bottomright: 5px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }
}

@box-shadow {
    /**
     * Box-Shadow
     *
     * Box shadow is unlike text-shadow, most browsers have their own selector/node.
     * Which is quite annoying when you start typing CSS really fast and only do
     * box-shadow and not the rest.
     *
     *      box-shadow: [-left right] [-up down] [blur amount] [color];
     *     -moz-box-shadow: [-left right] [-up down] [blur amount] [color];
     *     -webkit-box-shadow: [-left right] [-up down] [blur amount] [color];
     *
     * Example:
     *
     *      box-shadow: 0 1px 0px white;
     *
     * Inset:
     *
     *  Inset is the inverse of whatever you are doing, it will be >> inside << the box.
     *
     *  Example:
     *
     *      box-shadow: inset 0 1px 0px white;
     *
     */
    .box-shadow-white-bottom {
        box-shadow: 0px 1px white;
       -moz-box-shadow: 0px 1px white;
       -webkit-box-shadow: 0px 1px white;
    }

@text-shadow {
    /**
     * Text-Shadow
     *
     * Text Shadow is easy. All browsers support the single one:
     *
     *      text-shadow: [-left right] [-up down] [blur amount] [color];
     *
     * Example:
     *
     *      text-shadow: 0 1px 0px white;
     */
    .text-shadow-white-bottom {
        text-shadow: 0 1px white;
    }
    
    .text-shadow-black-bottom {
        text-shadow: 0 1px black;
    }
    
    .text-shadow-black-raised {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
    
    .text-shadow-black-indent {
        text-shadow: 0 1px rgba(0, 0, 0, 0.3);
}

@mobile-screens {
    /**
     * Mobile Screen Settings
     *  [min-width: (size)px] and
     *  [max-width: (size)px] and
     *  [orientation: (portrait|landscape)]
     *
     *  Developing for phones? You'll need these:
     */
    @media screen and (max-width: 320px) and (orientation: portrait) { 
        body{
            background: #F0F;
        } 
    }
    
    @media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { 
        body{
            background: #F00;
        } 
    }
    
    @media screen and (max-width: 480px) and (orientation: landscape) { 
        body{
            background: #F04;
        } 
    }
    
    @media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { 
        body{
            background: #F0E;
        } 
    }
}

@browser-specific-targeting {
    /**
     * Browser Specific Targeting
     *
     *  Sometimes you just need to fix a slight issue on another browser.
     *  Maybe some padding, or a margin, or maybe even the background.
     *
     */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
        /* Chrome */
    }
    
    @media all and (min-width: 0px){
        /* Opera */
    }
    
    html:lang(en)>body .classname {
        /* Safari */
    }
    
    html>/**/body .class { 
        /* 
            IE8, 
            Firefox, 
            Safari, 
            Opera, 
            Everything but IE 6,7
        */
    }
     
    html:first-child .class { 
        /* 
            Opera 9.27 and below, 
            Safari 2 
        */
    }
     
    html[xmlns*=""] body:last-child .class { 
        /* Safari 2-3 */ 
    }
     
    body:nth-of-type(1) .class {
        /* 
            Safari 3+, 
            Chrome 1+, 
            Opera 9+, 
            Firefox 3.5+ 
        */ 
    }
     
    body:first-of-type .class { 
        /* 
            Safari 3+, 
            Chrome 1+, 
            Opera 9+, 
            Firefox 3.5+ 
        */
    }
    
    @-moz-document url-prefix(){
        /* Firefox */
    }
    
    .class {
      width:200px; /* All browsers */
      *width:250px; /* IE */
      _width:300px; /* IE6 */
      .width:200px; /* IE7 */
      width:-24px\9; /* IE8 */
    }
}