Skip to content

Instantly share code, notes, and snippets.

View snowman-repos's full-sized avatar

James snowman-repos

View GitHub Profile
@snowman-repos
snowman-repos / gist:3813840
Created October 1, 2012 19:20
CSS: Hidden Content (SEO/Accessibility)
//removes an item from the page, without affecting page flow
//or causing scrollbars. Much better than display:none or
//visibility:hidden
#content {
position: absolute;
top: -9999px;
left: -9999px;
}
@snowman-repos
snowman-repos / gist:3813864
Created October 1, 2012 19:23
CSS: All Stylesheet Media Types
<link href="all.css" media="all" rel="stylesheet">
<link href="aural.css" media="aural" rel="stylesheet">
<link href="braille.css" media="braille" rel="stylesheet">
<link href="embossed.css" media="embossed" rel="stylesheet">
<link href="handheld.css" media="handheld" rel="stylesheet">
<link href="print.css" media="print" rel="stylesheet">
<link href="projection.css" media="projection" rel="stylesheet">
<link href="screen.css" media="screen" rel="stylesheet">
<link href="tty.css" media="tty" rel="stylesheet">
<link href="tv.css" media="tv" rel="stylesheet">
@snowman-repos
snowman-repos / gist:3816004
Created October 2, 2012 03:34
CSS: CSS Sprite Link with Hover
a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}
a:hover {
background-position: 0 -30px;
}
@snowman-repos
snowman-repos / gist:3816011
Created October 2, 2012 03:37
CSS: Google Font Loader
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script type="text/javascript">
WebFont.load({
google: {
families: ['Cantarell']
}
});
</script>
<style type="text/css">
.wf-loading h1 { visibility: hidden; }
@snowman-repos
snowman-repos / gist:3816013
Created October 2, 2012 03:37
CSS: Helvetica
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
@snowman-repos
snowman-repos / gist:3816017
Created October 2, 2012 03:38
CSS: Blurry Text
.blur {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
@snowman-repos
snowman-repos / gist:3816056
Created October 2, 2012 03:47
CSS: Loading Animation
<div class="loader">
<span></span>
<span></span>
<span></span>
</div>
<style>
.loader {
text-align: center;
}
@snowman-repos
snowman-repos / gist:3816071
Created October 2, 2012 03:54
CSS: Browser Specific Hacks
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
@snowman-repos
snowman-repos / gist:3816086
Created October 2, 2012 04:00
CSS: Centre Div with Dynamic Height
<div id="page">
<div id="content_container">
<div id="content">
<p>your content</p>
</div>
</div>
</div>
html,body {
height: 100%;
@snowman-repos
snowman-repos / gist:3816094
Created October 2, 2012 04:02
CSS: Change Text Selection Colour
/* Mozilla based browsers */
::-moz-selection {
background-color: #FFA;
color: #000;
}
/* Works in Safari */
::selection {
background-color: #FFA;
color: #000;