之前我做內(nèi)容選項(xiàng)卡(Content Tabs)的時(shí)候,會(huì)用到一些小圖片來區(qū)隔,那樣雖然能達(dá)到理想的效果,但是維護(hù)起來卻不太容易,因?yàn)樾枰膱D片。今天我將介紹用純CSS3實(shí)現(xiàn)的內(nèi)容選項(xiàng)卡(Content Tabs)4個(gè)實(shí)例,在本教程中,我們將使用單選按鈕以及:checked
偽類和同級(jí)組合器來實(shí)現(xiàn)一些簡(jiǎn)單的CSS3內(nèi)容選項(xiàng)卡,效果很好,非常實(shí)用,值得收藏。
純CSS3實(shí)現(xiàn)的內(nèi)容選項(xiàng)卡(Content Tabs)
內(nèi)容選項(xiàng)卡是Web設(shè)計(jì)中非常常見且熟悉的元素,通常它們非常有用。
我們將使用input
元素連接具有類內(nèi)容(class content)的分隔。內(nèi)容分隔包括所有“標(biāo)簽頁(tab pages)”。對(duì)于每個(gè)input
元素,我們將有一個(gè)label
元素。所有標(biāo)簽的樣式將類似于標(biāo)簽。
- <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">關(guān)于我們</label>
- <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
- <label for="tab-2" class="tab-label-2">聯(lián)系方式</label>
- <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
- <label for="tab-3" class="tab-label-3">廣告服務(wù)</label>
- <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
- <label for="tab-4" class="tab-label-4">免責(zé)聲明</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>
每個(gè)input
元素都有一個(gè)值,我們可以通過添加checked
的屬性來使input
默認(rèn)為選中狀態(tài)。
我們需要做的第一件事是定義一些尺寸并通過將input
的不透明度設(shè)置為0來隱藏它們:
- 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;
- }
input
將覆蓋label
,看起來好像我們單擊了標(biāo)簽(label
),但實(shí)際上我們正在單擊輸入(input
),這是一個(gè)技巧,也可以在移動(dòng)瀏覽器中使用。
接下來,通過為標(biāo)簽(label
)定義一些整潔的樣式,使標(biāo)簽看起來像標(biāo)簽。請(qǐng)注意,每個(gè)標(biāo)簽都有不同的z-index
。盒子陰影將為選項(xiàng)卡增加深度和真實(shí)感。
- .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;
- }
由于我們不希望顯示框陰影的底部,因此我們將使用:after
偽元素將其覆蓋,其中不包含任何內(nèi)容:
- .tabs label:after {
- content: '';
- background: #fff;
- position: absolute;
- bottom: -2px;
- left: 0;
- width: 100%;
- height: 2px;
- display: block;
- }
當(dāng)我們單擊一個(gè)選項(xiàng)卡(label
)時(shí),它的樣式和顏色將與其他樣式不同,重要的是要確保“已選中(checked)”標(biāo)簽將位于選項(xiàng)卡中所有其他層的頂部。因此,我們將為其賦予最高的z-index
:
- .tabs input:checked + label {
- background: #fff;
- z-index: 6;
- }
如前所述,內(nèi)容分區(qū)將包含所有標(biāo)簽頁,我們將其z-index
設(shè)置為5,使其在所選標(biāo)簽下。這樣,內(nèi)容區(qū)域的盒子陰影將覆蓋所有其他標(biāo)簽。
在內(nèi)容區(qū)域內(nèi),有四個(gè)分區(qū),每個(gè)分區(qū)都有自己的內(nèi)容。默認(rèn)情況下(當(dāng)未選擇/單擊它們各自的標(biāo)簽時(shí)),我們希望它們被隱藏。因此,我們將不透明度設(shè)置為零,將z-index
設(shè)置為1。我們不能使用display:none
屬性,因?yàn)?strong>transitions不支持該屬性。
- .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);
- }
當(dāng)我們希望某個(gè)內(nèi)容出現(xiàn)(單擊標(biāo)簽)時(shí),我們將不透明度設(shè)置為1并提高z-index
,因?yàn)槲覀兿M搩?nèi)容劃分位于所有其他內(nèi)容之上:
- .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;
- }
在本教程中,介紹了將內(nèi)容淡入/淡出的基本示例。您可以在演示中找到更多樣式和效果。