Kỹ thuật tạo bóng đổ cho ảnh hoặc cho các khối nội dung
Thứ Tư, 29 tháng 7, 2009
[FD's BlOg] - Tiếp theo bài "Chèn tiện ích vào header" ở bài này mình lại sử dụng lệnh position để tạo bóng đổ cho ảnh hoặc cho các khối văn bản. Làm cho ảnh hoặc vùng văn bản đó trở nên bắt mắt hơn. Thủ thuật để tạo bóng đổ trong bài này là ta sẽ tạo các background nằm dè lên nhau, và lệch nhau vài pixel, như thế sẽ tạo nên hiệu ứng bóng đổ.Ví dụ ở đây mình sẽ dùng 3 class để tạo bóng. Class đầu tiên sẽ là màu nền chính, các class tiếp theo sẽ có màu nền nhạt dần vào lệch với class đầu tiên.
Ví dụ ta có đoạn code CSS và HTML sau :
//Code CSS
<style type="text/css">
.shade1{
width:136px;
height:105px;
background-color:#e8e8e8;
}
.shade2{
position:relative;
width:136px;
height:105px;
background-color:#cbcbcb;
top:-3px;
left:-3px;
}
.shade3{
position:relative;
width:136px;
height:105px;
background-color:#a0a0a0;
top:-2px;
left:-2px;
}
</style>
//Code HTML
<div class="shade1">
<div class="shade2">
<div class="shade3">
Test for shadow - FD's BlOg
</div>
</div>
</div>
<style type="text/css">
.shade1{
width:136px;
height:105px;
background-color:#e8e8e8;
}
.shade2{
position:relative;
width:136px;
height:105px;
background-color:#cbcbcb;
top:-3px;
left:-3px;
}
.shade3{
position:relative;
width:136px;
height:105px;
background-color:#a0a0a0;
top:-2px;
left:-2px;
}
</style>
//Code HTML
<div class="shade1">
<div class="shade2">
<div class="shade3">
Test for shadow - FD's BlOg
</div>
</div>
</div>
Kết quả hiển thị:
- Chú ý các code màu xanh, nếu ta thay đổi nó thành như bên dưới :
top:-6px;
left:-6px;
..
..
top:-5px;
left:-5px;
Ta sẽ có kết quả như sau:
- Nếu ta tăng giá trị trong các đoạn code màu xanh lên ta sẽ thấy rõ được thủ thuật.
- Để lớp màu của lớp bóng đổ này liên tục, bạn có thể tạo thêm nhiều class khác như shade4, shade5, ...
- Ngoài ra bạn có thể chọn hướng đổ bóng khác như:
+ Top, right :
top:-6px;
right:-6px;
..
..
top:-5px;
right:-5px;
ta sẽ có kết quả :
+ bottom, right :
bottom:-6px;
right:-6px;
..
..
bottom:-5px;
right:-5px;
ta sẽ có kết quả :
+ bottom, left :
bottom:-6px;
left:-6px;
..
..
bottom:-5px;
left:-5px;
ta sẽ có kết quả :
Chúc các bạn thành công.
- Tạo ngôi hình ngôi sao với CSS Border
- 18 đọan code CSS ngắn - Rất có ích cho việc chỉnh sửa code CSS của template
- Tạo tab nội dung với CSS
- Menu nằm ngang - Hiệu ứng sổ menu con kiểu 1 hàng ngang (Mootools effect)
- Bộ sưu tập 31 style menu nằm ngang
- CSS Outline : Tạo đường viền cho khung
- Tạo tab có nội dung trượt liên tục theo thời gian - Ứng dụng của Mootools
- Hiểu rõ hơn về bố cục Blog của blogspot : Dành cho người mới bắt đầu tập chỉnh sửa CSS
- Bo góc với CSS : Bo 4 góc, 2 góc trên, 2 góc dưới... dùng hình ảnh
- Bo góc với lệnh CSS
- Làm cho nút "Read More..." (Đọc thêm) trông pro hơn
- Thủ thuật cơ bản : xóa đường viền của ảnh
Comments[ 0 ]
Đăng nhận xét