Web Wisdom

Archive for the ‘CSS’ Category

Wednesday, August 13th, 2008

The CSS:

.b1h, .b2h, .b3h, .b4h, .b2bh, .b3bh, .b4bh{font-size:1px; overflow:hidden; display:block;}

.b1h {height:1px; background:#939393; margin:0 5px;}

.b2h, .b2bh {height:1px; background:#7FB539; border-right:2px solid #939393; border-left:2px solid #939393; margin:0 3px;}

.b3h, .b3bh {height:1px; background:#7FB539; border-right:1px solid #939393; border-left:1px solid #939393; margin:0 2px;}

.b4h, .b4bh {height:2px; background:#7FB539; border-right:1px solid #939393; border-left:1px solid #939393; margin:0 1px;}

.b2bh, .b3bh, .b4bh {background: #FFFFFF;}

.headh {background: #7FB539; border-right:1px solid #939393; border-left:1px solid #939393;}

.headh h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}

.contenth {background: #FFFFFF; border-right:1px solid #939393; border-left:1px solid #939393; border-top:1px solid #939393;}

.contenth div {margin-left: 12px; padding-top: 5px;}

The HTML:

<h3>Header Goes Here</h3>

</div>

<div>Content Goes Here</div>

</div>

The source:

http://blog.yosle.com/2007/09/20/css-round-corners/

Check this out: the latest in CSS templating. It is a listing of common styles for reuse.

Also check out Meyer’s resets. These ensure that browsers have the same defaults for the styles of many elements:

Google’s hartija print style sheet is totally worth a look too:

- and if you find CSS frameworks useful, check out Blueprint et al:

If you need to roll up your sleeves and get down and dirty and target browsers, check this out:

For choosing fonts:

How many machines have certain fonts? http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml

Windows/Mac equivalent fonts http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Embed fonts: http://www.alistapart.com/articles/cssatten

For working with grids:

Dean Edwards’ script that makes IE behave:

Link style generator:

Archive for the ‘CSS’ Category