Skip to content

Instantly share code, notes, and snippets.

@teeaich
teeaich / zebra
Created July 4, 2013 18:29
zebra stripes
tbody tr:nth-child(odd) {
background-color: #ccc;
}
@teeaich
teeaich / stitched
Created July 4, 2013 18:29
stitched elements
p {
position:relative;
z-index:1;
padding: 10px;
margin: 10px;
font-size: 21px;
line-height: 1.3em;
color: #fff;
background: #ff0030;
-webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
@teeaich
teeaich / gradients
Created July 4, 2013 18:27
gradients
#colorbox {
background: #629721;
background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
background-image: -webkit-linear-gradient(top, #83b842, #629721);
background-image: -moz-linear-gradient(top, #83b842, #629721);
background-image: -ms-linear-gradient(top, #83b842, #629721);
background-image: -o-linear-gradient(top, #83b842, #629721);
background-image: linear-gradient(top, #83b842, #629721);
}
@teeaich
teeaich / vertical_align_content
Created July 4, 2013 18:26
vertical align content
.container {
min-height: 6.5em;
display: table-cell;
vertical-align: middle;
}
@teeaich
teeaich / fullscreen_background
Created July 4, 2013 18:25
fullscreen background
html {
background: url('images/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@teeaich
teeaich / input_selection
Created July 4, 2013 18:21
input_selection
::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }
@teeaich
teeaich / media_queries
Created July 4, 2013 18:19
media_queries
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
@teeaich
teeaich / transparent
Created June 2, 2013 16:35
transparent
.transparent {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
@teeaich
teeaich / clearfix
Created June 2, 2013 16:34
classic CSS Clearfix
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }