Skip to content

Instantly share code, notes, and snippets.

@magemore
magemore / gist:2486513
Created April 25, 2012 04:52
Giving your footer a fixed position – position:fixed
#footer {
position:fixed;
left:0px;
bottom:0px;
height:32px;
width:100%;
background:#333;
}
/* IE 6 */
* html #footer {
@magemore
magemore / gist:2486517
Created April 25, 2012 04:53
Add a “loading image” to, well, loading images
img {
background: url(loader.gif) no−repeat 50% 50%;
}
@magemore
magemore / gist:2486522
Created April 25, 2012 04:53
Replacing the title text with a logo – text-indent – text-indent
h1 {
text-indent:-9999px;
margin:0 auto;
width:400px;
height:100px;
background:transparent url("images/logo.jpg") no-repeat scroll;
}
@magemore
magemore / gist:2486529
Created April 25, 2012 04:54
Add a drop cap
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#000;
font-size:60px;
font-family:Georgia;
}
@magemore
magemore / gist:2486536
Created April 25, 2012 04:55
Using transparency – opacity
.transparent {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}
Example:
<div class="box transparent">Your content</div>
@magemore
magemore / gist:2486543
Created April 25, 2012 04:56
File format-dependent link styles
/* 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;
}
/* emails
The ^= specifies that we want to match links that begin with the mailto:
@magemore
magemore / gist:2486547
Created April 25, 2012 04:56
Resize your 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;
}
@magemore
magemore / gist:2486554
Created April 25, 2012 04:57
Having 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;
}
@magemore
magemore / gist:2486556
Created April 25, 2012 04:58
Basic Link Rollover as CSS Sprite
a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}
a:hover {
background-position: 0 -30px;
}
@magemore
magemore / gist:2486561
Created April 25, 2012 04:58
Bulletproof @fontface
@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');
}