29 tháng 7, 2010

[Tut] Tạo hình nền trong suốt cho blog

TransparentBạn có thể xem mẫu minh hoạn hiệu ứng hình nền trong suốt “transparent background” tại demo blog hay như hình bên.

Để thực hiện việc tạo hiệu ứng trên bạn cần:
(1) Đăng nhập vào Blogger.com
(2) Vào Layout –> Edit HTML và click chọn vào Expand Widget Templates
(3) Cuộn chuột (Scroll down) xuống phần code(Outer, main, sidebar) của Blog muốn thực hiện nền trong suốt để chèn code Transparent.
Code thực hiện để tạo background trong suốt với màu nền là màu bạc 'silver' :
background-color: silver;
opacity:.850;
filter: alpha(opacity=85);
-moz-opacity: 0.850;
Để chèn code vào Outer-wrapper: nội dung này bao trùm toàn bộ mẫu blog (Body giống như là phần bên ngoài mẫu blog). Nói chung, bạn thiết kế một wrapper để chứa nhiều các block nhỏ trong đó. Các block chung hầu hết chứa trong Outer-wrapper là các Header, Content, và Footer.
Bạn tìm (find) tới #outer-wrapper { và chèn mã trên vào như sau:
#outer-wrapper {
background-color: silver;
opacity:.85;
filter: alpha(opacity=85);
-moz-opacity: 0.85;

width: 1024px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
 Khi đó hình nền trong suốt sẽ xuất hiện như hình minh họa dưới.

Transparent
Trước khi áp dụng hiệu ứng Hình nền trong suốt

Transparent Sau khi áp dụng

Ngoài ra bạn cũng có thể áp dụng chúng cho
sidebar-wrapper 
header-wrapper
footer-wrapper
Chú ý : Các phần(sections) trong blog của bạn có thể có tên khác nhau tùy thuộc vào từng mẫu template. Tuy nhiên về cơ bản các thành phần đều tưng ứng, sau khi ứng dụng cho các phần bạn hãy click vào Preview button để xe trước công việc đã thực hiện trước khi save để tiếp tục áp dụng cho các phần khác.
Bạn có thể thay đổi giá trị 'silver' trong mã code trên thành các màu khác như 'blue', 'red' để tạo hiệu ứng màu nền trong suốt khác.
Ngoài ra để phù hợp với mẫu template của blog bạn có thể thay đổi giá trị về mức độ đạm nhạt của độ trong suốt gọi là Opacity bằng cách thay đổi các giá trị '0.85' (cho opacitymoz-opacity) bằng bất kỳ giá trị nào nằm trong khoảng từ 0 tới 1; và thay đổi giá trị '85' cho filter: alpha(opacity=85)  với các số từ 1 tới 100.
Theo vnblognet.

Không có nhận xét nào:

Đăng nhận xét

Rất mong các bạn để lại comment giao lưu cùng mình :d