Skip to content

Instantly share code, notes, and snippets.

@HaeckDesign
Last active December 16, 2016 06:54
Show Gist options
  • Save HaeckDesign/bbfa12c8c68531d23275 to your computer and use it in GitHub Desktop.
Save HaeckDesign/bbfa12c8c68531d23275 to your computer and use it in GitHub Desktop.
Creative Commons Icon Sprite
<h1>Creative Commons Sprite</h1>
<div class="popcolumn"><small>bite-sized...</small>
<a href="http://creativecommons.org/licenses/by/3.0/" class="ccsmsticker by"><img title="Creative Commons Attribution 3.0 Unported License" src="https://s3-us-west-2.amazonaws.com/haeck/creativecommons/nothing.gif" /></a>
<a href="http://creativecommons.org/licenses/by-nc/3.0/" class="ccsmsticker bync"><img title="Creative Commons Attribution-NonCommercial 3.0 Unported License" src="https://s3-us-west-2.amazonaws.com/haeck/creativecommons/nothing.gif" /></a>
<a href="http://creativecommons.org/licenses/by-nc-nd/3.0/" class="ccsmsticker byncnd"><img title="Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License" src="https://s3-us-west-2.amazonaws.com/haeck/creativecommons/nothing.gif" /></a>
<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" class="ccsmsticker byncsa"><img title="Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License" src="https://s3-us-west-2.amazonaws.com/haeck/creativecommons/nothing.gif" /></a>
<a href="http://creativecommons.org/licenses/by-nd/3.0/" class="ccsmsticker bynd"><img title="Creative Commons Attribution-NoDerivs 3.0 Unported License" src="https://s3-us-west-2.amazonaws.com/haeck/creativecommons/nothing.gif" /></a>
<a href="http://creativecommons.org/licenses/by-sa/3.0/" class="ccsmsticker bysa"><img title="Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)" src="https://s3-us-west-2.amazonaws.com/haeck/creativecommons/nothing.gif" /></a>
</div>
<div class="popcolumn2"><small>more legible…</small>
<a href="http://creativecommons.org/licenses/by/3.0/" class="ccmedsticker mby"><img title="Creative Commons Attribution 3.0 Unported License" src="https://s3-us-west-2.amazonaws.com/haeck/creativecommons/nothing.gif" /></a>
<a href="http://creativecommons.org/licenses/by-nc/3.0/" class="ccmedsticker mbync"><img title="Creative Commons Attribution-NonCommercial 3.0 Unported License" src="https://s3-us-west-2.amazonaws.com/haeck/creativecommons/nothing.gif" /></a>
<a href="http://creativecommons.org/licenses/by-nc-nd/3.0/" class="ccmedsticker mbyncnd"><img title="Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License" src="https://s3-us-west-2.amazonaws.com/haeck/creativecommons/nothing.gif" /></a>
<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" class="ccmedsticker mbyncsa"><img title="Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License" src="https://s3-us-west-2.amazonaws.com/haeck/creativecommons/nothing.gif" /></a>
<a href="http://creativecommons.org/licenses/by-nd/3.0/" class="ccmedsticker mbynd"><img title="Creative Commons Attribution-NoDerivs 3.0 Unported License" src="https://s3-us-west-2.amazonaws.com/haeck/creativecommons/nothing.gif" /></a>
<a href="http://creativecommons.org/licenses/by-sa/3.0/" class="ccmedsticker mbysa"><img title="Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)" src="https://s3-us-west-2.amazonaws.com/haeck/creativecommons/nothing.gif" /></a>
</div>
.popcolumn { float: left;width: 12%; }
.popcolumn2 { float: left;width: 36%; }
.ccmedsticker { width: 240px;height: 44px;background-color: #fefefe;background-image: url('https://s3-us-west-2.amazonaws.com/haeck/creativecommons/mediumcc.png');display: block;overflow: hidden;margin:8px; }
.ccmedsticker:hover { background-color: #ffffff; }
.mby { background-position: 0 0; }
.mby:hover { background-position: 240px 0; }
.mbysa { background-position: 0 44px; }
.mbysa:hover { background-position: 240px 44px; }
.mbynd { background-position: 0 88px; }
.mbynd:hover { background-position: 240px 88px; }
.mbync { background-position: 0 132px; }
.mbync:hover { background-position: 240px 132px; }
.mbyncsa { background-position: 0 176px; }
.mbyncsa:hover { background-position: 240px 176px; }
.mbyncnd { background-position: 0 220px; }
.mbyncnd:hover { 240px 220px;}
.ccsmsticker { width: 120px;height: 22px;background-color: #fefefe;background-image: url('https://s3-us-west-2.amazonaws.com/haeck/creativecommons/smallcc.png');display: block;overflow: hidden;margin:6px; }
.ccsmsticker:hover { background-color: #ffffff; }
.by { background-position: 0 0; }
.by:hover { background-position: 120px 0; }
.bysa { background-position: 0 22px; }
.bysa:hover { background-position: 120px 22px; }
.bynd { background-position: 0 44px; }
.bynd:hover { background-position: 120px 44px; }
.bync { background-position: 0 66px; }
.bync:hover { background-position: 120px 66px; }
.byncsa { background-position: 0 88px; }
.byncsa:hover { background-position: 120px 88px; }
.byncnd { background-position: 0 110px; }
.byncnd:hover { background-position: 120px 110px; }
body {background: #e2e2e2;color: #555;font-family: "Helvetica", sans-serif;margin:20px;}
h1 {font-family:'Arial';color:#999;}
h2 {font-size: 17px;font-weight: normal;padding: 0 0 0.2em;margin-top:30px;border-bottom: 1px solid #ccc;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment