Các hiệu ứng HTML cho trang web
Các hi u ng HTMLệ ứ
B n mu n trang web c a mình trông tuy t v i, nh ng thi u k năng phát ạ ố ủ ệ ờ ư ế ỹ
tri n web?ể Đ ng tuy t v ng! B n không c n ph i bi t CSS ho c PHP đ ừ ệ ọ ạ ầ ả ế ặ ể
xây d ng m t trang web a thích. Bài vi t này s đ a ra cho b n 7 m u ự ộ ư ế ẽ ư ạ ẫ
hi u ng HTML mi n phí. Chúng s nâng cao ch c năng và tr i nghi m ệ ứ ễ ẽ ứ ả ệ
ng i dùng cho trang web c a b n. Và chúng có th ch a m t s CSS và ườ ủ ạ ể ứ ộ ố
PHP n a. Có l m t trong nh ng hi u ng này là th b n đang tìm ki m.ữ ẽ ộ ữ ệ ứ ứ ạ ế
Các hi u ng HTMLệ ứ
1. Hi u ng Parallaxệ ứ
Có th b n đã th y hi u ng Parallax trong các trang báo tr c tuy n. Khi ể ạ ấ ệ ứ ự ế
b n cu n xu ng bài báo, hình n n s chuy n đ ng ch m h n so v i n i ạ ộ ố ề ẽ ể ộ ậ ơ ớ ộ
dung tr c. Khi b n nh p m t ph n khác c a bài vi t, hình n n s thay ở ướ ạ ậ ộ ầ ủ ế ề ẽ
đ i. Đó là m t hi u ng tuy t v i đ t o chi u sâu hình nh cho n i dung.ổ ộ ệ ứ ệ ớ ể ạ ề ả ộ
Vì đây không ph i là hi u ng HTML đ n thu n, nên bài vi t ch có th ả ệ ứ ơ ầ ế ỉ ể
cung c p nh GIF đ ng đ minh h a.ấ ả ộ ể ọ
D i đây b n s th y m t phiên b n c b n c a hi u ng Parallax, m t ướ ạ ẽ ấ ộ ả ơ ả ủ ệ ứ ộ
h p văn b n di chuy n trên m t hình n n tĩnh khi b n cu n trang.ộ ả ể ộ ề ạ ộ
B n có th t o hi u ng này b ng cách sao chép code trên tạ ể ạ ệ ứ ằ ừ W3Schools
Phiên b n ph c t p nh t c a hi u ng này là s k t h p c a HTML, CSS ả ứ ạ ấ ủ ệ ứ ự ế ợ ủ
và JS.
B n có th t i hi u ng trên tạ ể ả ệ ứ ừ CodePen
2. H p văn b n có th cu nộ ả ể ộ
Đây là m t y u t HTML đ n gi n nh ng tính h u ích c a nó cho phép ộ ế ố ơ ả ư ữ ủ
b n đóng gói đo n văn b n dài thành đ nh d ng nh g n. B ng cách này nóạ ạ ả ị ạ ỏ ọ ằ
không chi m toàn b không gian trên trang.ế ộ
HTML đ u vào:ầ
<div style=”width: 25%; height: 50px; overflow: auto; scrollbar-face-color:
#CE7E00; scrollbar-shadow-color: #FFFFFF; br /scrollbar-highlight-color:
#6F4709; scrollbar-3dlight-color:#11111; scrollbar-darkshadow-color:
#6F4709; br /scrollbar-track-color: #FFE8C1; scrollbar-arrow-color:
#6F4709;”>Ph n n i dung b n mu n thêm vào đây</div>ầ ộ ạ ố
N u mu n đi u gì đó thú v , b n cũng có th l y code cho m t h p nh n ế ố ề ị ạ ể ấ ộ ộ ậ
xét có th tùy ch nh t Quackit.com. H cung c p m t s m u, nh ng b n ể ỉ ừ ọ ấ ộ ố ẫ ư ạ
cũng có th s d ng trình ch nh s a c a h đ t thay đ i và ch y code ể ử ụ ỉ ử ủ ọ ể ự ổ ạ
c a riêng b n.ủ ạ
3. Đánh d u văn b nấ ả
V i th HTML <span> đ n gi n, b n có th thêm hàng t n hi u ng vào ớ ẻ ơ ả ạ ể ấ ệ ứ
văn b n ho c hình nh. L u ý r ng không ph i t t c chúng đ u ho t ả ặ ả ư ằ ả ấ ả ề ạ
đ ng trên các trình duy t. Th HTML đ c đ c p đây làm vi c trong ộ ệ ẻ ượ ề ậ ở ệ
Google Chrome, Microsoft Edge và Mozilla Firefox.
HTML đ u vào:ầ
<span style=”background-color: #FFFF00″>Văn b n b n mu n đánh d u ả ạ ố ấ ở
đây</span>
4. Thêm hình n n vào văn b nề ả
T ng t nh v y, b n có th thay đ i màu c a văn b n ho c thêm m t ươ ự ư ậ ạ ể ổ ủ ả ặ ộ
hình n n. Đi u này ch th c s thú v n u văn b n c a b n có kích th c ề ề ỉ ự ự ị ế ả ủ ạ ướ
đ l n, đó là lý do t i sao b n cũng nên tăng kích th c phông ch .ủ ớ ạ ạ ướ ữ
Đ u vào:ầ
<span style=”background-image: url(http://cdn.makeuseof.com/wp-
content/uploads/2017/09/Background-Image.jpg?x85023); font-size:
20pt”>Văn b n b n c n thêm hình n n đây</span>ả ạ ầ ề ở
5. Thêm chú gi i cho tiêu đả ề
M t chú gi i tiêu đ xu t hi n khi b n di chuy n chu t qua m t đo n văn ộ ả ề ấ ệ ạ ể ộ ộ ạ
b n ho c hình nh. B n bi t đi u này t hình nh ho c văn b n liên k t. ả ặ ả ạ ế ề ừ ả ặ ả ế
Đây là cách b n có th thêm nó vào văn b n thu n.ạ ể ả ầ
Đ u vào:ầ
<span title=”See, this is the tooltip. :)”>N i dung b n mu n gi i thích ộ ạ ố ả ở
đây</span>
6. Cu n văn b n ho c t o hi u ng văn b n chuy n đ ng lên xu ngộ ả ặ ạ ệ ứ ả ể ộ ố
Khi tìm ki m "marquee html" trên Google, b n s th y dòng ch thông báo ế ạ ẽ ấ ữ
th i gian tìm ki m k t qu chuy n đ ng. Đó là m t hi u ng đ c t o b iờ ế ế ả ể ộ ộ ệ ứ ượ ạ ở
th marquee. M c dù tính năng HTML này đã b ph n đ i, nh ng h u h t ẻ ặ ị ả ố ư ầ ế
trình duy t v n h tr nó.ệ ẫ ỗ ợ
Đ u vào:ầ
<marquee>N i dung văn b n b n mu n cu n đây</marquee>ộ ả ạ ố ộ ở
B n có th thêm các thu c tính khác đ ki m soát di chuy n, màu n n, ạ ể ộ ể ể ể ề
h ng, chi u cao và h n th n a. Nh ng hi u ng này có th tr nên khá ướ ề ơ ế ữ ữ ệ ứ ể ở
khó ch u n u b n l m d ng nó.ị ế ạ ạ ụ
Đ có hi u ng văn b n r i, hãy chuy n đ n Quackit m t l n n a và sao ể ệ ứ ả ơ ể ế ộ ầ ữ
chép code marquee tùy ch nh cao.ỉ
7. Thêm menu chuy n đ iể ổ
Các hi u ng HTML thú v nh t là các hi u ng HTML đ ng. Tuy nhiên, ệ ứ ị ấ ệ ứ ộ
chúng th ng d a vào script. Nó ph c t p h n m t chút so v i th HTML ườ ự ứ ạ ơ ộ ớ ẻ
bình th ng vì nó ho t đ ng v i m t b ng style và các script. u đi m là ườ ạ ộ ớ ộ ả Ư ể
không ph i t i t p CSS ho c script đ làm nó ho t đ ng, b n có th đ t ả ả ệ ặ ể ạ ộ ạ ể ặ
t t c các thông tin c n thi t vào ph n <head> c a trang web.ấ ả ầ ế ầ ủ
Đ u vào:ầ
Thêm code sau vào ph n <head> c a trang:ầ ủ
<style type=”text/css”>
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
có thể bạn quan tâm
Tiểu luận: Tạo các phần tử HTML, định dạng các phần tử HTML bằng CSS,...
47
753
281
Kỹ thuật
47
(New)
Các phần tử trong HTML
3
746
327
Lập trình
3
(New)
Những điều cần biết về HTML
102
801
411
Lập trình
102
(New)
Phần tử Head trong HTML
4
942
418
Lập trình
4
(New)
Hướng dẫn chi tiết về ngôn ngữ HTML trong lập trình web
36
1.056
270
Đồ họa, thiết kế
36
(New)
Công cụ soạn thảo HTML miễn phí tốt nhất cho Windows 2018
10
1.182
264
Lập trình
10
(New)
Khóa luận: Điện lực Nghệ An- Thực trạng, hiệu quả và sự cần thiết để n...
105
816
317
Kinh tế - Thương mại
105
(New)
Thực trạng hiệu quả sử dụng vốn và một số giải pháp nhằm nâng cao hiệu...
84
1.172
312
Kinh tế quản lý
84
(New)
thông tin tài liệu
Bạn muốn trang web của mình trông tuyệt vời, nhưng thiếu kỹ năng phát triển web? Đừng tuyệt vọng! Bạn không cần phải biết CSS hoặc PHP để xây dựng một trang web ưa thích. Bài viết này sẽ đưa ra cho bạn 7 mẫu hiệu ứng HTML miễn phí. Chúng sẽ nâng cao chức năng và trải nghiệm người dùng cho trang web của bạn. Và chúng có thể chứa một số CSS và PHP nữa. Có lẽ một trong những hiệu ứng này là thứ bạn đang tìm kiếm.
Mở rộng để xem thêm
tài liệu mới trong mục này
tài liệu hot trong mục này
tài liệu giúp tôi
Nếu bạn không tìm thấy tài liệu mình cần có thể gửi yêu cầu ở đây để chúng tôi tìm giúp bạn!
×
