CSS

Gradients

{code type=”css”}
background:#eeeeee;
background:-moz-linear-gradient(0% 100% 90deg,#dddddd,#eeeeee);
background:-webkit-gradient(linear,0% 0,0% 100%,from(#eeeeee),to(#dddddd));
background:-o-linear-gradient(#eeeeee, #dddddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#eeeeee, endColorstr=#dddddd);
{/code}

Rounded Corners (Border-radius)

{code type=”css”}
border: 1px solid #000000;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
{/code}

Box Shadow

{code type=”css”}
box-shadow: -1px 1px 0px #fff;
-moz-box-shadow: -1px 1px 0px #fff;
-webkit-box-shadow: -1px 1px 0px #fff;
{/code}

Text Rotation

{code type=”css”}
#rotate_45 {
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
/*
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod=’auto expand’);
*/
}
{/code}

Even though this does not validate it is a nice visual effect for Zilla based browsers

 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;

Psst: Internet Explorer users will not see the effect because IE does not support the radius effect.

Firefox adds dotted line around links, this was not so obvious before since in the past since a link will bring the user to a new page. Now with increasing JavaScript functions on a web page, a link doesn’t by default bring user to a new page, without page reload, the dotted line can look pretty ugly, especially link around images. However with a CSS trick I recently discovered, this problem can be fixed.

{code type=css}outline: none;{/code}
And/Or

{code type=css style=”text-decoration: line-through;”}-moz-outline-style: none;{/code}

Firefox 3.6 doesn’t support the -moz-outline css style anymore.
All instances of -moz-outline must now be followed by a CSS2 outline style, e.g.
{code type=css}.FremontTech .Selector {
outline: none;
}{/code}

FireFox, Webkit, Opera use:

{code type=css}-webkit-transform: rotate(-45deg); //Webkit
-moz-transform: rotate(-45deg); // FireFox
-o-transform: rotate(-45deg); // Opera 10.5

display:inline-block;
{/code}

In order to perform a transformation, the element has to be set to display:block or display:inline-block. In this case, just add the declaration to the span that you want to rotate.

For Internet Explorer 5.5 to 8 use:

{code type=css}filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);{/code}

The rotation property of the BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively.

The BasicImage filter has other properties that can be set such as mirroring, masking, greyscale and others. Alternatively, you can take advantage of the Matrix filter

In action

Opera has -o-transform support in 10.50

Google Hosting Fonts

A quick link to Googles Fonts http://code.google.com/webfonts

Decoration

{code type=css}text-decoration:underline{/code}

Text with an underline

Link without an underline

Bold

{code type=css}font-weight: bold;{/code}

This in normal text

Text that is bold

Small Caps

{code type=css}font-variant: small-caps;{/code}

This in normal text

Text with the small caps style applied

Transform Case

{code type=css}text-transform: uppercase;{/code}

This in normal text

Text with the uppercase transform applied

background: #color url(‘image.png’) repeat x y attachment;

Color: #ff0000 or red
URL: path to file
Repeat: repeat-x repeat-y no-repeat repeat
X = horizontal 10px 50% left right
Y = verticle 10px 50% top bottom
attachment: fixed

{code type=css}background: #006699 url(‘image.png’) no-repeat 0 0 fixed;{/code}

Typical Browsers Default Font Sizes

H1 – 32px – Bold
H2 – 24px – Bold
H3 – 20px – Bold
H4 – 18px – Bold
H5 – 13px – Bold
H6 – 11px – Bold
normal – 16px

{code type=css}
ul.circle {list-style-type:circle}
ul.square {list-style-type:square}
ol.upper-roman {list-style-type:upper-roman}
ol.lower-alpha {list-style-type:lower-alpha}
{/code}

Property Values

{code type=css}<div style=”height:400px;
background-image: url(‘/bgrd-foo.png’);
background-position: center top;
background-repeat:no-repeat;
background-attachment: fixed;”>{/code}

Im not sure why I had to spend so long hunting this info down, but here it is:

Browser Specific Style Sheets: 

{code type=hml}<!–[if !IE]>This is NOT Internet Explorer<![endif]–>
<!–[if IE]>This is Internet Explorer<![endif]–>
<!–[if Gecko]>This is Gecko based browsers<![endif]–>{/code}

{code type=hml}<!–[if Webkit]>This is Webkit based browsers<![endif]–>
<!–[if Opera]>This is Opera<![endif]–>
<!–[if IEMac]>This is Internet Explorer for the Mac<![endif]–>
<!–[if Konq]>This is Konqueror<![endif]–>
<!–[if IEmob]>This is IE mobile<![endif]–>{/code}

{code type=hml}<!–[if PSP]>This is Playstation Portable<![endif]–>
<!–[if NetF]>This is Net Front<![endif]–>{/code}

{code type=hml}<!–[if IE]>This is Internet Explorer<![endif]–>
<!–[if IE 5]>This is Internet Explorer 5<![endif]–>{/code}

{code type=hml}<!–[if IE 5.0]>This is Internet Explorer 5.0<![endif]–>
<!–[if IE 5.5]>This is Internet Explorer 5.5<![endif]–>
<!–[if IE 6]>This is Internet Explorer 6<![endif]–>
<!–[if IE 7]>This is Internet Explorer 7<![endif]–>
<!–[if IE 8]>This is Internet Explorer 8<![endif]–>{/code}

{code type=hml}<!–[if gte IE 7]>This is Internet Explorer 7 and up<![endif]–>
<!–[if lt IE 7]>This is Internet Explorer less than 7<![endif]–>
<!–[if lte IE 7]>This is Internet Explorer less or equal to 7<![endif]–>
<!–[if gt IE 7]>This is Internet Explorer greater than 7<![endif]–>{/code}

{code type=hml}! [if !IE] The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression.
lt [if lt IE 5.5] The less-than operator. Returns true if the first argument is less than the second argument.
lte [if lte IE 6] The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
gt [if gt IE 5] The greater-than operator. Returns true if the first argument is greater than the second argument.
gte [if gte IE 7] The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
( ) [if !(IE 7)] Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
& [if (gt IE 5)&(lt IE 7)] The AND operator. Returns true if all subexpressions evaluate to true
| [if (IE 6)|(IE 7)] The OR operator. Returns true if any of the subexpressions evaluates to true.{/code}

Here is the basic technique for an IE-Only stylesheet:

{code type=hml}<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”/ie-only.css” />
<![endif]–>{/code}

The opposite technique, targeting only NON-IE browsers:

{code type=hml}<!–[if !IE]>
<link rel=”stylesheet” type=”text/css” href=”/not-ie.css” />
<![endif]–>{/code}

If you need to get down and dirty with specific versions of IE, here are a few examples.

IE 7 ONLY:

{code type=hml}<!–[if IE 7]>
<link href=”/IE-7-SPECIFIC.css” rel=”stylesheet” type=”text/css”>
<![endif]–>{/code}

IE 6 ONLY:

{code type=hml}<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”/IE-6-SPECIFIC.css” />
<![endif]–>{/code}

IE 5 ONLY:

{code type=hml}<!–[if IE 5]>
<link rel=”stylesheet” type=”text/css” href=”/IE-5-SPECIFIC.css” />
<![endif]–>{/code}

IE 5.5 ONLY:

{code type=hml}<!–[if IE 5.5000]>
<link rel=”stylesheet” type=”text/css” href=”/IE-55-SPECIFIC.css” />
<![endif]–>{/code}

VERSION OF IE VERSION 6 OR LOWER: (I find this one pretty handy)

{code type=hml}<!–[if lt IE 7]>
<link rel=”stylesheet” type=”text/css” href=”/IE-6-OR-LOWER-SPECIFIC.css” />
<![endif]–>{/code}

Why would you want to use these conditional stylesheets?

• It’s more future-proof than hacks. A new browser or a new version of a browser may come along one day that wrecks up interprets your hacks in a strange way and will mess up your styling. That’s no good! The solution here would be to declare a min-height like normal in your real stylesheet, then declare a height (the workaround) in an IE-6-and-Lower stylesheet.
• It keeps your CSS clean. And valid! If having CS code that passes W3C snuff is important to you, this is the way to go
• Expandability. If a new browser comes along that you want to also support, you can create a conditional statement and stylesheet for that and you are all set, instead of re-tweaking your existing stuff.

If you think it is overkill for you to have IE-Specific stylesheets, you can use hacks to make things happen. Again, I don’t really recommend this, but this is how it’s done.

IE-7 ONLY:

{code type=css}html #div {
*height: 300px;
}{/code}

NON IE-7 ONLY:

{code type=css}#div {
_height: 300px;
}{/code}

HIDE FROM IE 6 AND LOWER:

{code type=css}#div {
height/**/: 300px;
}{/code}

HIDE FROM IE 6 AND LOWER: (another way)

{code type=css}html > body #div {
height: 300px;
}{/code}