marker-shadow.html (819B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/licenses/publicdomain/ 5 6 Test: Marker should have text-shadow applied to it 7 --> 8 <html> 9 <head> 10 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 11 <style type="text/css"> 12 @font-face { 13 font-family: DejaVuSansMono; 14 src: url(../fonts/DejaVuSansMono.woff); 15 } 16 17 /* overflow:hidden will clip off some of our text-shadow too. 18 Give us some padding, so we can put the shadow to the left and bottom 19 and beat the overflow clipping. */ 20 div { 21 font-family: DejaVuSansMono; 22 width: 5em; 23 padding-left: 1em; 24 padding-bottom: 1em; 25 overflow: hidden; 26 white-space: nowrap; 27 text-overflow: "..."; 28 text-shadow: -0.5em 3px 2px red; 29 } 30 </style> 31 </head> 32 <body> 33 34 <div>HelloKitty</div> 35 36 </body> 37 </html>