Thiết kế Module Profile ấn tượng

Bạn có muốn có 1 profile giống như thế này ko ?

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!

Code:

#profile_highlight .rc {background:transparent url(http://i514.photobucket.com/albums/t342/wdephia1/Post/profile/profile1_r1_c1.png) no-repeat left bottom;height:45px;}
#profile_highlight .rc_ft {background:transparent url(http://i514.photobucket.com/albums/t342/wdephia1/Post/profile/profile1_r4_c1.png) no-repeat left top;height:45px;}
#profile_highlight .rc_bd{background:transparent url(http://i514.photobucket.com/albums/t342/wdephia1/Post/profile/profile1_r2_c1.png) repeat-y left top;height:280px;}
#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;}