Ricardo-Diaz

Flipping an image – transform
More useful than you think. This is for when you have a button or arrow or other functional graphic that you don’t want or need to manually flip and upload an entirely separate image.

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

Ricardo-Diaz

Bulletproof @fontface
This is the Fontspring @font-face syntax:

@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');
    }

Ricardo-Diaz

Basic Link Rollover as CSS Sprite
Save bandwidth and the hassle of creating a separate “hover” version of your button by using this sprite. It moves the background image of your button down when hovering over it, creating the hover effect.

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

Ricardo-Diaz

Having multiple columns
This lets you create multiple columns for your content without needing to go through the formatting hassle of creating separate paragraphs or whatnot. Change the number of columns to however many you want. Vertical grey separator lines are included, which you can change the color or remove altogether.

#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;

Ricardo-Diaz

Resize your background image
Lets you do just what the title says. Simply change the size values and bam: resized 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;
}

Ricardo-Diaz

File format-dependent link styles
This snippet shows small icons next to a link that’s of a certain file format. The following has file format-dependent link styles for email, pdf, and zip file links. You can add more: just copy/paste one chunk and add your own extension (ex. “.mp3″).


/* external links
The ^= specifies that we want to match links that begin with the http://
*/
a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;

Ricardo-Diaz

Using transparency – opacity
You can make a box or any object on your website transparent with this, changing the opacity value to how transparent you want it to be ie. from really see-through to just barely see-through.

.transparent {
   filter:alpha(opacity=50);
   -moz-opacity:0.5;
   -khtml-opacity:0.5;
   opacity:0.5;
}
Example:

Ricardo-Diaz

Add a drop cap
A.k.a. how to make the first letter of your article bigger than the rest, all classic style.

p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#000;
font-size:60px;
font-family:Georgia;

Ricardo-Diaz

Add a “loading image” to, well, loading images
Useful for those with high-resolution image-heavy websites, like portfolio or gallery sites. Instead of having visitors stare at a blank section of your page wondering if they need to refresh or something, you can have a animated GIF image of a “loading circle” giving visual confirmation that everything’s fine and the image is loading.
Animated GIF is not included, you could create your own here: Ajaxload – Ajax loaing GIF generator.

img {
   background: url(loader.gif) no−repeat 50% 50%;
}

Ricardo-Diaz

Giving your footer a fixed position – position:fixed
This makes your footer stick to the bottom of the screen. Change the background color to your needs.

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:32px;
   width:100%;
   background:#333;