CSS snippets are a great way to save time while developing CSS on your site. If you frequently find yourself using the same batch of CSS, it’s probably a good idea to save them to some sort of snippet library. If you don’t already have a library of CSS snippets, here are a few to get your collection going:
1. Rounded Corners:
Standard:
-moz-border-radius: 10px;
-WebKit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
Individual Corners:
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;
2. Box Shadows
.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}
3. Text Shadows:
p { text-shadow: 1px 1px 1px #000; }
Multiple shadows:
p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }
3. Text Rotation:
.rotate {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
4. *BONUS HTML SNIPPIT* Make IE6 Crash (My favorite, even though I’ve yet to use it):
<style>*{position:relative}</style><table><input></table>
What are some of your favorite CSS snippets? Feel free to share!
