PewPew 2.0 - Blogs about css

Webmonkey is Back.

Webmonkey is back. And it's in wiki-form. Webmonkey was the gold standard site for web site makers back in the late 90s and early 00s. A few years laster, Webmonkey was bought, and as the bubble burst, it's content became dusty and decrepit. It had a short rebirth, then died again. But now Wired's got Webmonkey back, and there seems to be a great commitment keep it new, and try to bring it back as a forerunner of web tech news and how-tos. I'm very exited. Welcome back, my old friend.

0 comment(s).

Permalink

Naked, Not Broken.

No, fair reader, my website is not broken. It's appearing exactly as I mean it to. For today is CSS Naked Day, where super-geeky websites all over the tubes throw off their styling and unabashedly reveal their content to you.

Also, I've released a lovely new tutorial in my articles that will walk you through creating a fancy content box using CSS and images. Ta ta!

0 comment(s).

Permalink

Fancy HRs with CSS.

Lest you think that this blog is only about regular human activities, I present you with a CSS method for using graphics as your hr. My apologies to the regular humans.

Suppose you've got a lovely little graphic that you'd like to use for an HR in place of the boring old default straight line in most browsers. How do you implement your new graphic in a consistent and semantic method?

It's relatively simple to style a fancy HR in most browsers, including IE7:

<style type="text/css"> hr.fancy { background: url(images/hr.gif) center center no-repeat; height: 20px; border: none; margin: 2em 7em; } </style>

Here are the results:

---

Let us also speak of the 800 pound gorilla in the room. Internet Explorer 6, and presumably lower versions, will not display this correctly without assistance. You will need to add the following dandy patch by Borgar.

<!--[if lte IE 6]> hr.fancy { display: list-item; list-style: url(images/hr.gif) inside; filter: alpha(opacity=0); width: 0; } </style> <![endif]-->

0 comment(s).

Permalink

Classy Links.

This is a pretty simple bit of code, but I though it might come in handy as it was something I hadn't covered yet. Here is one method of using CSS to apply a different appearance to some of your links using CSS.

<style type="text/css"> a.alternate { color: #FFFF99; } a.alternate:visited { color: #CCCCFF } a.alternate:hover { color: #6699FF; } a.alternate:active { color: #990033; } </style> <a href="#" class="alternate">Alternatly styled link</a>

This is a regular link. Only this middle link will have a non-standard style. This is another regular link.

The above method uses a class (the ".alternate" part) combined with the psuedo-class selectors (the ":hover" part) that are used in links. Alternately, you could group the links inside an element with an id or a class, and select them as shown in the following code.

<style type="text/css"> #nav a { color: #FFFF99; } #nav a:visited { color: #CCCCFF } #nav a:hover { color: #6699FF; } #nav a:active { color: #990033; } </style> <div id="nav"> <a href="#">Alternately styled link</a> <a href="#">Alternately styled link</a> <a href="#">Alternately styled link</a> </div>

Once you've selected your links, you can add any style declarations that you wish. I've specified only the foreground color (the text color of the link) here for simplicity.

Just remember to use specify your link declarations in the following order:

• Plain Ole Link
• Visited
• Hover
• Active

This order will ensure that the cascading styles for links are displayed as as you expect them to.

0 comment(s).

Permalink

It's Difficult.

Learning to build websites using standards based, accessible X/HTML and CSS is like learning to drive a manual transmission hovercar. It is quite difficult if you're coming from a table based design philosophy. It's floaty, and mysterious, and nothing behaves quite like it should. But doing so really is worthwhile - even Newsweek thinks so. (Supposedly, they did an interview with famous web-guy Jeffrey Zeldman, but I can't find the article online.)

In other news, we have LOLed our cats. Just a little bit. Please don't call the ASPCA.

0 comment(s).

Permalink