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