Thứ Ba, ngày 29 tháng 11 năm 2016

Share CODE Tabs với CSS3 Nhiều Hiệu Ứng Đẹp cho Wap/Web/Blog

CODE Tabs chắc hẳn đã khá quen thuộc với nhiều webmaster. Để xây dựng nội dung Đẹp MắtGọn Gàng thì việc xuất hiện nhiều Tabs nội dung là điều cần thiết và đảm bảo cái nhìn trực quan hơn. Trong bài viết này mình sẽ chia sẻ với các bạn "Tạo Tabs Với Css3 Cùng Nhiều Hiệu Ứng Đẹp" mà không sử dụng bất kì đoạn mã jQuery nào, mà chỉ tuyệt đối dùng hoàn toàn bằng CSS3.



1 Markup HTML
Chúng ta sẽ sử dụng phần tử input để kết nối với phần nội dung của từng tab.

<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>


2 CODE CSS

<style type="text/css">
tabs {
    position: relative;
    margin: 40px auto;
    width: 750px;
}
 
.tabs input {
    position: absolute;
    z-index: 1000;
    width: 120px;
    height: 40px;
    left: 0px;
    top: 0px;
    opacity: 0;
    cursor: pointer;
}
.tabs input#tab-2{
    left: 120px;
}
.tabs input#tab-3{
    left: 240px;
}
.tabs input#tab-4{
    left: 360px;
}

.tabs label {
    background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
    font-size: 15px;
    line-height: 40px;
    height: 40px;
    position: relative;
    padding: 0 20px;
    float: left;
    display: block;
    width: 80px;
    color: #385c5b;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    border-radius: 3px 3px 0 0;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}
 
.tabs input:hover + label {
    background: #5ba4a4;
}
 
.tabs label:first-of-type {
    z-index: 4;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}
 
.tab-label-2 {
    z-index: 3;
}
 
.tab-label-3 {
    z-index: 2;
}
 
.tab-label-4 {
    z-index: 1;
}

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

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

.content {
    background: #fff;
    position: relative;
    width: 100%;
    height: 370px;
    z-index: 5;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
    border-radius: 0 3px 3px 3px;
}
 
.content div {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 40px;
    z-index: 1;
    opacity: 0;
    transition: all linear 0.1s;
}
 
.content div h2,
.content div h3{
    color: #398080;
}
.content div p {
    font-size: 14px;
    line-height: 22px;
    font-style: italic;
    text-align: left;
    margin: 0;
    color: #777;
    padding-left: 15px;
    font-family: Cambria, Georgia, serif;
    border-left: 8px solid rgba(63,148,148, 0.1);
}

.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 {
    z-index: 100;
    opacity: 1;
    transition: all ease-out 0.2s 0.1s;
}

</style>

Vậy là xong rồi đó các bạn, để có thêm nhiều hiệu ứng khác nhau, các bạn có thể tham khảo thêm ở phần demo hoặc download về máy của mình để tìm hiểu thêm.