A Couple Life Saving CSS Snippets for the Designer

A Couple Life Saving CSS Snippets for the Designer

There are those times when you want to achieve an effect in your web design that is quite possible to do with Photoshop, but you just want to do with pure CSS. If that’s ever the case, then here’s a plethora of CSS snippets for you to use (if that’s not the case, you probably need to start coding more).

Other snippets that don’t substitute for Photoshop are just convenient and probably useful (to some extent).

1. Transparency for everybody
For backgrounds, I still utilize alpha transparency (despite IE6′s lack of support), but for simpler hover overs, CSS is the best tool.

.nudist {
	opacity: 0.5;           /* safari, opera */
	filter: alpha(opacity=50); /* internet explorer */
	-khtml-opacity: 0.5;      /* khtml, safari */
	-moz-opacity: 0.5;       /* firefox / mozilla */
}

Code (markup):

2. Bring it up front
Sometimes, containers fly to the background or are partially obstructed by another element. This rings particularly true with fixed userbars at the top of the screen since they precede all the other elements on the page. In this case, use z-index to force stack positioning.

.stacky {
	position: relative; /* also absolute or fixed */
	z-index: 9999; /* controls its stacked position */
}

Code (markup):

More tips and tricks here

 

Unless you're still supporting Safari 1/lower, you don't say -khtml anymore. Safari and other webkit browsers have supported the non-prefixed opacity for at least six YEARS... Likewise you probably don't need to say -moz anymore either, since that was added when Firefox 4.0 was released... so for about a year now. (Though I'll admit I'm still using that one out of habit).

The latter one, I just hope you're not advocating putting that in a class and adding the class, instead of adding it to the native element... since that would be just presentational use of classes, meaning a lack of separation of presentation from content.

From that site, 'style links' using those selectors are NOT yet reliable cross-browser, and floating a letter is just asking for headaches, so inline-block is usually a better approach. NOT that one should really be declaring font sizes in px... The loader image is a waste of bandwidth in most cases since it's just something else that has to load -- quite often loading AFTER the image has depending on the render order... and Meyers fat steaming framework that people CALL a reset is one of the largest causes of broken websites and needless code bloat out there. You need more than a quarter of a K as a reset, you're no longer resetting, you're setting up.

BTW if that's your site, the fixed sidebar is too tall for my netbook so it's chopped off (which is why position:fixed usually sucks), the menu alignment is broken on large font machines, the page took a ridiculous amount of time to load, probably thanks to the endless pointless redundant use of the STYLE attribute that's so bad, you might as well go back to using the FONT tag for all the good CSS did you.

Just saying.