Tạo hiệu ứng mưa rơi, tuyết rơi, lá bay,… trên nền/background Yahoo! Blog


Tạo hiệu ứng mưa rơi rơi, sao rơi rơi, lá bay bay, tuyết bay bay hay trái tim rụng lã chã,… trên một background/ nền trong Yahoo! Blog thực chất là việc chồng lớp của 2 hình ảnh: Hình ảnh hiệu ứng mưa rơi, tuyết rơi,.. nằm trên lớp hình ảnh nền/back ground. 

© Cậu ấm thơ ngây

Vậy nên, để tạo được hiệu ứng mưa trước hết chúng ta cần phải có 2 hình ảnh:

  • Ảnh 1: Hình ảnh nền/ Background.
  • Ảnh 2: Hình ảnh có hiệu ứng mưa rơi, tuyết rơi, lá bay, trái tim rơi,… (Yêu cầu ảnh này phải có nền trong suốt)

Trước hết, để dễ hình dung về hiệu ứng mưa tuyết rơi trên blog các bạn có thể xem trước DEMO TẠI ĐÂY:

bướm bay, cậu ấm thơ ngây, hiệu ứng, mưa rơi, trên nền blog, tuyết rơi, yahoo
Tạo hiệu ứng mưa rơi, tuyết rơi, lá bay,… trên Yahoo! Blog 

*Hướng dẫn/ chia sẻ cách làm/ tạo hiệu ứng mưa rơi, tuyết rơi, lá bay,… trên nền/background Yahoo! Blog:

Trước hết, nếu bạn nào chưa biết cách nhúng mã CSS vào trong các phần mở rộng bên ngoài (tiện ích widget) để tác động đến giao diện của Yahoo! Blog. Thì vui lòng tham khảo bài viết:

>>> [ Yahoo! Blog ] Hướng dẫn thiết kế/customise giao diện/skin/theme (P1)

1. Chia sẻ mã/code CSS tạo hiệu ứng tuyết rơi trên Yahoo! Blog

a. Mã/ code CSS chèn hình ảnh lớp nền/ background cho blog:

html {background:url(Ảnh 1 – Ảnh nền/ background) no-repeat center fixed;}

b. Mã/ code CSS chèn hình ảnh lớp phía trên: Lớp ảnh mang hiệu ứng mưa rơi, tuyết rơi, lá bay, trái tim rơi,…

body { background:transparent url(Ảnh 2 – Ảnh mang hiệu ứng) repeat center;}

Dưới đây là mã CSS mình đã dùng trong DEMO :

