Bí quyết của sự thành công – nếu có - đó là khả năng tự đặt mình vào địa vị người khác và xem xét
sự vật vừa theo quan điểm của họ vừa theo quan điểm của mình
Henry Ford
Tags thiết kế website
Tên miền, Đăng ký tên miền,
thiet ke web, chuyen thiet ke web,
Thiết kế website,
chuyên thiết kế website,
tu van web,tư vấn web,
dich vu website,
dịch vụ website,
web design,
giải pháp thiết kế website,
website thương mại,
quang ba web,
quang ba website,
dịch vụ SEO,
tutorial,
thiết kế website bán hàng,
thiết kế website doanh nghiệp,
hosting,
từ khóa,
công ty thiết kế web,
Website template,
thư viện website
Kỹ thuật làm bóng đổ cho chữ bằng CSS ( 1903 lượt xem )
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.
Phuc Thinh Website