A Few CSS Snippits That I Can’t Live Without

Wed, 07/06/2016 - 11:41 -- admin

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:


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





What are some of your favorite CSS snippets? Feel free to share!