Shadows Text by CSS

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down

Icon Shadows Text by CSS

Bài gửi by LOVE 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 !

LOVE
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

Về Đầu Trang Go down

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang


 
Permissions in this forum:
Bạn không có quyền trả lời bài viết