Thiết kế Module Profile ấn tượng ![Update]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[/url] 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:
Như các bạn đã thấy những phần mình in đậm và đổi mà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)
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 .
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;} |
- 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 .
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 .
Được sửa bởi (¯`'•.¸†•--«|{€ñ»--•†¸.•' ngày 2009-07-20, 5:55 pm; sửa lần 2. (Reason for editing : thíu)