Final Tasty Bits of CSS Snippets


Here are more bits of CSS snippets, and another picture of food.

I hope some of these bits will save you time on future work, and maybe lead to some inspired coding! If you have any favorite CSS bits you’d 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 Image

#resize-image {
   /* Just imagine that the image_1.png is 200x400px */
   background:url(image_1.png) top left no-repeat;
   -moz-background-size: 100px 200px;
   -o-background-size: 100px 200px;
   -webkit-background-size: 100px 200px;

Tweak the values, background image resized! It’s as easy as that!


2. Add Multiple Columns

#columns-3 {
   text-align: justify;
   -moz-column-count: 3;
   -moz-column-gap: 12px;
   -moz-column-rule: 1px solid #c4c8cc;
   -webkit-column-count: 3;
   -webkit-column-gap: 12px;
   -webkit-column-rule: 1px solid #c4c8cc;

Create multiple columns, just adjust your column count. This is complete with vertical grey separator lines, which of course can be changed or removed.


3. Link Rollover as CSS Sprite

a {
       display: block;
       background: url(sprite.png) no-repeat;
       height: 30px;
       width: 250px;
a:hover {
       background-position: 0 -30px;

This will create a “hover” effect without having to create a separate “hover” version of the button.


4. @fontface FTW

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?') format('eot'),
         url('myfont-webfont.woff') format('woff'),
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');

This is the Fontspring @font-face syntax.


5. Add Some Google Fonts

<!-- Some special fonts -->
/* Single font load*/
<link rel="stylesheet" type="text/css" href="">
/* Multiple font load*/
<link rel="stylesheet" type="text/css" href="|Droid+Serif|Old+Standard+TT|Droid+Sans"><!-- Some special fonts -->

Put the above code in the head.

body {
font-family: 'Droid Serif', serif; font-size: 48px;

Drop this into your CSS and and now you’re ready to rock Google API fonts.


6. Flip It!

img.flip {
   -moz-transform: scaleX(-1);
   -o-transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
   filter: FlipH;
   -ms-filter: "FlipH";

This is great for buttons and arrows that you can simply flip, so you don’t have to load-up extra images, loading, etc …


7. Rotating Images and Text

/* for firefox, safari, chrome, and any other gecko/webkit browser */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/* opera */
-o-transform: rotate(30deg);

Rotate any element. Change the value, change the rotation.


8. Resize Your Content Area

#content {
    width: 100%;
    margin: 0;
    float: none;

Wide, narrow, here it is.


9. Browser-Specific CSS Hacks

/***** Selector Hacks ******/
/* IE6 and below */
* html #uno  { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }
/* Everything but IE6-8 */
:root *> #quince { color: red  }
/* IE7 */
*+html #dieciocho {  color: red }
/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }
/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue9; }
/* IE7, IE8 */
#veinte { color/***/: blue9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/* IE8 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */

Target IE, Firefox, Chrome, Safari and Opera more effectively from within the CSS.


10. Eric Meyers CSS reset

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
body {
line-height: 1;
ol, ul {
list-style: none;
blockquote, q {
quotes: none;
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
/* remember to define focus styles! */
:focus {
outline: 0;
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
del {
text-decoration: line-through;
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;

It’s kind of a standard.


11. Reset All Colors and Change Link Color

* {
     color: black !important;
     background-color: white !important;
     background-image: none !important;
a:link {
    font-weight: bold;
    text-decoration: underline;
    color: #06c;

This resets all text and background colors so you’re back at square one with black text. Then it changes the color and style of links to distinguish from regular text and make them apparent that they’re links – change the color and styling to whatever you want.


If you enjoyed any of these morsels, be sure to check-out these Tasty Bits of CSS Snippets and More Tasty Bits of CSS Snippets!

Also, don’t forget to drop any of your own favorite CSS snippets in the comments section!

Happy hacking!

[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.

Join the fun!

  1. says

    Here are a couple I use a lot (that I don’t think were on your list):

    Inset box shadow:

    -moz-box-shadow:inset 0 0 10px #000000;
    -webkit-box-shadow:inset 0 0 10px #000000;
    box-shadow:inset 0 0 10px #000000;

    Background transparency:

    background: rgb(102, 102, 102); /* The Fallback */
    background: rgba(102, 102, 102, 0.5);

    Inset text shadow: (I probably over-use this):

    text-shadow: -1px -1px 0 #999999;

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=""> <s> <strike> <strong>