Blog Archives

Even though this does not validate it is a nice visual effect for Zilla based browsers -moz-border-radius: 5px; -webkit-border-radius: 5px; This box Has a rounded corner radius of 15px This box Does not Psst: Internet Explorer users will not see the effect because IE does not support the radius effect.
Read More

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;{/
Read More

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
Read More

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
Read More

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}
Read More

{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}
Read More

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]&
Read More