Đánh giá chủ đề:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Css3 button with icon Mybb
#1

Trích dẫn:Thay cho việc phải dùng các button bằng hình ảnh ta có thể dùng button bằng css3 .Nó sẽ cải thiện tốc độ load trang với các button cũng đẹp không thua gì các button bằng ảnh
Trong bài này ta sẽ tạo ra các button kèm icon cho Mybb bằng CSS3 và 1 chút css sprite

Trích dẫn:CSS Image Sprites là cách gộp nhiều ảnh nền cần sử dụng vào một file hình duy nhất và sử dụng thuộc tính background-position trong CSS với 2 vị trí Left, Top để xác định vị trí thành phần ảnh cần làm nền, nhằm giảm tải Request (yêu cầu) đến Server, và giảm dung lượng file hình, tăng tốc độ tải trang, tiết kiệm tài nguyên hệ thống.

-Ewebvn

Có thể đọc thêm về css sprite trên w3c tại đây

Trước tiên bạn cần download các icon Geepit để sử dụng tại đây

Sau đó ghép chung các icon cần dùng vào chung một tấm hình bằng photoshop với nền tranparent (trong suốt) và lưu lại dưới định dạng là .png

[Hình: thanhtv.png]

Chú ý : ghép các icon sao cho khoảng cách giữa các icon là đều nhau để dễ sử dụng css sprite cũng như công việc chỉnh sửa sau này.Ở đây t dùng công cụ guide (đường màu xanh) để dễ dàng phân cách giữa các icon
[Hình: VQzPF.jpg]


ACP -> Templates & Style -> Themes
Chọn theme bạn đang dùng
global.css
Chuyển sng tab Advanced mode ..thêm vào đoạn cuối code css

Mã:
a.buttonx {
background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #ffffff),color-stop(1, #dbdbdb));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#dbdbdb');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#dbdbdb')";
border: 1px solid #fff;
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
padding: 2px 6px;
text-decoration: none;
text-shadow: #fff 0 1px 0;
float: left;
margin-right: 5px;
margin-bottom: 5px;
display: block;
color: #597390;
line-height: 24px;
font-size: 14px;
font-weight: bold;
}

a.buttonx:hover {
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #ffffff),color-stop(1, #eeeeee));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#eeeeee');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#eeeeee')";
color: #000;
display: block;
}

a.buttonx:active {
background-image: -moz-linear-gradient(top, #dbdbdb, #ffffff);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #dbdbdb),color-stop(1, #ffffff));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#dbdbdb', EndColorStr='#ffffff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#dbdbdb', EndColorStr='#ffffff')";
text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5);
margin-top: 1px;
}
a.buttonx {
border: 1px solid #979797;
}

Sau đó vào phần Templates -> chọn theme
postbit templates..
Chọn các nút bấm tương ứng cần edit ..
Ví dụ postbit_email

thay thế toàn bộ bằng

Mã:
<a href="member.php?action=emailuser&amp;uid={$post['uid']}"class="buttonx" alt="{$lang->postbit_email}" title="{$lang->postbit_email}" >Email</a>

Và lưu lại là xong

Thế nhưng muốn chèn thêm icon thì ta làm như sau .Trước tiên thêm thẻ span vào các phần chữ ví dụ <span>Trích dẫn</span> và thêm một class cho nó nữa ví dụ là email, các class phân cách nhau bằng dấu space

Mã:
<a href="member.php?action=emailuser&amp;uid={$post['uid']}"class="buttonx email" alt="{$lang->postbit_email}" title="{$lang->postbit_email}" ><span>Email</span></a>

Và thêm css vào tiếp phần css ở trên

Mã:
a.buttonx.email {
padding-left: 11px;
}
a.buttonx.email span{
padding-left: 20px;
background: url(images/thanhtv.png) no-repeat 0 -2px;
}

Tương tự như các nút bấm khác

Mã:
a.buttonx.pm {
padding-left: 11px;
}
a.buttonx.pm span{
padding-left: 20px;
background: url(images/thanhtv.png) no-repeat 0 -22px;
}

Các thông số chỉ là tương đối bạn cần chỉnh sửa sao cho phù hợp với ảnh sprite của mình

Tuy nhiên sau khi làm xong nó hơi lệch sang bên trái
[Hình: oONky.jpg]

Ta muốn các button này căn sang phải nên phải khai báo thêm 1 class .

ví dụ
Mã:
<a href="member.php?action=emailuser&uid={$post['uid']}"class="buttonx email" alt="{$lang->postbit_email}" title="{$lang->postbit_email}" ><span>Email</span></a>

Ở đây ta thêm 1 class là align cho button edit

Các button ở phía bên phải cần thêm class align vào là : edit,newreply, report, warm

và thêm 1 dòng css tiếp phía dưới

Mã:
.align{float: right !important;}

Kết quả:

[Hình: ADKK0.jpg]
[Hình: 3BgNu.jpg]
Chúc vui vẻ

Theo bạn Thanh_rossi
Reply
Những người đã cảm ơn Noname


Có thể liên quan đến chủ đề
Chủ đề: Tác giả Trả lời: Xem: Bài mới nhất
  Share bộ nút CSS3 TTAC Noname 16 3,467 24-07-13, 11:21 AM
Bài mới nhất: btgvnws
  Hướng Dẫn Đồng Hồ Đếm ngược cho mybb Noname 0 803 14-11-12, 10:18 AM
Bài mới nhất: Noname
  [không mods] WYSIWYG Editor cho MyBB MyBB.vn 0 1,483 04-05-12, 01:32 AM
Bài mới nhất: MyBB.vn
  [sercurity]Hide Mybb Error Noname 0 697 02-05-12, 04:40 PM
Bài mới nhất: Noname
  [Share] Theme mybb.vn full css (đc sửa từ theme default mybb 1.6.7) MyBB.vn 0 1,121 16-04-12, 08:01 AM
Bài mới nhất: MyBB.vn

Chuyển nhanh:


User(s) browsing this thread: 1 Guest(s)
Diễn Đàn Thơ Văn Thi Ẩm Lâu|Nhà Hàng Sông Thơ