Share
Xem chủ đề cũ hơnGo downXem chủ đề mới hơn
avatar
Super PRO
Tổng số bài gửi : 837
Điểm kinh nghiệm : 49
Điểm thưởng : 13
Đến từ : A3k43
Ngày tham gia : 02/12/2007
Tâm trạng :
Xem lý lịch thành viên

Icon Shadows Text by CSS

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

_________________
I ♥️ U ♣️ I ♥️ A3k43

SỐNG ! ẤY LÀ CHIẾN ĐẤU !
Xem chủ đề cũ hơnVề Đầu TrangXem chủ đề mới hơn
Permissions in this forum:
Bạn không có quyền trả lời bài viết