html {background:url(http://www.wallpapershunt.com/user-content/uploads/wall/o/22/Drawn-Snowman-Widescreen-Wallpaper.jpg) no-repeat center fixed;}
body {
background:transparent url(https://lh3.googleusercontent.com/-7qqWeNe5qqo/T4_vJTreaEI/AAAAAAAAAeM/xdR1K9bMfG4/s128/www.zizoo.vn-Tao-hieu-ung-mua-roi-tuyet-roi.gif) repeat center;}

2. Chia sẻ một số mã/code CSS tạo hiệu ứng khác trên Yahoo! Blog

DEMO Mã/code CSS
html {background:url(Ảnh 1 – Ảnh nền/ background) no-repeat center fixed;}
body { background:transparent url(https://lh5.googleusercontent.com/-Ucow08VUaNs/T498taOcORI/AAAAAAAAAck/VfVmkhBtt28/s128/%5B-www.zizoo.vn-%5D-Hieu-ung-mua-roi-tuyet-roi-cho-blog%20%281%29.gif) repeat center;}
html {background:url(Ảnh 1 – Ảnh nền/ background) no-repeat center fixed;}
body { background:transparent url(https://lh5.googleusercontent.com/-o95mHDo-2h4/T498tRwwxrI/AAAAAAAAAcg/XtEPEp_jd8M/s128/%5B-www.zizoo.vn-%5D-Hieu-ung-mua-roi-tuyet-roi-cho-blog (10).gif) repeat center;}
html {background:url(Ảnh 1 – Ảnh nền/ background) no-repeat center fixed;}
body { background:transparent url(https://lh3.googleusercontent.com/-gCQZ1if0ZB4/T498tVcaBKI/AAAAAAAAAcc/K1-YxKaveE0/s128/%5B-www.zizoo.vn-%5D-Hieu-ung-mua-roi-tuyet-roi-cho-blog (11).gif) repeat center;}
html {background:url(Ảnh 1 – Ảnh nền/ background) no-repeat center fixed;}
body { background:transparent urlhttps://lh3.googleusercontent.com/-ol3CH2_VdcE/T498ul-ZX-I/AAAAAAAAAco/J8htA8xhe5M/s128/[-www.zizoo.vn-]-Hieu-ung-mua-roi-tuyet-roi-cho-blog (12).gif) repeat center;}
html {background:url(Ảnh 1 – Ảnh nền/ background) no-repeat center fixed;}
body { background:transparent url(https://lh6.googleusercontent.com/-kbVTOdThggE/T498vCwSOgI/AAAAAAAAAc4/jwaULsC0pbU/s128/%5B-www.zizoo.vn-%5D-Hieu-ung-mua-roi-tuyet-roi-cho-blog (2).gif) repeat center;}
html {background:url(Ảnh 1 – Ảnh nền/ background) no-repeat center fixed;}
body { background:transparent url(https://lh3.googleusercontent.com/-FDVIrW-pn94/T498xjilx8I/AAAAAAAAAdc/AZt4CkJkTgs/s128/%5B-www.zizoo.vn-%5D-Hieu-ung-mua-roi-tuyet-roi-cho-blog (8).gif) repeat center;}
html {background:url(Ảnh 1 – Ảnh nền/ background) no-repeat center fixed;}
body { background:transparent url(https://lh3.googleusercontent.com/-7qqWeNe5qqo/T4_vJTreaEI/AAAAAAAAAeM/xdR1K9bMfG4/s128/www.zizoo.vn-Tao-hieu-ung-mua-roi-tuyet-roi.gif) repeat center;}
html {background:url(Ảnh 1 – Ảnh nền/ background) no-repeat center fixed;}
body { background:transparent url(https://lh6.googleusercontent.com/-ZHOqtOjaYpM/T498wl-4TkI/AAAAAAAAAdU/U8wgbRT_opM/s128/%5B-www.zizoo.vn-%5D-Hieu-ung-mua-roi-tuyet-roi-cho-blog (6).gif) repeat center;}

*Lưu ý: Những đoạn code mình share chỉ mới thay thế link hình tạo hiệu ứng thôi nhé. Các bạn lựa chọn cho mình một hình nền, background thay vào Ảnh 1 ( Ảnh nền/ background ) – Để tạo nền cho blog của mình nha.

3. Các hiệu ứng phụ trợ

a. Mã/ code CSS làm trong suốt nền, trong suốt blog:

Để làm trong suốt nền, trong suốt blog, các bạn tham khảo qua bài viết: [ Yahoo! Blog ] Hướng dẫn/chia sẻ cách làm trong suốt toàn bộ blog nha.

b. Mã CSS xóa bỏ phần header và viền của Bài viết/ Post – Ảnh/ Photo:

#hd,
#asb-menu li.first, 
#asb-menu li, 
#asb-menu li.current, 
#asb-menu li.current a, 
#asb-menu li a {background:transparent url(https://lh5.googleusercontent.com/-85bJfKN8PYk/T3kyMgBlJXI/AAAAAAAAAJ0/aTq9AMb2JZ0/s2/trong-suot.png);border:none;}

4. Loại bỏ hiệu ứng mưa rơi, tuyết rơi, lá bay,… trên nền/background Yahoo! Blog khi rê chuột vào đọc blog

Hiệu ứng mưa rơi, tuyết rơi, lá bay,… trên blog, tạo cho chúng ta những cảm giác vui mắt và thích thú. Tuy nhiên, khi nhìn nhiều quá thì sẽ hơi đau đầu vào chóng mặt. Đặc biệt khiến chúng ta rất khó đọc nội dung của bài viết.

Để loại bỏ hiệu ứng hiệu mưa rơi, tuyết rơi, lá bay,… trên nền/background Yahoo! Blog khi rê chuột vào đọc blog thì chúng ta dùng đoạn mã/ code CSS sau:

body:hover {background:transparent ;}

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

Đừng quên ghé thăm blog Béo mỗi ngày để cập nhập thêm các thông tin và các bài hướng dẫn/chia sẻ mẹo nhỏ/ thủ thuật để chỉnh sửa/ tùy biến Yahoo! Asia Blog nhé. 

Mọi ý kiến đóng góp hoặc thắc mắc, các bạn có thể gửi về địa chỉ e-mail: info@yeuxa.com hoặc gửi vào phần bình luận ở cuối bài viết. Béo sẽ trả lời lại các bạn ngay khi có thể. 

© Cậu ấm thơ ngây

Cậu ấm thơ ngây blog