Simple and stylish Pure CSS3 tabs tab effects

Source: Internet
Author: User
Brief tutorials

This is a tabs option made with pure CSS3 Carter effect. The Tabs tab is simple and stylish, with an underscore followed by an animation when switching between tabs, and the overall effect is very good.

HTML structure

The HTML structure of the entire Tabs tab is divided into several parts: using the <input> element and an unordered list to make navigation.

<input type= "Radio" id= "TAB1" name= "Tab-control" Checked><input type= "Radio" id= "TAB2" name= "Tab-control" ><input type= "Radio" id= "TAB3" name= "Tab-control" >  <input type= "Radio" id= "TAB4" name= "Tab-control" ><ul>  <li title= "tab 1" ><label for= "tab1" role= "button" ><span>tab 1</span>< /label></li>  <li title= "tab 2" ><label for= "tab2" role= "button" ><span>tab 2</span ></label></li>  <li title= "tab 3" ><label for= "tab3" role= "button" ><span>tab 3 </span></label></li>  <li title= "tab 4" ><label for= "TAB4" role= "button" ><span >tab 4</span></label></li></ul>

The contents of each tab are contained within a <p> element.

<p class= "Content" >  <section>    

The lines used to make the underline animation are made using a <p> element.

<p class= "Slider" ><p class= "indicator" ></p></p>

CSS Styles

The main CSS styles for the Tabs tab are as follows:

. tabs {left:50%;  -webkit-transform:translatex (-50%);  Transform:translatex (-50%);  position:relative;  Background:white;  padding:50px;  padding-bottom:80px;  width:70%;  height:250px;  box-shadow:0 14px 28px rgba (0, 0, 0, 0.25), 0 10px 10px rgba (0, 0, 0, 0.22);  border-radius:5px; min-width:240px;}  . Tabs input[name= "Tab-control"] {display:none;}. Tabs. Content section H2,. Tabs ul li label {font-weight:bold;  font-size:18px; Color: #428BFF;}  . tabs ul {list-style-type:none;  padding-left:0;  Display:-webkit-box;  Display:-webkit-flex;  Display:-ms-flexbox;  Display:flex;  -webkit-box-orient:horizontal;  -webkit-box-direction:normal;  -webkit-flex-direction:row;  -ms-flex-direction:row;  Flex-direction:row;  margin-bottom:10px;  -webkit-box-pack:justify;  -webkit-justify-content:space-between;  -ms-flex-pack:justify;  Justify-content:space-between;  -webkit-box-align:end;  -webkit-align-items:flex-end;  -ms-flex-align:end; align-items:flex-End  -webkit-flex-wrap:wrap;  -ms-flex-wrap:wrap; Flex-wrap:wrap;}  . Tabs ul li {box-sizing:border-box;  -webkit-box-flex:1;  -webkit-flex:1;  -ms-flex:1;  Flex:1;  width:25%;  Padding:0 10px; Text-align:center;}  . Tabs ul Li label {-webkit-transition:all 0.3s ease-in-out;  Transition:all 0.3s ease-in-out;  Color: #929daf;  PADDING:5PX Auto;  Overflow:hidden;  Text-overflow:ellipsis;  Display:block;  Cursor:pointer;  -webkit-transition:all 0.2s ease-in-out;  Transition:all 0.2s ease-in-out;  White-space:nowrap;  -webkit-touch-callout:none;  -webkit-user-select:none;  -moz-user-select:none;  -ms-user-select:none; User-select:none;}  . Tabs ul li label br {display:none;}. Tabs ul li label svg {fill: #929daf;  Height:1.2em;  Vertical-align:bottom;  Margin-right:0.2em;  -webkit-transition:all 0.2s ease-in-out; Transition:all 0.2s Ease-in-out;}  . Tabs ul li Label:hover,. Tabs ul Li Label:focus,. Tabs ul li label:active {outline:0; Color: #bec5cf;} . Tabs ul Li Label:hover svg,. Tabs ul Li Label:focus svg,. Tabs ul li label:active svg {fill: #bec5cf;}. Tabs. slider {  position:relative;  width:25%;  -webkit-transition:all 0.33s cubic-bezier (0.38, 0.8, 0.32, 1.07); Transition:all 0.33s cubic-bezier (0.38, 0.8, 0.32, 1.07);}  . tabs. Slider. indicator {position:relative;  width:50px;  max-width:100%;  margin:0 Auto;  height:4px;  Background: #428BFF; border-radius:1px;}  . tabs. content {margin-top:30px;}. Tabs. Content section {Display:none;  -webkit-animation-name:content;  Animation-name:content;  -webkit-animation-direction:normal;  Animation-direction:normal;  -webkit-animation-duration:0.3s;  animation-duration:0.3s;  -webkit-animation-timing-function:ease-in-out;  Animation-timing-function:ease-in-out;  -webkit-animation-iteration-count:1;  Animation-iteration-count:1; line-height:1.4;}  . tabs. Content section H2 {color: #428BFF; Display:none;} . tabs. Content section H2::after {content: ""; position:relative;  Display:block;  width:30px;  height:3px;  Background: #428BFF;  margin-top:5px; left:1px;}  . Tabs input[name= "Tab-control"]:nth-of-type (1): Checked ~ ul > li:nth-child (1) > label {cursor:default; Color: #428BFF;} . Tabs input[name= "Tab-control"]:nth-of-type (1): Checked ~ ul > li:nth-child (1) > label svg {fill: #428BFF;} @media (max-width:600px) {. Tabs input[name= "Tab-control"]:nth-of-type (1): Checked ~ ul > li:nth-child (1) > label { Background:rgba (0, 0, 0, 0.08);  }}. Tabs Input[name= "Tab-control"]:nth-of-type (1): checked ~. Slider {-webkit-transform:translatex (0%); Transform:translatex (0%); tabs input[name= "Tab-control"]:nth-of-type (1): checked ~. Content > Section:nth-child ( 1) {Display:block;}. Tabs Input[name= "Tab-control"]:nth-of-type (2): Checked ~ ul > li:nth-child (2) > label {curs  Or:default; Color: #428BFF;} . Tabs input[name= "Tab-control"]:nth-of-type (2): Checked ~ ul > li:nth-child (2) > label svg {fill: #428BFF;  } @media (max-width:600px) {. Tabs input[name= "Tab-control"]:nth-of-type (2): Checked ~ ul > li:nth-child (2) > label { Background:rgba (0, 0, 0, 0.08);  }}. Tabs Input[name= "Tab-control"]:nth-of-type (2): checked ~. Slider {-webkit-transform:translatex (100%); Transform:translatex (100%); tabs input[name= "Tab-control"]:nth-of-type (2): checked ~. Content > section: Nth-child (2) {Display:block;}. Tabs Input[name= "Tab-control"]:nth-of-type (3): Checked ~ ul > li:nth-child (3) > Lab  El {cursor:default; Color: #428BFF;} . Tabs input[name= "Tab-control"]:nth-of-type (3): Checked ~ ul > li:nth-child (3) > label SVG {fill: #428BFF;} @media (max-width:600px) {. Tabs input[name= "Tab-control"]:nth-of-type (3): Checked ~ ul > li:nth-child (3) > label { Background:rgba (0, 0, 0, 0.08);  }}. Tabs Input[name= "Tab-control"]:nth-of-type (3): checked ~. Slider {-webkit-transform:translatex (200%); Transform:translatex (200%); tabs input[name= "Tab-control"]:nth-of-type (3):Checked ~. Content > Section:nth-child (3) {Display:block;}. Tabs Input[name= "Tab-control"]:nth-of-type (4): Checked ~  UL > Li:nth-child (4) > label {cursor:default; Color: #428BFF;} . Tabs input[name= "Tab-control"]:nth-of-type (4): Checked ~ ul > li:nth-child (4) > label SVG {fill: #428BFF;} @media (max-width:600px) {. Tabs input[name= "Tab-control"]:nth-of-type (4): Checked ~ ul > li:nth-child (4) > label { Background:rgba (0, 0, 0, 0.08);  }}. Tabs Input[name= "Tab-control"]:nth-of-type (4): checked ~. Slider {-webkit-transform:translatex (300%); Transform:translatex (300%); tabs input[name= "Tab-control"]:nth-of-type (4): checked ~. Content > section: Nth-child (4) {Display:block;} @-webkit-keyframes content {from {opacity:0;-webkit-transform:translatey (5), Transform:translatey (5);} to {OPAC  Ity:1;  -webkit-transform:translatey (0%); Transform:translatey (0%);}} @keyframes content {from {opacity:0;-webkit-transform:translatey (5); Transform:tranSlatey (5%);} to {opacity:1;  -webkit-transform:translatey (0%); Transform:translatey (0%);}} @media (max-width:1000px) {. Tabs ul li label {white-space:initial;}. Tabs ul li label br {display:initial;}. Tabs UL Li label svg {height:1.5em;}}  @media (max-width:600px) {. Tabs ul li label {padding:5px; border-radius:5px;} . Tabs UL Li label span {display:none;}. Tabs. slider {display:none;}. Tabs. content {margin-top:20px;}. tabs. con Tent section H2 {Display:block;}

The above is the simple and fashionable pure CSS3 tabs tab effect content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

Related articles:

Applet: How to Implement the Tabs tab effect example

Implementation of Tabs tab effect for small programs

JavaScript Implements tabs tab Toggle Effect

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.