Last active
December 20, 2015 00:49
-
-
Save idibidiart/6044961 to your computer and use it in GitHub Desktop.
Crystal Clear PNG Maps
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <script src="http://code.jquery.com/jquery-1.10.2.js"></script> | |
| <style> | |
| body { | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| .shadowWrapper158 { | |
| width: 740px; | |
| height: auto; | |
| padding: 10px; | |
| border: 1px solid black; | |
| margin-top: 5px; | |
| margin-left: 10px; | |
| background-image: url(316shadow.png); | |
| background-repeat: no-repeat; | |
| background-position: 0px 1px; | |
| background-size: 158px auto; | |
| background-origin:content-box; | |
| } | |
| .shadowWrapper310 { | |
| width: 740px; | |
| height: auto; | |
| padding: 10px; | |
| border: 1px solid black; | |
| margin-top: 5px; | |
| margin-left: 10px; | |
| background-image: url(620shadow.png); | |
| background-repeat: no-repeat; | |
| background-position: 0px 1px; | |
| background-size: 310px auto; | |
| background-origin:content-box; | |
| } | |
| .container { | |
| margin: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- | |
| these are only needed for one-time PNG map shadow generation | |
| <canvas class="canv" width=620 height=410></canvas> | |
| <img class='out'/> | |
| --> | |
| <div class='container'> | |
| mixed color | |
| <br> | |
| <div class='shadowWrapper310'> | |
| <img src='310.png' width=310 /> | |
| </div> | |
| <br/> | |
| gray :: #D3D3D3 | |
| <br> | |
| <div class='shadowWrapper158'> | |
| <img src='158-gray.png' width=158 /> | |
| </div> | |
| <br/> | |
| orange :: #FF7F00 | |
| <br> | |
| <div class='shadowWrapper158'> | |
| <img src='158-orange.png' width=158 /> | |
| </div> | |
| <br/> | |
| gold :: #FFD92F | |
| <br> | |
| <div class='shadowWrapper158'> | |
| <img src='158-gold.png' width=158 /> | |
| </div> | |
| <br/> | |
| purple :: #BC80BD | |
| <br> | |
| <div class='shadowWrapper158'> | |
| <img src='158-purple.png' width=158 /> | |
| </div> | |
| <br/> | |
| light green :: #B2DF8A | |
| <br> | |
| <div class='shadowWrapper158'> | |
| <img src='158-light-green.png' width=158 /> | |
| </div> | |
| <br/> | |
| green :: #33A02C | |
| <br> | |
| <div class='shadowWrapper158'> | |
| <img src='158-green.png' width=158 /> | |
| </div> | |
| <br/> | |
| light blue :: #87CEEB | |
| <br> | |
| <div class='shadowWrapper158'> | |
| <img src='158-light-blue.png' width=158 /> | |
| </div> | |
| <br/> | |
| dark blue :: #3288BD | |
| <br> | |
| <div class='shadowWrapper158'> | |
| <img src='158-dark-blue.png' width=158 /> | |
| </div> | |
| <br/> | |
| brown :: #CA6503 | |
| <br> | |
| <div class='shadowWrapper158'> | |
| <img src='158-brown.png' width=158 /> | |
| </div> | |
| <br/> | |
| pink :: #FFC0CB | |
| <br> | |
| <div class='shadowWrapper158'> | |
| <img src='158-pink.png' width=158 /> | |
| </div> | |
| <br/> | |
| red :: #E3241C | |
| <br> | |
| <div class='shadowWrapper158'> | |
| <img src='158-red.png' width=158 /> | |
| </div> | |
| <br/> | |
| </div> | |
| <script> | |
| $(document).on("mousemove", '.shadowWrapper310, .shadowWrapper158', function(e) { | |
| moveShadow.bind(this)(e) | |
| }) | |
| $(document).on("mouseout", '.shadowWrapper310, .shadowWrapper158', function(e) { | |
| resetShadow.bind(this)(e) | |
| }) | |
| // Here is the code used to generate the shadows for PNG maps | |
| // to be shrunk along with PNG map image to half width to double resolution for retina | |
| // | |
| // var canv = $('.canv')[0]; | |
| // var ctx = canv.getContext('2d'); | |
| // | |
| // var img = new Image(); | |
| // img.src = "620red.png"; | |
| // | |
| // img.onload = function() { | |
| // ctx.shadowColor = 'rgba( 0, 0, 0, 0.9 )'; | |
| // ctx.shadowBlur = 1000; | |
| // ctx.shadowOffsetX = 620; | |
| // ctx.shadowOffsetY = 620; | |
| // ctx.drawImage(img, -620, -620, 620, 620 * img.height / img.width); | |
| // | |
| // $('.out')[0].src = canv.toDataURL() | |
| // } | |
| function mouseXY(ev){ | |
| if (window.pageXOffset!= undefined){ | |
| return [ev.clientX+window.pageXOffset, | |
| ev.clientY+window.pageYOffset]; | |
| } | |
| else { | |
| var ev= window.event, | |
| d= document.documentElement, b= document.body; | |
| return [ev.clientX + d.scrollLeft + b.scrollLeft, | |
| ev.clientY + d.scrollTop + b.scrollTop]; | |
| } | |
| } | |
| function setOpacity(getDistance){ | |
| return (1.2 - getDistance /1000); | |
| } | |
| function moveShadow(e){ | |
| this.style.backgroundPosition = "-1px 3px"; | |
| } | |
| function resetShadow(e){ | |
| this.style.backgroundPosition = "0px 1px"; | |
| } | |
| </script> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment