color resource - http://colorhunt.co/c/6998
changed the design.
h1 Pure CSS Color Tabs | |
input(type="radio" name="name" checked) | |
div | |
input(type="radio" name="name") | |
div | |
input(type="radio" name="name") | |
div | |
input(type="radio" name="name") | |
div |
color resource - http://colorhunt.co/c/6998
changed the design.
@import url(https://fonts.googleapis.com/css?family=Droid+Serif); | |
$tab-color1: #f06868; | |
$tab-color2: #fab57a; | |
$tab-color3: #edf798; | |
$tab-color4: #80d6ff; | |
html,body { | |
height: 100%; | |
position: relative; | |
overflow: hidden; | |
} | |
h1 { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%,-50%); | |
font-size: 1.7rem; | |
font-family: "Droid Serif"; | |
text-shadow: 0 1px 1px rgba(0,0,0,0.1); | |
line-height: 1.2; | |
color: #fff; | |
z-index: 2; | |
} | |
div { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
transition: transform 0.4s ease; | |
transform: translateX(-100%); | |
&:nth-of-type(1) { background-color: $tab-color1;} | |
&:nth-of-type(2) { background-color: $tab-color2;} | |
&:nth-of-type(3) { background-color: $tab-color3;} | |
&:nth-of-type(4) { background-color: $tab-color4;} | |
} | |
input[type="radio"] { | |
position: absolute; | |
left: 0; | |
width: 10px; | |
height: 25%; | |
outline: 10px solid; | |
outline-offset: -10px; | |
margin: 0; | |
z-index: 1; | |
cursor: pointer; | |
&:nth-of-type(1) { outline-color: $tab-color1; top: 0%;} | |
&:nth-of-type(2) { outline-color: $tab-color2; top: 25%;} | |
&:nth-of-type(3) { outline-color: $tab-color3; top: 50%;} | |
&:nth-of-type(4) { outline-color: $tab-color4; top: 75%;} | |
&:checked { | |
+ div { | |
transform: translateX(0%); | |
transition: transform 0.4s ease 0.4s; | |
} | |
} | |
} |