Aug 8, 2009

Cool CSS Tricks

1. Center verticaly using line-height


div {
height:100px;
}

div * {
margin:0;
}

div p {
line-height:100px;
}



2. Center horizontally


div {
margin:0px auto;
}

3. Reset Stylesheet

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}




4. Font Sizing


body {
font-size: 62.5%;
line-height: 1.5em;
}


5. Wrap around the containing divs


#container {
overflow:auto;
}

OR

#container {
overflow:hidden;
}


6. CSS3 border-radius property

Firefox:

#container {
-moz-border-radius: 20px;
}


Safari, Chrome:

#container {
-webkit-border-radius: 20px;
}

1 comment:

Maja Dumitraskovic said...

opa! ovo je cool! :))
zatrebace sigurno..