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.

Để 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.

Kỹ thuật làm bóng đổ cho chữ bằng CSS

Chủ đề CSS

Chủ đề HTML

SEO and SEM

Các phong cách thiết kế

Trình quản lý nội dung

Hướng dẫn thực hành

Tư liệu

Thư giãn

Liên kết hữu ích

Liên kết website

Vài nét về tác giả

Chào tất cả các bạn, tên tôi là Chu Hữu Trung. Thiết kế Web là nghề của tôi, hiện nay tôi đang sống và làm việc tại Hà Nội (Việt Nam). Tôi rất vui khi các bạn ghé thăm cssyeah.com