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
[cc lang=”css”].text-shadow { text-shadow: 2px 2px 4px #666;}[/cc]
Make that text jump-off the page!
[via]
2. Add an Image-Based Border
[cc lang=”css”]#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;
}[/cc]
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
[cc lang=”css”]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);[/cc]
This gives you just the right hint of 3D-ish-ness.
[via]
4. Rounded Corners
[cc lang=”css”].round{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}[/cc]
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!
[cc lang=”css”]#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;
}[/cc]
This works like the previous, but this gives you the ability to tweak individual corners. Can you feel the power?
[via]
6. The Gradient
[cc lang=”css”]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’);[/cc]
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
[cc lang=”css”].page-break{
page-break-before:always;
}[/cc]
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
[cc lang=”css”].pull-quote {
width: 200px;
float: right;
margin: 5px;
font-family: Georgia, “Times New Roman”, Times, serif;
font: italic bold #ff0000 ;
}[/cc]
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]
[…] 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 […]