Tasty Bits of CSS Snippets

tasty-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!

[via]

2. Add an Image-Based Border

#border-image-style {
   border-width:15px;
   /* 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.

[via]

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.

[via]

4. Rounded Corners

.round{
   -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.

[via]

5. Border POWER!

#Bottom_Right {
   height: 65px;
   width:160px;
   -moz-border-radius-bottomright: 50px;
   border-bottom-right-radius: 50px;
}
 
#Bottom_Left {
   height: 65px;
   width:160px;
   -moz-border-radius-bottomleft: 50px;
   border-bottom-left-radius: 50px;
}
 
#Top_Right {
   height: 65px;
   width:160px;
   -moz-border-radius-topright: 50px;
   border-top-right-radius: 50px;
}
 
#Top_Left {
   height: 65px;
   width:160px;
   -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?

[via]

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.

[via]

7. Print Page Breaks

.page-break{
   page-break-before:always;
}

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

[via]

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.

[via]

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

More, tomorrow.

[via SpeckyBoy]

0 SHARES

Eric Dye

I am an entrepreneur and human rights advocate. I spend most of my time as writer and editor for ChurchMag and Finding Justice, but you can also find me working on Live Theme and for the International Human Rights Group. All while enjoying my family and sipping espresso in Italy.

Trackbacks

What would you like to say?

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>