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