• Tùy chọn
• Đăng nhập
• Đăng ký
• Xem như trên Máy tính
• Accelerated Mobile Pages Theme

Css3 button with icon Mybb

• Trang chủ

  • Thủ Thuật Access
  • Warehouse
  • Liên Kết Website
  • Góc MyBB
  • Css3 button with icon Mybb
• Css3 button with icon Mybb

• Css3 button with icon Mybb

  MyBB.vn > 29-03-12, 04:49 PM

  
  

  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
  
  
  
  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
  
  
  
  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
  
  
  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ả:
  
  
  
  Chúc vui vẻ
  
  Theo bạn Thanh_rossi
• Bài trước Bài tiếp