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
Make that text jump-off the page!
[via]
2. Add an Image-Based Border
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
-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
-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!
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: -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-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
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.
[via SpeckyBoy]
Trackbacks/Pingbacks:
[...] Tips0More Tasty Bits of CSS Snippets Posted by Eric Dye on Apr 28, 2011Yesterday, we fed you 8 tasty bits of CSS snippets. I hope you enjoyed them.Here are 8 more tasty bits of CSS snippets to fill [...]
[...] like to share, be sure to drop them off in the comments section, today!These are the final tasty bits of CSS snippets for your coding pleasure. 1. Resize Background Image1234567#resize-image { /* Just [...]