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:2486456
Created April 25, 2012 04:45
Adding an image-based border – border-image
#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;
}
@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: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: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:2486486
Created April 25, 2012 04:49
CSS Adding a gradient – linear-gradient
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');
@magemore
magemore / gist:2486489
Created April 25, 2012 04:50
Adding print page breaks – page-break
.page-break{
page-break-before:always;
}
@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:2486499
Created April 25, 2012 04:51
Center your website horizontally
.wrapper {
width:960px;
margin:auto;
}
@magemore
magemore / gist:2486506
Created April 25, 2012 04:52
Center certain content vertically
.container {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}