Loading post navigation ...
 
 

Pro page

7
Nhận xét

Kỹ thuật tạo bóng đổ cho ảnh hoặc cho các khối nội dung

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

[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 CSSHTML 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>


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.


Enter your mail address:

7

share4vnn

cái này chỉ là code css đơn thuần nên có vẻ ko làm chậm blog !

phattrien@so

Cái này chắc không anh hưởng về tốc độ đâu em nhỉ.

phattrien@so

oh, nhanh đấy nhỉ share4vnn. cám ơn nhé.

share4vnn

hơn bác vài giây chứ mấy :D

share4vnn

hôm trước em vào trang web nước ngoài thấy có trang nó tạo bóng đổ cho chữ và nền ủ kểu..đã lưu vào bookmark rùi nhưng cài lại win bị mất..

fandung

cái này là css nên ko làm chậm tốc độ load.

Cái này chỉ hiển thị tốt trên các widget, hiển thị không tốt trong bài viết. dùng để trang trí blog thì được.

Nguyễn Chí Thanh

còn nếu mình muốn làm đổ bóng 2 bên đường biên của blog thì mình làm sao vậy FD? tks bạn



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home