|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <script type="text/javascript"> |
|
5 function onload() { |
|
6 window.focus(); |
|
7 var range = document.createRange(); |
|
8 range.selectNodeContents(document.getElementById("selectMe")); |
|
9 var sel = window.getSelection(); |
|
10 sel.removeAllRanges(); |
|
11 sel.addRange(range); |
|
12 } |
|
13 </script> |
|
14 <style type="text/css"> |
|
15 body { |
|
16 background: lightGray; |
|
17 } |
|
18 div { |
|
19 position: absolute; |
|
20 top: 10px; |
|
21 left: 10px; |
|
22 font: 36px monospace; |
|
23 color: white; |
|
24 } |
|
25 </style> |
|
26 </head> |
|
27 <!-- REF case renders the selection first, using to avoid any show-through of glyph edges, |
|
28 then the shadowed text on top of that --> |
|
29 <body onload="onload()"> |
|
30 <div id="selectMe"> |
|
31 |
|
32 </div> |
|
33 <div style="text-shadow:1px 1px 1px red;"> |
|
34 selected shadowed text |
|
35 </div> |
|
36 </body> |
|
37 </html> |