Diễn Đàn thủ thuật Việt
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.

Diễn Đàn thủ thuật Việt

●±‡±● PROTHUTHUAT.FORUM-VIET.NET ●±‡±●
 
Trang Chínhhits TopicLatest imagesĐăng kýĐăng Nhập

Share | 

 

 [Beta plus] HIệu ứng shadow cho cho text!

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down 
[Beta plus] HIệu ứng shadow cho cho text! EmptyTue Mar 30, 2010 10:58 am

pandacc
mem0
pandacc

mem0

http://vn.360plus.yahoo.com/p00.dethuong1103/
Cung : Pisces
Tổng số bài gửi : 34
Points 93
Join date : 25/03/2010
Age : 33
Đến từ Đến từ : cu chj

Bài gửiTiêu đề: [Beta plus] HIệu ứng shadow cho cho text!

 
Hiệu ứng shadow
cho text có tác dụng với CSS 3.0 và may mắn thay 360Plus Beta có hỗ trợ
[Beta plus] HIệu ứng shadow cho cho text! 8

Code sử dụng hiệu ứng này có dạng chung như
sau



Quote:
<blockquote>#tên_module{text-shadow: Apx Bpx Cpx
#mã_màu;}/*olympia41124*/
</blockquote>



Trong đó

#tên_module là module có hiệu ứng ví dụ
#ygma, #blast ...

A
: khoảng cách của bóng với
chữ về bên phải (nếu muốn về bên trái thì cho A là số âm)

B : khoảng cách
của bóng với chữ về bên dưới (nếu muốn về bên trên thì cho B là số âm)

C : độ mờ của
bóng mờ

#mã_màu : màu của
bóng mờ



Việc thay đổi A, B, C sẽ cho ta nhiều hiệu
ứng đẹp
[Beta plus] HIệu ứng shadow cho cho text! 8 Sau đây là ví dụ với module nóc
nhà



Quote:
<blockquote>#ygma{text-shadow:
2px
2px 2px #f0f;}
</blockquote>







Thay đổi thêm chút
nữa ta lại có một hiệu ứng khác



Quote:
<blockquote>#ygma{text-shadow:
0px
0px 10px #f0f;}
</blockquote>









Ngoài ra bạn có thể cho nhiều bóng mờ cùng
xuất hiện một lúc bằng cách ngăn cách các bóng mờ bằng dấu "," như code
dưới



Quote:
<blockquote>#ygma{text-shadow:
5px
5px 2px #f0f,-5px -5px 2px #f0f;}
</blockquote>









Mình không khuyến
khích các bạn dùng dạng code nhiều bóng mờ này vì khi đó blog bạn nhìn
chóng mặt lắm _ _!! Tuy nhiên nếu các bóng mờ giữ nguyên thuộc tính
giống nhau lại có tác dụng bất ngờ


Quote:
<blockquote>#ygma{text-shadow:
0px
0px 10px #f0f,0px 0px 10px #f0f,0px 0px 10px #f0f;}
</blockquote>








Hãy thay đổi A, B, C
để có nhiều hiệu ứng tuyệt hơn theo sở thích và trí tưởng tượng của bạn
[Beta plus] HIệu ứng shadow cho cho text! 1 Có chút lưu ý với các bạn là hệ
số C càng nhỏ thì càng rõ, càng lớn thì càng mờ
[Beta plus] HIệu ứng shadow cho cho text! 4 Còn về tên các module thì các bạn
xem danh sách các module ở dưới nhé, có thể một số module không tác
dụng
[Beta plus] HIệu ứng shadow cho cho text! 10



#ygma : nóc nhà
#article_list_module : module bài viết
#blog_title : module tên blog
#profile_highlight : module profile
#article_new : module bài mới nhất
#comment_new : module bình luận mới nhất
#blast : module blast
#mod_lifeline : module tâm trạng
#folder : module thư mục riêng
##feature_link : module album
#feature_link_gb : module bảng tin nhắn
#mod_bookmark : module web yêu thích
#calendar : module lịch
#update_date : module cập nhật ngày
#statistic : module thống kê
#friendlist_module : module danh sách bạn bè
#rss_output : module RSS
#subscribe_highlight : module blog tôi thích
#search_module : module tìm
#mod-tagged-frd-article : module blog về tôi
#photo_highlight : module hình ảnh trong
blog

#guestbook_entries : module bình luận nhanh
#profile_card : module hồ sơ blog
#user_mod_10001 : module tự tạo số 1
#user_mod_10002 : module tự tạo số 2
#user_mod_10003 : module tự tạo số 3
#user_mod_10004 : module tự tạo số 4
#user_mod_10005 : module tự tạo số 5
#user_mod_10006 : module tự tạo số 6
#user_mod_10007 : module tự tạo số 7
#user_mod_10008 : module tự tạo số 8
#user_mod_10009 : module tự tạo số 9
#user_mod_10010 : module tự tạo số 10



Lưu ý ngoài ra có thể thay tên blog bằng
body để code áp dụng toàn blog, nhưng bạn sẽ không thích đâu
[Beta plus] HIệu ứng shadow cho cho text! 19 Bạn nào muốn tìm hiểu sâu
hơn thì có thể xem ở đây >>>
http://www.w3.org/Style/Examples/007/text-shadow





 

[Beta plus] HIệu ứng shadow cho cho text!

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang 
Trang 1 trong tổng số 1 trang

 
Website Prothuthuat.com copyright 2010 sử dụng code phpbb 2, mã nguồn mở của forumotion, chỉnh sửa bởi nhóm tin hoc thực hành K.H.D group vui lòng để lại thông tin khi sử dụng tài nguyên website
line footer
 
Free forum | ©phpBB | Free forum support | Báo cáo lạm dụng | Thảo luận mới nhất