| <style> | |
| span::selection { color: purple; } | |
| div.roundedRect { | |
| width: 100px; | |
| height: 100px; | |
| margin: 50px; | |
| -webkit-border-radius: 25px; | |
| -webkit-box-shadow: hsla(20, 100%, 50%, 1) 7px 4px 0 | |
| , hsla(60, 100%, 50%, 1) -8px 14px 2px | |
| , hsla(100, 100%, 50%, 1) -21px -12px 5px; | |
| } | |
| </style> | |
| <div style=" | |
| font-family: Lucida Grande; | |
| font-weight: bold; | |
| font-size: 48px; | |
| margin: 20px; | |
| text-shadow: hsla(20, 100%, 50%, 1) 7px 4px 0 | |
| , hsla(60, 100%, 50%, 1) -8px 14px 2px | |
| , hsla(100, 100%, 50%, 1) -21px -12px 5px; | |
| "> | |
| <span style="-webkit-text-stroke: 1px; -webkit-text-fill-color: transparent;">This</span> | |
| <span style="-webkit-text-stroke: 1px; -webkit-text-fill-color: white;">text</span> | |
| <span style="color: rgba(0, 0, 0, 0.3);">casts</span> | |
| <span id="selectMe">multiple</span> | |
| shadows | |
| </div> | |
| <script> | |
| var text = document.getElementById("selectMe").firstChild; | |
| getSelection().setBaseAndExtent(text, 0, text, 6); | |
| </script> | |
| <div class="roundedRect"></div> | |
| <div class="roundedRect" style="background-color: white;"></div> | |
| <div class="roundedRect" style="background-color: rgba(0, 0, 0, 0.2);"></div> |