CODE BASE

Thursday, February 21, 2013

Using Counter for TOC

body
{
counter-reset:section;
}

h1
{
counter-reset:subsection;
}

h1:before
{
counter-increment:section;
content:"Section " counter(section) ". ";
}

h2:before
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}

Using Overflow

element

{

width:110px;
height:110px;
border:thin solid black;
overflow-x:hidden;
overflow-y:hidden;

}

overflow-x: visible / hidden / scroll / auto / no-display / no-content;

Transform Scale & Skew

#myDIV
{
background-color:lightblue;
transform:scaleY(1.1);
}

#myDIV
{
background-color:lightblue;
transform:scale(1.1);
}

#myDIV
{
background-color:lightblue;
transform:skewX(10deg));
}

Transform Rotate

element
{
width:200px;
height:100px;
background-color:yellow;

/* Rotate div */

transform:rotate(7deg);
-ms-transform:rotate(7deg); /* Internet Explorer */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */

}

Background Shorthand Notation

element {

background:

    #fff

    url(image.png)

    no-repeat

    20px 100px

    fixed;

}

element {

background-color: color || #hex || (rgb / % || 0-255);

background-image:url(URI);

background-repeat: repeat || repeat-x || repeat-y || no-repeat;

background-position: X Y || (top||bottom||center) (left||right||center);

background-attachment: scroll || fixed;

}

Navigation List

ul
{
list-style-type:none;
margin:0;
padding:0;
}

li {
display: inline;
padding-right: 10px;
}

Clearfix After

.clearfix:after {

display: block;

clear: both;

visibility: hidden;

line-height: 0;

height: 0;

}

Enable SASS

sass --watch style.scss:style.css
sass --watch custom.scss:./styles/custom.css

Transition of Color

input, textarea {

    width: 280px;
    -webkit-transition: width 1s ease;
    -moz-transition: width 1s ease;
    -o-transition: width 1s ease;
    -ms-transition: width 1s ease;
    transition: width 1s ease;

}

input:focus, textarea:focus {

    width: 340px;

}