Kỹ thuật làm bóng đổ cho chữ bằng CSS
 |
Thông thường khi chúng ta làm bóng đổ (Shadow) cho chữ chúng ta thường dùng các phần mềm đồ họa như Photoshop, Illustrator, Firework,..vv. |
Đối với những phần mềm đó thì việc tạo ra bóng đổ cho chữ hết sức đơn giản và có nhiều hiệu ứng bắt mắt, nhưng trong bài viết này tôi xin giới thiệu với các bạn một thủ thuật trong CSSCascading Style Sheets giúp bạn có thể tạo ra hiệu ứng bóng đổ giống như trong các phần mềm đồ họa. Tuy nhiên cách làm này không có nhiều hiệu ứng và kiểu dáng giống như các phẩn phềm đồ họa, nhưng nó vẫn là một cách khá tốt mà chúng ta có thể vận dụng nó để style cho WebsiteWebsite và các khái niệm liên quan của mình, sau đây là toàn bộ các bước để thực hiện.
Ảnh minh họa
Để tạo ra hiệu ứng cho chữ trước hết chúng ta cần tạo ra một trang HTML có định dạng như sau:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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.</p>
</div>
</body>
</html>
Để có thể định vị được các dòng text chúng ta cần định nghĩa cho thẻ <div class="css-shadow"> một kích thước nhất định, giả sử trong bài viết này tôi định nghĩa là chiều rộng là 300 pixel, chiều cao là 25 pixel. Mã CSSCascading Style Sheets như sau:
#css-shadow {
margin: 0;
padding: 0;
position: relative; /* Dùng để định vị chữ */
width: 300px;
height: 250px;
}
Tiếp đó chúng ta sẽ định nghĩa vị trí mà màu sắc cho các dòng text, để có thể nhìn thấy bóng đổ thì ta sẽ định nghĩa cho dòng chữ ở dưới là màu xám và cách dòng chữ ở trên 2 pixel về phía phải và phía dưới. Cụ thể mã CSSCascading Style Sheets như sau:
#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;
}
Một điều mà chúng ta cần hết sức chú ý đó là thuộc tính z-index:. Trong trường hợp chúng ta muốn đặt lớp (layer) nào ở phía trên thì chúng ta sẽ đặt thuộc tính z-index của lớp đó lớn hơn các lớp (layer) khác.
