Анімовані вкладки на css3 і html5

class="Tabs"gt;lt;input id="Tab-1" type="Radio" name="Radio-set" class="Tab-selector-1" checked="Checked" /gt;lt;label for="Tab-1" class="Tab-label-1"gt; Головнаlt;/labelgt;lt;input id="Tab-2" type="Radio" name="Radio-set" class="Tab-selector-2" /gt;lt;label for="Tab-2" class="Tab-label-2"gt; Сервісиlt;/labelgt;lt;input id="Tab-3" type="Radio" name="Radio-set" class="Tab-selector-3" /gt;lt;label for="Tab-3" class="Tab-label-3"gt; Роботиlt;/labelgt;lt;input id="Tab-4" type="Radio" name="Radio-set" class="Tab-selector-4" /gt;lt;label for="Tab-4" class="Tab-label-4"gt; Контактиlt;/labelgt;lt;div class="Clear-shadow"gt; lt;/divgt;lt;div class="Content"gt;lt;div class="Content-1"gt;lt;h2gt; Про автораlt;/h2gt;lt;pgt; Lorem ipsum dolor sit amet, consectetur adipiscing elit ....lt;/pgt;lt;h3gt; А також ...lt;/h3gt;lt;pgt; Nullam non quam sit amet enim rhoncus scelerisque vitae ut nisi .....lt;/pgt;lt;/divgt;lt;div class="Content-2"gt;lt;h2gt; Сервісиlt;/h2gt;lt;pgt; Lorem ipsum dolor sit amet, consectetur adipiscing elit ....lt;/pgt;lt;h3gt; А также ...lt;/h3gt;lt;pgt; Nullam non quam sit amet enim rhoncus scelerisque vitae ut nisi .....lt;/pgt;lt;/divgt;lt;div class="Content-3"gt;lt;h2gt; Портфоліоlt;/h2gt;lt;pgt; Lorem ipsum dolor sit amet, consectetur adipiscing elit ....lt;/pgt;lt;h3gt; А також ...lt;/h3gt;lt;pgt; Nullam non quam sit amet enim rhoncus scelerisque vitae ut nisi .....lt;/pgt;lt;/divgt;lt;div class="Content-4"gt;lt;h2gt; Контактиlt;/h2gt;lt;pgt; Lorem ipsum dolor sit amet, consectetur adipiscing elit ....lt;/pgt;lt;h3gt; А також ...lt;/h3gt;lt;pgt; Nullam non quam sit amet enim rhoncus scelerisque vitae ut nisi .....lt;/pgt;lt;/divgt;lt;/divgt;lt;/sectiongt;

.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--ms-filter:"Progid: DXImageTransform.Microsoft.Alpha (Opacity = 0)"-filter: alpha(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: # 5ba4a4-background: -moz-linear-gradient(top, # 5ba4a4 0%, # 4e8c8a 100%)-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,# 5ba4a4), color-stop(100%,# 4e8c8a))-background: -webkit-linear-gradient(top, # 5ba4a4 0%,# 4e8c8a 100%)-background: -o-linear-gradient(top, # 5ba4a4 0%,# 4e8c8a 100%)-background: -ms-linear-gradient(top, # 5ba4a4 0%,# 4e8c8a 100%)-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--webkit-transition: opacity linear 0.1s--moz-transition: opacity linear 0.1s--o-transition: opacity linear 0.1s--ms-transition: opacity linear 0.1s-transition: opacity 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--ms-filter:"Progid: DXImageTransform.Microsoft.Alpha (Opacity = 100)"-filter: alpha(opacity=100)-opacity: 1--webkit-transition: opacity ease-out 0.2s 0.1s--moz-transition: opacity ease-out 0.2s 0.1s--o-transition: opacity ease-out 0.2s 0.1s--ms-transition: opacity ease-out 0.2s 0.1s-transition: opacity ease-out 0.2s 0.1s-}