Skip to content

Instantly share code, notes, and snippets.

@brianbroken
brianbroken / gist:5471321
Created April 27, 2013 00:18
CSS: Hexagon with Shadow
.hexagon {
width: 100px;
height: 55px;
position: relative;
}
.hexagon, .hexagon:before, .hexagon:after {
background: red;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.8);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.8);
box-shadow: 0 0 10px rgba(0,0,0,0.8);
@brianbroken
brianbroken / gist:5471318
Last active December 16, 2015 17:30
CSS: gradient underlines
a {
position: relative;
padding-bottom: 6px;
}
a:hover::after {
content: "";
position: absolute;
bottom: 2px;
left: 0;
@brianbroken
brianbroken / gist:5471312
Last active December 16, 2015 17:30
CSS: clearfix
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
@brianbroken
brianbroken / gist:5471308
Last active December 16, 2015 17:30
CSS: Fixed Footer
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
@brianbroken
brianbroken / gist:5471301
Last active December 16, 2015 17:30
CSS3 Zebra Striping a Table
tbody tr:nth-child(odd) {
background-color: #ccc;
}
@brianbroken
brianbroken / gist:5471282
Last active December 16, 2015 17:30
CSS: Opacity
.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
@brianbroken
brianbroken / gist:5471279
Created April 27, 2013 00:09
CSS: Triangle
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down {
@brianbroken
brianbroken / gist:5471274
Created April 27, 2013 00:08
CSS: Box shadow
.shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
@brianbroken
brianbroken / gist:5471266
Created April 27, 2013 00:07
CSS: text selection colour
/* Mozilla based browsers */
::-moz-selection {
background-color: #FFA;
color: #000;
}
/* Works in Safari */
::selection {
background-color: #FFA;
color: #000;
@brianbroken
brianbroken / gist:5471260
Created April 27, 2013 00:06
CSS: center website
#page-wrap {
width: 800px;
margin: 0 auto;
}