Creative Commons Icon Sprite

Creative-Commons-Icon-Sprite.markdown

Creative Commons Icon Sprite

By selecting a clearly defined ruleset and utilizing Creative Commons industry standard "leagalese", you can avoid a majority of the perils that "trademarking", "sharing-rights", and simply protecting your hard work entails. via https://haeckdesign.com/freebies/icons/creative-commons-icon-sprite

A Pen by Matthew Haeck on CodePen.

License.

index.html

<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>

style.css

.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;}