44 Con Người, 1 Trái Tim, Chung Nhịp Đập
 
IndexIndex  CalendarCalendar  Trợ giúpTrợ giúp  Tìm kiếmTìm kiếm  Thành viênThành viên  NhómNhóm  Đăng kýĐăng ký  Đăng NhậpĐăng Nhập  
Top posters
locvipvn (783)
 
kocoten (324)
 
Black Dragon (281)
 
zippo (230)
 
RoronoaZoro (230)
 
i'm me (227)
 
New Name (204)
 
Mushroom (171)
 
♥Sukate♥ (168)
 
Parkour_t3'ng4~ (160)
 
Đăng Nhập
Tên truy cập:
Mật khẩu:
Đăng nhập tự động mỗi khi truy cập: 
:: Quên mật khẩu
Latest topics
» [19-20/11/2k10] A6 forever xD <Pics 20-11 coming soon...>
by s0rA_ng0k Sun Jan 22, 2012 8:07 pm

» it 's war mblaq
by s0rA_ng0k Sun Jan 22, 2012 7:59 pm

» Khát Vọng Thượng Lưu - Nguyễn Đình Vũ
by New Name Sat Jan 07, 2012 12:22 pm

» xin anh đừng-Emily ft Justatee & Lil Knight
by New Name Sat Jan 07, 2012 12:20 pm

» Tìm lại bầu trời
by New Name Sat Jan 07, 2012 12:18 pm

» Hướng dẫn tạo nút Thanks cho Forumotion
by vaicaluyen Thu Dec 29, 2011 3:23 pm

» A6 FOREVER(PART 2)
by RoronoaZoro Sun Nov 20, 2011 1:34 pm

» [HD 720p] A6 FOREVER (PART 4)
by ♥Sukate♥ Wed Nov 16, 2011 10:47 pm

» Hướng dẫn sử dụng Photoshop CS4
by locvipvn Wed Sep 28, 2011 5:11 pm

» Tau thích Luyện
by New Name Sat Sep 24, 2011 9:35 am

Thời tiết hôm nay
Upload files
Lượt truy cập
free counters
Bây giờ là...

Share | 
 

 [CSS] Các hiệu ứng đường link cho blog, 4rum

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down 
Tác giảThông điệp
locvipvn
Quản trị viên
Quản trị viên


Nam Bạch Dương Tí Tổng số bài gửi : 783
Tiền mặt : 1979
Được cảm ơn : 4
Sinh nhật : 31/03/1996
Ngày tham gia : 07/06/2010
Tuổi : 20
Đến từ : 9a6
Sở thích : game
Công việc : hacker
Slogan : tài năng có hạn, thủ đoạn có thừa

Bài gửiTiêu đề: [CSS] Các hiệu ứng đường link cho blog, 4rum   Sun Dec 26, 2010 11:18 am

Đầu tiên là hiệu ứng cho đường link lúc bình thường có cú pháp như sau

Code:
a{properties:value;}

Trong code trên các bạn có thể thay properties:value bằng nhiều thuộc tính khác nhau. Ví dụ như thay màu sắc cho link thì thêm color, thêm nền cho link thì thêm background... và nên nhớ mỗi thuộc tính phải cách nhau bởi dấu ";" nhé. Sau đây là một số hiệu ứng:

Code:
color:#FFFFFF
Chỉnh màu sắc cho link, có thể thay #FFFFFF bằng mã màu khác.

Code:
background-image:url(link)
Thay link bằng link hình bạn muốn, có thể tìm ở http://www.poqbum.com/animated_hover/ hoặc http://glitter-graphics.net/



Code:
font-size:Apx
Thay đổi độ lớn của tên link, thay A bằng số thích hợp

Code:
font-family:Tahoma
Thay đổi kiểu font, có thể thay Tahoma bằng tên font bạn muốn

Code:
font-style:italic
Chỉnh font chữ nghiêng

Code:
font-weight:bold
Chỉnh font chữ đậm

Code:
text-decoration:underline
Thay đổi thuộc tính cho link, có thể thay underline (gạch dưới) bằng none (không gạch), overline (gạch đầu), line-through (gạch giữa), blink (nhấp nháy). Lưu ý blink không hiển thị trên IE

Code:
border:1px dashed #fff;
Hiệu ứng đường viền. Trong toàn bộ code trên thì 1px là độ "dày" của đường viền, có thể thay 1 bằng số khác. dashed là kiểu đường viền có thể thay bằng dotted, solid, double, groove, ridge, inset, outset, inherit. Còn #fff là màu đường viền, có thể thay bằng mã màu khác

Ở phần trên là hiệu ứng cho đường link lúc bình thường. Ngoài ra còn hiệu ứng cho link ở nhiều trạng thái

Hiệu ứng đã click vào link và quay trở lại xem trang đó, visited nghĩa là được viếng thăm. Code này có tác dụng đánh dấu các link đã xem khi ta quay lại trang chủ.

Code:
a:visited{properties:value;}

Hiệu ứng khi di chuột vào link

Code:
a:hover{properties:value;}

Hiệu ứng khi click vào link và chưa buông ra

Code:
a:active{properties:value;}

Trong các code trên ở phần properties:value các bạn thay tương tự như phần cho link lúc bình thường.

Ví dụ code hiệu ứng link hình trái tim hồng bay lên

Code:
a:hover, a.link:hover, a.navbar:hover {background-image:url(http://i10.glitter-graphics.org/pub/7/7300hpyshmxute.gif); text-decoration:none;}

Tùy vào từng hiệu ứng và thuộc tính mà các bạn có thể tự sáng tạo cho đường link blog của mình. Và điều cuối cùng mình nhắc các bạn nên nhớ là các thuộc tính phải ngăn cách nhau bởi dấu ";"


Nothing is impossible :01:
Napoléon Bonaparte
Về Đầu Trang Go down
Xem lý lịch thành viên http://locvipvn.blogspot.com/
 

[CSS] Các hiệu ứng đường link cho blog, 4rum

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

Permissions in this forum:Bạn không có quyền trả lời bài viết
 :: Công Nghệ Thông Tin :: Lập Trình Web-
Chuyển đến