Tasty Bits of CSS Snippets


You can hack and tweak your code all day or you can Google and find countless articles of CSS tips and tricks that are dated in 2005, or you can grab some recent snippets here:

1. Add Shadow to Text

.text-shadow {   text-shadow: 2px 2px 4px #666;}

Make that text jump-off the page!


2. Add an Image-Based Border

#border-image-style {
   /* 3 types of border exist repeated, rounded or stretched (repeat / round / stretch) */
   -moz-border-image:url(border.png) 30 30 stretch ;
   -webkit-border-image:url(border.png) 30 30 stretch;

Just bring your own image, add water, and presto! Add any border to any object using the border-image property.


3. Add Shadows to Borders and Images

box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

This gives you just the right hint of 3D-ish-ness.


4. Rounded Corners

   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px; /* future proofing */
   -khtml-border-radius: 10px; /* for old Konqueror browsers */

When you tweak these values it applies to all four corners. This adds a really nice rounded corner to CSS3-based elements.


5. Border POWER!

#Bottom_Right {
   height: 65px;
   -moz-border-radius-bottomright: 50px;
   border-bottom-right-radius: 50px;
#Bottom_Left {
   height: 65px;
   -moz-border-radius-bottomleft: 50px;
   border-bottom-left-radius: 50px;
#Top_Right {
   height: 65px;
   -moz-border-radius-topright: 50px;
   border-top-right-radius: 50px;
#Top_Left {
   height: 65px;
   -moz-border-radius-topleft: 50px;
   border-top-left-radius: 50px;

This works like the previous, but this gives you the ability to tweak individual corners. Can you feel the power?


6. The Gradient

background: -webkit-gradient(linear, left top, left bottom, from(#74b8d7), to(#437fbc));
background: -moz-linear-gradient(top,  #74b8d7,  #437fbc);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#74b8d7', endColorstr='#437fbc');

With CSS3, you no longer need a background image for gradients – you can use CSS to add a gradient to the background of something. Change the color hex values (“74b8d7″ and “437fbc”) to the color gradient you want.


7. Print Page Breaks


This isn’t for the few that print to paper, this is a function for the many that print to PDF.


8. Pull-Quotes

.pull-quote {
   width: 200px;
   float: right;
   margin: 5px;
   font-family: Georgia, "Times New Roman", Times, serif;
   font: italic bold #ff0000 ;

Instead of formating text every time you want a pull-quote, just drop this bomb.


I hope these snippets come in handy. I’ve used a few myself, and they’re golden.

More, tomorrow.

[via SpeckyBoy]


Eric Dye

I am a blogger, business owner and lover of coffee. I spend most of my time as Programs Director for Open Church, but you'll also find me as a writer and editor for ChurchMag, as well as working on Live Theme and ChurchMag Press. All while enjoying my family and sipping espresso in Italy.


What would you like to say?

Your email address will not be published. Required fields are marked *