Skip to content

Instantly share code, notes, and snippets.

@nelix
Forked from hugolpz/README.md
Last active December 24, 2016 17:53
Show Gist options
  • Save nelix/30dd6f5f8ef757411f8ee4c10a3e7031 to your computer and use it in GitHub Desktop.
Save nelix/30dd6f5f8ef757411f8ee4c10a3e7031 to your computer and use it in GitHub Desktop.
Wonders of data uri and hrefs

Syntax

.data:hover  { fill: #B10000; opacity: 1; } /*  data = RED   */
.datum:hover { fill: #00B100; opacity: 1; } /*  datum= GREEN */
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
border: 3px solid #646464;
background-color: #C6ECFF;
}
* {
fill-opacity: 0.3;
stroke-opacity: 0.3;
}
.L1 { fill: #FFFFFF;}
.data:hover { stroke: #B10000; stroke-width: 2px; fill-opacity: 1; stroke-opacity: 0.7; }
.datum:hover { stroke: #00B100; stroke-width: 2px; fill-opacity: 1; stroke-opacity: 0.7; }
/*.subunit-boundary {
fill: none;
stroke-linejoin: round;
} */
.international-boundary {
stroke-width:3px;
stroke-dasharray: 16,4,3,4;
}
</style>
<div>
<a class="download ac-icon-download" href="javascript:javascript: (function (){ window.open('https://google.com?q=⤋')})();"><!--⤋--><big>⇩</big> Download</a> -- Works on Chrome. Feedback welcome for others web browsers.
</div>
<body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment