Thiết kế Module Profile ấn tượng ![Update]

Thư mục: Yahoo!360plus |

Đăng ngày: 09:02 08-12-2008

Với rất nhiều hướng dẫn Yahoo Plus làm cho ngôi nhà của bạn trở lên đẹp mắt hơn rồi,giờ là lúc nâng cao và tạo phong cách riêng một chút,mời các bạn tham khảo bài viết sau của bạn W].Dephia nhé.(Dạo này mình hơi bận nên lười viết bài,thấy cái gì hay hay thì post lại chia sẻ cho mọi người cùng nghiên cứu nha,vì người truy cập vào Blog mình khá nhiều mà,hehe).

Bạn có muốn một cái Profile ấn tượng như thế này không?

1.Code cho Module Profile

Đầu tiên là Code cho Mod này :

Code:

#profile_highlight .rc {background:transparent url(Link ảnh Trên) no-repeat left bottom;height:X px}
#profile_highlight .rc_ft {background:transparent url(Link Ảnh Dưới) no-repeat left top;height: Y px}
#profile_highlight .rc_bd {background:transparent url(Link ảnh Giữa) repeat-x top;}
#profile_highlight .rc_bd div.rc_bc, #profile_highlight .rc_ft div, #profile_highlight .rc div,#profile_highlight .rc_bd .rc_bc .bd {background:transparent;}

Như các bạn đã thấy những phần mình in đậm và đổi màu :

Các đọan Link ảnh trên, dưới và ở giữa các bạn phải thay ảnh đúng vị trí vào cho phù hợp nhé.
Còn Height: ở đây, muốn hiện chiều cao của ảnh 100% bạn phải thay X px, Y px bằng đúng kích thước chiều cao của ảnh .

Muốn xem chiều cao của ảnh, chỉ việc Right Click vào ảnh chọn Properties, chuyển sang thẻ Sumary, nhìn vào dòng Height là có thể thấy được ảnh cao bao nhiêu.

2.Tạo ảnh

Ở đây, mình chia sẻ một số cách làm ảnh như sau :

Bước 1 :

Đầu tiên bạn thiết kế một ảnh với kích thước 150 x 300 px.

Bước 2 :

Sau đó cắt ảnh đó ra làm 3 phần (Dùng Photoshop hoặc PhotoScape cũng được)

Phần đầu : Cắt với kích thuớc 150 x (50-60 px) .
Phần giữa : Phần này các bạn nên làm sao mà có thể lặp lại được, vì vậy chỉ nên cắt từ 150 x 5 px thôi.
Phần cuối : Cắt phần này tùy ý, đây là phần phía dưới cùng

Bước 3 :

Sau khi đã cắt xong ảnh, việc cuối cùng là up ảnh lên host, và thay link ảnh vào đọan Code đã cho.
Cuối cùng là wăng code vào CSS thôi .

Vậy là xong các bước để làm rồi nhé. Chúc các bạn thành công trong việc trang trí cho Mod Profile của mình .

Phần 2.Share!