Skip to content

Instantly share code, notes, and snippets.

@evanshajed

evanshajed/dabblet.css

Forked from iansoper/dabblet.css
Created February 16, 2013 21:49
Show Gist options
  • Save evanshajed/4968887 to your computer and use it in GitHub Desktop.
Save evanshajed/4968887 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dabblet.css
/**
* PE to use SVG as CSS background image with fallback for IE8/7/6
*
* Using SVG as CSS background image to display
* resolution-independent logos or icons is pretty
* awesome but does completely fail on IE8/7/6
*
* The trick:
* All three IE versions don't support rgba color values.
* By defining a rgba background color together with the
* SVG background image for all modern browsers, IEs prior
* to IE 9 will automatically ignore that and switch to the
* first background definition, where you can add a fallback
* png with the same size for example.
*
* Tested in:
* Safari 5.1+
* Chrome 16
* Firefox 9+
* Opera 11.6+
* MobileSafari on iOS 5
* IE6, IE7, IE8, IE9
*
* General support for SVG backgrounds:
* http://caniuse.com/#feat=svg-css
*
* Known issues:
* - Does not work in Firefox < 4
* - Might not work on older versions of Android Browser
*
* Thoughts?
* Please reply on Twitter: @bastianallgeier
* Or comment on this gist on Github.
*
* Awesome mod by @jng5 to demonstrate the resizability:
* http://dabblet.com/gist/1564480
*
*/
body {
background: #fff;
}
.twitter-logo {
width: 200px;
height: 200px;
text-indent: -6000px;
background: url(http://cl.ly/D4xT/twitter_newbird_blue.png) no-repeat center center;
background: rgba(0,0,0,0) url(http://cl.ly/D4o5/twitter_newbird_blue.svg) no-repeat center center;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="twitter-logo">Twitter Birdy</div>
Raw
settings.json
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment