I was checking out this site design review of Magnitude by CSS Drive and thinking how strangly they created the drop cap effect in their pages. They make use of that effect in almost all the pages and every single time they added an image for the very drop cap letter.
Man, that’s just not right.

I would expect a bit more from web+interactive company like theirs to show more professionalism in their site. After all the first impression sometime counts and in this case the company portfolio site would determine the reputation and skills behind it. Anyway I like the design, very artistic with interesting decay looking text and I like the left menu. The only problem I see is Drop Cap characters.

If I have to do drop cap I would rather use css for that. I’ve tested it and it’s really easy. You need only 3 lines or so.
Well for my own note as well as for you (if you wanna know) the CSS code for Drop Cap effect and implementation as shown below.

#dropcap
{
	float: left;
        font-size:300%;
        font-weight: bold;
        line-height:50px;
}

<p><span id="dropcap">W</span>orem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>

There see short and sweet. No need to create image characters everytime you wanna make that effect. Ok you just have to adjust font size and line height according to your need.
That’s it, I gotta sleep.
Cheers.

Well ofcourse I know my site won’t even near web 2.0 but it’s always good to test and see where you stand.
Seem like I stand far off. 7/36.
This Web 2.0 validator is still in beta with 36 check list/rules. I’m not sure it’s a real validator or not cos’ some points are just silly but some are good points to note.

• Uses inline AJAX ?
• Is in public beta?
• Uses python?
• Uses the prefix “meta” or “micro”?
• Is Shadows-aware ?
• Uses Cascading Style Sheets?
• Uses Google Maps API?
• Refers to mash-ups ?
• Attempts to be XHTML Strict ?
• Appears to be web 3.0 ?
• Mentions startup ?
• Has favicon ?
• Appears to use AJAX ?
• Refers to the Web 2.0 Validator’s ruleset ?
• Mentions Dave Legg ?
• Makes reference to Technorati ?
• Appears to be built using Ruby on Rails ?
• Refers to VCs ?
• Refers to Flickr ?
• Mentions Nitro ?
• Links Slashdot and Digg ?
• Mentions Cool Words ?
• Has prototype.js ?
• Creative Commons license ?
• Use Catalyst ?
• Uses microformats ?
• Actually mentions Web 2.0 ?
• Refers to web2.0validator ?
• Refers to del.icio.us ?
• Refers to Rocketboom ?
• Mentions RDF and the Semantic Web?
• Validates as XHTML 1.1 ?
• References isometric.sixsided.org?
• Mentions 30 Second Rule and Web 2.0 ?
• Appears to have Adsense ?
• Uses the “blink” tag?

Believe me, I don’t understand/heard of some of those terms used in above check list.
But I could definitely improve my current point of 7 to a few more by doing these:
# Refers to web2.0validator
# Validates as XHTML 1.1
# Mentions 30 Second Rule and Web 2.0
# Mentions Cool Words (what the heck! like what?)
# Mentions Dave Legg (Ok… Dave Legg!!)
# Actually mentions Web 2.0 (Web 2.0, Web 2.0, Web 2.0)

Link: Web 2.0 validator

Something to try out this week. (I’ll try)
This one is interesting article on style sheet switcher with Ajax.

What I did to achieve this was used server-side cookies instead of JavaScript cookies. Hence, PHP. However this isn’t a “PHP style switcher” – which is where Ajax comes in. For the extreme technical folks, no, there is no xml involved here, or even a callback response. I only say Ajax because everyone knows what ‘it’ means. With that said, it’s the Ajax that sets the cookies ‘on the fly’.

I’ve read “Alternative Style: Working With Alternate Style Sheets”
by Paul Sowden article before and did tested it but never really make use of it.
I’m gonna read that again and also this new Ajax Style Switcher article “Introducing UDASSS!”

I scanned through the article and it’s pretty good one, the only thing I dont like about it is the name.
Unobtrusive Degradable Ajax Style Sheet Switcher!
Very hard for me to pronounce and remember.
Well UDASSS is alrite ofcos.

To Read:
Flash of Unstyled Content (FOUC)
Alternative Style: Working With Alternate Style Sheets
Introducing UDASSS!

Week 7: Link 2 is up at Westciv.com.

Last week we learned the basics of linking, covering links to files in the same directory, and relative URLs. This week we continue looking at links, moving on to absolute URLs, links to named anchors and links to other resources.

Link: Html and Xhtml for Css: Week 7

Remember there was a short course, “HTML and XHTML for CSS”, going on at Westciv. It’s been a long time since last update and finally this week course is up, week 6: Link 1.

You can also find week 5: Organizing and managing files and directories notes, incase if you like to review on that.

Please do accept my apologies for the long delay. The good news is that we are back on track, and hopefully it can be business as usual until the end of the course.

This week article talks about 2 types of linking: Absolute linking and Relative linking with lots of diagrams and excersises to work on.

This is very neat and clean CSS image swapping. Before we(I) used to do the same effect using dreamweaver image swap behaviour which creates lots of messy javascript code. Thanks to the creator, we can now switch easily with his cool CSS.

This is a pure CSS image switcher that is lightweight and standards-compliant. It could be used for a gallery or any similar function. Any number of list selection options can be used so long as the width can accommodate them.
Simple CSS Image Switcher

Link via: CSS Beauty

I found this nice article over at Evolt.org, Trenton Moss featuring the nicely compiled article on CSS tricks that you might want to check out.
The followings are the summary of ten tricks he has given.
Read the complete article here: Ten CSS tricks you may not know.

1. CSS font shorthand rule
2. Two classes together
3. CSS border default value
4. !important ignored by IE
5. Image replacement technique
6. CSS box model hack alternative
7. Centre aligning a block element
8. Vertically aligning with CSS
9. CSS positioning within a container
10. Background colour running to the screen bottom

It’s good to go through the comments also as they added new tips and corrections. Very helpful piece of information.