Hướng dẫn Sử dụng CSS3 để tạo Tabs

[PVS]

Sử dụng CSS3 để tạo Tabs

Ở trong tutorial này mình sẽ hướng dẫn các bạn làm Tab Nội Dung với CSS3. Trước đây mọi người vẫn hay làm bằng jquery, nhưng từ khi có sự ra đời của CSS3 thì công việc này được đơn giản đi rất nhiều. Đối với những bạn chưa biết gì về Jquery có lẻ tutorial này sẽ làm các bạn thấy thích thú.

Ở trong tutorial này mình muốn code được ngắn gọn nên sẽ không fix cho các trình duyệt chrome hay opera v.v… Nhưng trong demo thì các bạn vẫn chạy được trên các trình duyệt khác nhau.

Chuẩn bị

<section class="tabs">
    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
    <label for="tab-1" class="tab-label-1">About us</label>
      
    <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
    <label for="tab-2" class="tab-label-2">How we work</label>
      
    <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
    <label for="tab-3" class="tab-label-3">References</label>
      
    <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
    <label for="tab-4" class="tab-label-4">Contact us</label>
              
    <div class="clear-shadow"></div>
                  
    <div class="content">
        <div class="content-1">
            <p>Some content</p>
        </div>
        <div class="content-2">
            <p>Some content</p>
        </div>
        <div class="content-3">
            <p>Some content</p>
        </div>
        <div class="content-4">
            <p>Some content</p>
        </div>
    </div>
</section>

Mình sẽ giải thích sơ qua đoạn code HTML này. Ở đây, chúng ta quan tâm nhất 2 thẻ sau:
• Thẻ input
– Thuộc tính type=’radio’
– Thuộc tính name của tất cả các thẻ phải giống nhau. Vì sao ta phải đặt giống nhau như vậy? Bởi vì ta muốn chỉ có duy nhất 1 thẻ input được chọn nên ta phải đặt nó giống nhau.
– Id: Điều này tôi sẽ giải thích ở thẻ Label
– Class: để ta style css cho input
– Checked=”checked”. Các bạn thấy rằng, chỉ có duy nhất thẻ input đầu tiên mới có thuộc tính này, các thẻ input còn lại không có. Bởi vì, khi người dùng lần đầu tiên truy cập vào trang web hoặc F5 thì nếu không có thuộc tính này nó sẽ không biết là thằng nào được check nên sẽ không hiển thị nội dung lên. Nói tóm lại, thuộc tính này dùng để hiển thị nội dung của tab thứ nhất và ẩn các tab còn lại. Khi sản phẩm đã hoàn thành, các bạn có thể xoá thuộc tính này đi để thấy rõ tầm quan trọng của thuộc tính này.
• Thẻ label
– For: Các bạn thử quan sát xem, cái for ở thẻ label và cái id ở thẻ input nội dung giống nhau. Tác dụng của nó là thay vì ta phải tíck vào radio button thì ta có thể click chuột vào label nó sẽ trỏ tới thằng input và tick vào radio button
– Class: để ta style css cho label
Còn các thẻ div phía dưới dùng để chứa nội dung cho các Tab.

Style CSS

.tabs{
    width:750px;
    margin:0 auto 50px;
    position:relative;
}

Ở đây mình đặt section có độ rộng là 750px, tuỳ các bạn thích đặt bao nhiêu thì đặt. Mình cho position: relative vì mình muốn di chuyển các thẻ input của nó.

.tabs input{
    position:absolute;
    top:0;
    left:0;
    display:none;   
}

Như ở trên đã nhắc đến .tabs mình cho là relative thì ý đồ của mình cho các thẻ input này là position:absolute với top:0 và left:0 để nó dồn hết về 1 chỗ, sau đó mình cho nó ẩn đi bằng thuộc tính display:none;

.tabs label{
    display:block;
    float:left;
    position:relative;
    padding:10px 30px;
    line-height:1.5em;
    min-width:55px;
    text-align:center;
    color: #385c5b;
    font-size:13px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:1px;
    cursor:pointer;
    text-shadow:1px 1px 1px rgba(255,255,255,0.3);
    background:-moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
    border-radius:5px 5px 0 0;
    box-shadow:2px 0px 2px rgba(0,0,0,0.1),-2px 0 2px rgba(0,0,0,0.1)/*0.1*/
}

Tiếp theo ta sẽ Style cho thẻ label. Đầu tiên mình cho nó là display:block để nó trở thành 1 khối, nhưng mỗi label sẽ nằm trên mỗi dòng cho nên mình sẽ sử dụng thuộc tính float:left để tất cả label nằm trên 1 hàng. Sau đó mình có sử dụng thuộc tính position:relative để sử dụng cho lớp giả (pseudo-class) :after. Các thuộc tính còn lại chủ yếu để style cho Label được bắt mắt hơn thôi, các bạn có thể style theo ý tưởng của mình.

.tabs label:hover{
    background:#5ba4a4;
}

Khi ta di chuột vào label thì đối tượng sẽ thay đổi màu nền

.tabs label:after{
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:5px;
    background:#fff;
    left:0;
    bottom:-5px;
}

