New CSS Techniques For Your Next Web Design
5. Other Cool Techniques, Tips, and Tricks
Below are a ton of other techniques and tricks you can use to really make your CSS stand out.
3D Cube Using CSS Transformations
This is probably one of the coolest CSS techniques I’ve seen. This tutorial shows how to build a 3D cube with text or other content on each side of the cube. It does it entirely with CSS; there’s no canvas, SVG, imagery, or JavaScript. There’s even instructions for creating multiple shaded cubes on a single page. The only real drawback is that it’s only supported in recent WebKit and Gecko browsers.
Nine Ways to Obfuscate E-mail addresses compared
This article gives two different methods for obfuscating email addresses with CSS. One involves using the display:none attribute while the other involves reversing the code. Both supposedly cut the amount of spam received to zero.
Forms Markup and CSS - Revisited
Here is a CSS template for form styling. The markup of the form is based on the Accessible Forms Markup from Derek Featherstone. The template is semantically correct, flexible and accessible.
iPhone CSS
A very short and simple tutorial on how to make certain elements of you CSS render differently on the iPhone. It’s surprisingly simple and easy to implement.
Improving Your Process: Faster Front End Development
While this post offers plenty of information on things other than CSS, it also offers some great advice for improving your efficiency with CSS: mainly, write your CSS in blocks. This technique is usually done progressively as you get used to coding in this manner. The steps are simple, though, and it’s sure to make you a much faster designer.
Image-Free CSS Tooltip Pointers - A Use for Polygonal CSS?
This tutorial explains how to create triangles (to be used for pointers) using CSS, without the need for any images. The end result is great, though it only works for single-color images. The CSS used is incredibly simple while still being really versatile. You can create a triangle of almost any size using just a single div.
How I Implemented My Cookie-Based Switcher
While not strictly a CSS trick, this post shows how to create a cookie-based CSS theme switcher for WordPress. It allows users to choose to use a different theme when they visit the blog while allowing new users to see a nice, simple, easy-to-read theme that puts the primary focus on the content.
CSS Swap Hover Effect
This great technique will replace any image with another image when you hover over it. The tutorial shows it applied to a portfolio site, but the possibilities are endless. It’s very slick and cross-browser compatible (though IE6 does require a bit of a workaround, as usual).
CSS Stacked Bar Graphs
Here’s a tutorial for creating stacked bar graphs using CSS and some images. It’s a pretty in-depth process, but the result looks fantastic.
Changing HTML Images on Hover / A Quick CSS Trick
Here’s a quick and easy CSS technique for swapping out images on hover. It’s pure CSS, no JavaScript required. The biggest issue this technique solves is that when the page is printed, the base image is the only one that shows up.
10 Properties that Were Impossible to Implement in IE6
This collection of CSS tricks shows how to implement a number of styles that were supposedly impossible in Internet Explorer 6. It includes tricks for opacity, fixed positions, and text shadow, among others.
10 Challenging But Awesome CSS Techniques
Sometimes the coolest things just take a bit more effort. This collection of tutorials covers ten different CSS techniques that aren’t exactly easy to achieve, but the end results are well worth the extra effort. Techniques include pull quotes, dynamic variables, and style changes based on the time of day or even the weather, among other awesome examples.
Further Resources
- CSS3 Exciting Functions and Features: 30+ Useful Tutorials from Noupe
Covers more than 30 new features and functions CSS3 is capable of. - A Harsh CSS Environment for Testing Widgets
This stylesheet creates an incredibly harsh environment for testing your widgets. If it looks okay here, it will likely look okay anywhere. - 24 CSS (in some cases with jQuery) Navigation and Menu Tutorials
A huge list of awesome navigation and menu examples, with links to the tutorials. - 15 CSS Tricks That Must Be Learned
Covers a variety of techniques, from fixing PNG transparency in IE6 to using CSS to fight spam.