"Tạo bóng bằng css cho khối văn bản hoặc hình ảnh"

(Traidatmui.com) – Một thời gian tìm hiểu nên mình cũng đã tìm được cách để tạo bóng cho khối văn bản hay hình ảnh trên blogger. Có lẻ cũng không ít bạn đã biết được thủ thuật này nhưng mình vẫn muốn chia sẻ cùng với các bạn chưa tìm ra cách thực hiện. Thủ thuật này sẽ dùng css để làm bóng cho khối văn bản hoặc hình ảnh. Thủ thuật cũng không mấy khó khăn lắm mình sẽ đi ngay vào cách thực hiện thủ thuật này.

Hình ảnh minh họa
☼ Thực hiện thủ thuật

1. Đăng nhập Blogger
2. Vào bố cục chọn chỉnh sửa HTML
3. Tìm đến thẻ ]]></b:skin>
4. Chèn code bên dưới lên trước thẻ ]]></b:skin> vừa tìm được
.shadow {
box-shadow: 8px 8px #616D7E;
-webkit-box-shadow: 8px 8px #616D7E;
-moz-box-shadow: 8px 8px #616D7E;
}


Chỉnh sửa code:
- Code màu xanh dương chính là màu của bóng (shadow), bạn có thể thay thành màu bạn thích.
- Hai số trong code 8px 8px lần lượt là khoảng cách từ bóng đến nền chính. Với hai số tức là bóng sẽ lệch về bên phải xuống dưới. Nếu muốn lệch về phía trên bên phải bạn thay thành 8px -8px, tương tự bạn có thể thay thành những giá trị khác mà bạn muốn bóng hiển thị. Nếu muốn bóng mờ và bo tròn các góc như hình bên dưới bạn có thể dùng 3 số ví dụ: 8px 8px 8px thay cho 2 số ở trên.
Hình ảnh minh họa
Lưu ý: các giá trị (8px 8px 8px) phải giống nhau ở cả 3 dòng như trên mới có tác dụng.

Để tiện ích này có tác dụng trên blog bạn thì cần thực hiện thêm một bước phụ, đó là khi muốn tạo bóng cho khối văn bản nào thì bạn phải cho khối văn bản đó nằm trong thẻ <div> tương tự như bên dưới
<div class="shadow" style="font-weight:bold; text-align:center; font-size:40px; color:#fff; width:500px; padding:20px; background:#000066; border: 1px solid black;"> WELCOM TO TRAIDATMUI.COM</div>

Chú ý: các lệnh bên trong style (code màu xanh lá) bạn có thể tùy biến theo ý bạn và thay dòng text màu xanh dương (WELCOM TO TRAIDATMUI.COM) thành nội dung bạn muốn viết.
Tương tự để sử dụng Shadow cho hình ảnh trên blog bạn chỉ việc thêm lệnh class="shadow" vào thẻ IMG như bên dưới.
<img src="http://lh5.ggpht.com/_BTztXRwC9ik/TK01nHij9rI/AAAAAAAAEHQ/3Y56L6TFT5E/exlogo.png" class="shadow" />

Chúc bạn thành công

Xem khác cùng chủ đề

3 nhận xét | Viết lời bình

6/13/2011 09:33:00 CH Trả lời

Cái này dùng để trang trí các Widget hay làm tiêu đề cho các Widget có được ko anh?

Admin
6/13/2011 09:54:00 CH Trả lời

Được em, em thêm code ở giữa .shadow {... } vào trong phần sidebar h2 (tùy mỗi template) nhưng em chỉ cần chú ý thuộc tính bên trong .shadow {...} là được.

6/14/2011 12:31:00 SA Trả lời

Tạo hiệu ứng bóng cho ảnh tự động thế nào nhỉ> tương tự trang mp3 zing Cuoilon

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang