[ Bài viết mới · Thành viên · Nội quy diễn đàn · Tìm kiếm · RSS ]
  • Page 1 of 1
  • 1
Diễn đàn Share Info » Công Nghệ Phần mềm - Máy tính » HTML & CSS » CSS3 on-off button (CSS3 on-off button)
CSS3 on-off button
chugatrongchoaiDate: Chủ Nhật, 2013/08/04, 9:09 PM | Message # 1
Tân Binh đạt Huy chương
Nhóm: Sáng lập viên
Bài viết: 220
Huy chương: 9
Bài viết này tôi sẽ hướng dẫn các bạn tạo nút on-off với CSS3 pseduo-class :target và css3 selector.
Demo
Download

Bắt đầu với mã HTML

Code
<span class="button" id="on">
         <a href="#off" class="off" id="off">off</a>
         <a href="#on" class="on">on</a>
         <span class="slide"></span>
</span>


Ở đây toàn bộ button ta để trong thẻ span với id bằng on (để cho lúc khởi đầu button có giá trị on, nếu bạn muốn lúc đầu button có giá trị off thì đổi ngược lại). Bên trong nó là 2 thẻ a với 1 thẻ a có id là off. Cuối cùng là thẻ span class bắng slide là nút trượt.

Mã CSS
Bây giờ ta sắp xếp các thẻ cho giống hình trên với mã css:

Code
.button{
     position:relative;
     display:block;
     width:80px;
     height:36px;     
     background-color:#c8c8c8;
     border-radius:5px;
     box-shadow:0 0 3px rgba(0,0,0,0.5) inset;
}
   
.button a{
     display:block;
     text-align:center;
     background-color:transparent;
     float:left;
     width:40px;
     height:36px;
     line-height:36px;
     font-family:helvetica,arial,sans-serif;
     font-size:11px;
     text-transform:uppercase;
     font-weight:bold;
     color:#777;
}
   
.slide{
     display:block;
     width:38px;
     height:32px;
     background-color:#fff;
     background-image:-linear-gradient(top,#fff,#f1f1f1);
     position:absolute;
     left:2px;
     top:2px;
     border-radius:4px;
     box-shadow:0 0 2px rgba(0,0,0,0.2);     
   
}


Làm trượt nút với CSS3Trước tiên thêm thuộc tính transition cho thẻ span.slide:

Code
-moz-transition:all 0.2s ease;
-webkit-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
-ms-transition:all 0.2s ease;
transition:all 0.2s ease;


Sau đó sử dụng CSS3 :target và ~ selector để khi click làm trượt nút bằng cách thay đổi giá trị left của span.slide.

Code
#on:target  .slide{
     left:40px;
}
   
#off:target ~ .slide{
     left:2px;
}


Chữ ký: http://windowsworld.ucoz.com/
http://shareinfo.ucoz.org/
https://www.facebook.com/hdoantrannam
 
Diễn đàn Share Info » Công Nghệ Phần mềm - Máy tính » HTML & CSS » CSS3 on-off button (CSS3 on-off button)
  • Page 1 of 1
  • 1
Search:

Chat ()