| Code CSS sưu tầm được nè | |
|---|---|
| Tweet Topic Started: May 30 2008, 01:59 AM (290 Views) | |
| vampireknight | May 30 2008, 01:59 AM Post #1 |
![]()
Administrator
|
. Thay màu và font chữ cho nickname: Cái này có 1 giới hạn là nếu máy người xem có font chữ đó thì mới hiện chính xác được (khuyến cáo ko dùng font VNI) Code: #ypf-coreid .user-card .user-info .user-name h1 span.nickname { color:#ffffff; font-family:courier new; /* Phông chữ */ font-size:16px; /* Cỡ chữ */ } DEMO: 2. Thay nickname bằng file hình: (nên dùng dạng .gif hay .png để có nền trong suốt ) Code: #nickname { display: none; /* Dòng này để ẩn phần nickname bằng chữ */ } #nickname-edit h1 { background: url(http://i153.photobucket.com/albums/s237/kelangthang182000/nickname.png); /* link tới hình dùng làm nickname */ background-repeat:no-repeat; color: #ffffff; height: 100px; /* chiều cao hình */ width: 400px; /* chiều rộng hình */ } DEMO: 3. Thay khung ảnh cho Avartar: Code: #ypf-coreid .user-card .user-images { background-image:url('http://i153.photobucket.com/albums/s237/kelangthang182000/khunghinh.png'); /* Link ảnh */ } DEMO: B. Background cho Mash (chèn hình nền) 1. Dạng tile: hình nền lặp lại nhìu lần (khuyến cáo nên dùng hình ít màu sắc, có màu tối và phải làm nổi bật màu chữ, ko dùng section trong suốt sẽ gây mỏi mắt cho người xem !) Code: body { background-color:#232f39; background-image:url('http://i5.ifrm.com/1046/116/upload/p8472559.gif'); /* link đến hình làm nền */ background-attachment:scroll; font-family:Verdana, Tahoma, Arial, sans-serif; /* font chữ */ color:#97bcd0; /* màu chữ */ } 2. Dạng 1 hình cố định: cuộn được Code: body { background-color:#232f39; /* Màu nền */ background-image:url('http://i5.ifrm.com/1046/116/upload/p8472559.gif'); /* link hình */ background-attachment:scroll; background-position:top; /* Vĩ trí của hình: có thể thay top bằng: left, right, bottom, center...hoặc ai rành CSS thì dùng % hay px để canh chính xác hơn */ background-repeat:no-repeat; font-family:Verdana, Tahoma, Arial, sans-serif; color:#97bcd0; /* Màu chữ */ } 3. Loại hình nền ko cuộn: chỉ cuộn chữ (khuyến cáo loại này nên dùng hình ít màu sắc và section ko trong suốt thì chữ sẽ dễ đọc hơn) Code: body{ background-image:url("http://i5.ifrm.com/1046/116/upload/p8472559.gif"); /* link hình */ background-attachment: fixed; background-position: center; /* vị trí hình: có thể thay bằng left, right... */ background-repeat:no-repeat; /* nếu muốn hình lặp đi lặp lại thì thay bằng "repeat" */ background-color:ffffff; } 4. Dạng Top & Bottom (giống 360 yahoo blog, gồm có 2 hình trên và dưới): Code: body { width:921px; /* Chiều rộng của hình nền */ background-color:#232f39; /* Màu nền */ background-image:url('http://i5.ifrm.com/1046/116/upload/p8493203.jpg'); /* Link hình dùng làm TOP */ background-position:top left; background-repeat:no-repeat; padding-top:143px; color:#c29157; /* Màu chữ */ } .col-AA { background:url('http://i5.ifrm.com/1046/116/upload/p8493201.jpg'); /* Link hình dùng làm BOTTOM */ background-position:bottom right; background-repeat:no-repeat; padding-bottom:133px; } C. Đề mục 1. Đổi font chữ, màu sắc, kích thước của đề mục: Code: h3 { font-family:Words of love; /* tên font */ font-size:36px; /* Cỡ chữ */ color:#ffffcc; /* màu sắc */ } DEMO: 2. Chèn hình vào đề mục: -Chèn vào đầu đề mục: Code: h3 { font-family: Tahoma, serif; font-size: 26px; font-weight: normal; padding-left: 40px; background-image:url(http://i153.photobucket.com/albums/s237/kelangthang182000/emotion-magic1.png); /* link hình */ background-position:left; background-repeat:no-repeat; } DEMO: -Chèn hình trên đề mục: Code: .x1{ background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i153.photobucket.com/albums/s237/kelangthang182000/emotion-magic1.png'/* link hình */, sizingMethod='scale'); height: 104px; /* chiều cao hình */ width: 98px; /* chiều rộng hình */ display: block; position:absolute; top: -30px; left:10px; z-index: 20; } .x1[class]{ background: transparent url(http://i153.photobucket.com/albums/s237/kelangthang182000/emotion-magic1.png /* link hình */) no-repeat; } } DEMO: Ngoài ra nếu bạn biết CSS bạn có thể thay các đề mục trên Máh bằng hình ảnh của mình ! |
I hate went I cry
| |
![]() |
|
| 1 user reading this topic (1 Guest and 0 Anonymous) | |
| « Previous Topic · Mash · Next Topic » |







8:16 AM Jul 11