Skip to content

Instantly share code, notes, and snippets.

@magemore
magemore / gist:2486448
Created April 25, 2012 04:44
Adding shadow to text – text-shadow
.text-shadow {
text-shadow: 2px 2px 4px #666;
}
@magemore
magemore / gist:2486466
Created April 25, 2012 04:47
CSS - Adding rounded corners – border-radius
.round{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
@magemore
magemore / gist:2486496
Created April 25, 2012 04:50
Quickly create pull-quotes
.pull-quote {
width: 200px;
float: right;
margin: 5px;
font-family: Georgia, "Times New Roman", Times, serif;
font: italic bold #ff0000 ;
}
@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: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: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: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');
}
@magemore
magemore / gist:2486462
Created April 25, 2012 04:46
CSS Adding shadow to borders and images – box-shadow
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);
@magemore
magemore / gist:2486478
Created April 25, 2012 04:48
CSS Adding individual rounded corners – border-radius
#Bottom_Right {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
#Bottom_Left {
height: 65px;
width:160px;
@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: