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).

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.

1
2
3
4

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

The higher the z-index, the further in front it will be. For example, if element-1has a z-index of 5000 and element-2has a z-index of 7500, element-2 will stack on top of element-1. Negative values are allowed as well.

3. Style links – based on function

This will do exactly what it sounds like it does: style links based upon its type and function.

9. Load image (to let people know something’s loading)

This tip is also applicable to banner ads (as seen at Songr with AdBlock on – I know, shameless plug). Simply put a background with “Hey, AdBlock kills our revenues” or something similar and wrap the ad in that class (don’t use the word “ad” in the class name, as it will be blocked by AdBlocks – be creative, I like combining colors with animals).

Conclusion

This list shouldn’t constitute the majority of your CSS snippet tookbox, rather, it should be your spring board to seek out more. A couple places to start include Snipplr and CSS-Trick’s own CSS gallery. If I missed a CSS snippet, don’t hesitate to drop a comment below.

Changry

Changry is a blog dedicated to providing resources to developers, designers, and webmasters alike. In other words, it’s a place for me to dump my thoughts in a way that people can enjoy (or at least tolerate).