A Few CSS Snippits That I Can’t Live Without

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

CSS snippits 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 snippit library. If you don’t already have a library of CSS snippits, 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 snipits? Feel free to share!