Ở trên mình có nhắc đến (pseudo-class) :after, thì nó chính là đoạn code này. Vì sao mình dùng thuộc tính này. Bởi vì mình làm rồi nên tôi biết. (kakaka. Đùa chút cho vui thôi). Đoạn code này mình dùng để che đi phần bóng đổ của thẻ .content div .Các bạn cứ làm theo mình đi, sau khi hoàn thành sản phẩm các bạn thử xoá đoạn code này đi thì sẽ thấy rõ tác dụng của label:after này.
Mình sẽ giải thích nội dung đoạn code như sau: content để thêm nội dung (xác định nội dung được thêm vào). Display:block để cho nó trở thành 1 khối và có chiều cao(height) là 5px, màu nền (background) là màu trắng (cùng màu với .content div để che đi phần bóng đổ). Sau đó sử dụng left và bottom để di chuyển sao cho hợp lý.

.clear-shadow{
    clear:both;
}

Khi ta float label sang left thì nội dung nó sẽ chạy lên phía trên, nên ta cần sử dụng 1 thẻ div rỗng để cắt ngang phần label và phần nội dung.

.content{
    position:relative;
    width:100%;
z-index:5 !important;
}

Bây giờ đến phần style cho nội dung. Ở thằng .content này ta cho position:relative để di chuyển các thành phần div con của nó.

.content div{
    position:absolute;
    overflow:hidden;
    top:0;
    left:0px;
    opacity:0;
    background:#fff;
    padding:10px 40px 30px;
    border-radius:0 5px 5px 5px;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
    transition:opacity .4s;
}

Đây chính là các thành phần div con của thằng .content, cứ mỗi nội dung thuộc mỗi tab ta sẽ cho vào 1 thẻ div.
Mình sử dụng position:absolute; top:0;left:0 để gộp nội dung của tất cả thẻ div về 1 vị trí với toạ độ trên = 0 và trái = 0. Ở đây mình có sử dụng overflow:hidden để che đi những phần dư thừa nằm bên ngoài div và opacity:0 để ẩn các nội dung bên trong div. Thuộc tính transitionpacity .4s để tạo ra hiệu ứng chuyển đổi nội dung cho bắt mắt và nhìn củng mượt hơn.

.content div h2{
    color:#4F8E8E;
    font-size:22px;
}
.content div h3{
    color:#4F8E8E;
    font-size:17px;
}
.content div > p {
    font-style:italic;
    color:#777;
    font-size:13px;
    line-height:1.5em;
    margin:0;
    padding-left:20px;
    border-left:8px solid rgba(63,148,148, 0.1);
}

Code này không có gì cả, chỉ để style cho thẻ p, h2 và h3 thôi.

.tabs input:checked + label{
    background:#fff;
    z-index:6; 
}

Khi thẻ input được checked (được chọn) thì thẻ label có màu nền là màu trắng (để tạo ra sự khác biệt so với các thẻ không được chọn). z-index:6 để nó luôn luôn nằm ở trên không bị các thành phần khác che khuất.

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4{
    opacity:1;
z-index:100 !important;
}

Đây chính là đoạn code quan trọng nhất mà cũng đơn giản nhất trong bài =))). Ý nghĩa như sau: Opacity:1 cho hiển thị lại các nội dung ở các thẻ .content-1, .content-2, .content-3, .content-4 khi các input.tab-selector-1,i nput.tab-selector-2, input.tab-selector-3, input.tab-selector-4 được checked (được chọn).

Nếu không có thuộc tính z-index:100 thì khi các bạn bôi đen nội dung văn bản của các thẻ About, services, work sẽ không được. Mà chỉ bôi đen được nội dung của thẻ contact thôi vì nó nằm ở trên cùng.
Còn z-index:5 là để che đi phần bóng đổ của thẻ content khi được checked.

#Đút kết kiến thức
Thuộc tính css3 :checked này không nhất thiết là các bạn chỉ sử dụng cho type=radio, nó cũng có thể dùng cho type=checkbox. Và nó cũng không nhất thiết khi nào cũng phải đi với label. Nhưng có 1 điều không thay đổi là: nếu bạn muốn kích vào dòng text mà thẻ input được check (được chọn) thì bắt buộc bạn phải dùng thẻ label với thuộc tính là for (giống với id của input).
Nếu bạn vẫn còn mơ hồ về thuộc tinh checked này thì có thể xem ví dụ bên dưới để hiểu rõ hơn: link demo
 
Ví dụ đơn giản:
HTML

<ul>
   <li>
      
     <p>Some text 1..</p>
   </li>
   <li>
      
     <p>Some text 2..</p>
   </li>
  </ul>

CSS

ul{list-style:none}
li{display:table;float:left;border:1px solid red;padding:20px;text-align:center;}
input:checked + p{color:green;}

Hiển thị: Khi ta check vào thẻ input thì dòng chữ some text sẽ đổi sang màu xanh lá cây. Nếu không có dấu + thì nó sẽ không hiểu lấy thẻ p của thằng input nào.

Kết luận
Cuối cùng chúng ta cũng đã hoàn thành nội dung của bài này. Qua tutorial này các bạn sẽ cảm thấy thích thú hưng phấn với CSS3 nhiều hơn.

Chúc các bạn thành công.

Nguồn: izwebz.com​