Shadows Text by CSS

07/04/09, 05:43 am

CSS:

Code:: body { margin: 0; padding: 0; font-size: 12px; color: #333333; text-align: center; font-family: Arial, Helvetica, sans-serif; } h1 { font-size: 180%; margin: 0; padding: 0; } #wrapper { width: 400px; margin: 100px auto 0; padding: 10px; text-align: left; border: 1px solid #E0E0E0; } /* Style for text shadow*/ #css-shadow { margin: 0; padding: 0; position: relative; width: 300px; height: 25px; } #css-shadow h1.font { position: absolute; top: 0; left: 0; z-index: 1; color: #CC0000; } #css-shadow h1.shadow { position: absolute; top: 2px; left: 2px; z-index: 0; color: #C0C0C0; }

Code:: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="textshadow.css" media="all" /> <title>CSS Text Shadow</title> </head> <body> <div id="wrapper"> <div id="css-shadow"> <h1 class="font">CSS Text shadow</h1> <h1 class="shadow">CSS Text shadow</h1> </div> <p>Lorem ipsum dolor sit amet consectetuer pretium mattis Curabitur ligula tempus. Condimentum eu elit mi Lorem sapien sit cursus lobortis sit Sed. At Curabitur quis nunc semper ut Curabitur augue wisi ullamcorper sem. Convallis eu ut Suspendisse habitant pede eget Sed libero consectetuer Curabitur. Pellentesque interdum tortor Pellentesque purus Lorem est Aenean convallis Nullam Aenean. Lorem eros urna quis hendrerit tempor ac.</p> </div> </body> </html>

Demo: http://www.cssyeah.com/demo/textshadow.html
Download: http://www.cssyeah.com/downloads/csstextshadow.zip

Hoặc:

Chỉnh các thông số
margin-left
vertical-align
cho phù hợp...

[quote="Donna"]

Code:: <div align="center"> <span style="font-family: arial; font-size: 50px; font-weight: bolder; color: rgb(130, 130, 130);">CHỮ Ở ĐÂY</span> <span style="font-family: arial; font-size: 50px; font-weight: bolder; color: red; margin-left: -240px; vertical-align: 2px;">CHỮ Ở ĐÂY</span> </div>