Another pure CSS UI Piece here using radio buttons for the active states
A Pen by Jamie Coulter on CodePen.
Another pure CSS UI Piece here using radio buttons for the active states
A Pen by Jamie Coulter on CodePen.
- @tabs = [{:c => 'checked', :tab => '1', :time => '8am - 10am', :title => 'Jamie talks design', :schedule => 'Monday - Thursday',:description => 'I talk a bunch of rubbish', :icon => 'ion-android-color-palette'},{:c => 'false', :tab => '2', :time => '10am - 12am', :title => 'Arctic Monkeys Live', :schedule => 'Monday - Wednesday',:description => 'Music for your lug holes', :icon => 'ion-music-note'},{:c => 'false', :tab => '3', :time => '12am - 4pm', :title => 'Steven Fry podcast', :schedule => 'Staurday - Sunday',:description => 'Steven Fry says words', :icon => 'ion-android-microphone'},{:c => 'false', :tab => '4', :time => '4pm - 8pm', :title => 'Massive event', :schedule => 'Monday - Friday',:description => 'Some kind of music festival', :icon => 'ion-android-bar'}] | |
.left | |
.left_inner | |
%h1 Funky Pure CSS Accordion | |
%h2 Go on, give it some clicks | |
%a.download{:href => 'http://codepen.io/jcoulterdesign/pens/popular/',:target => '_blank'} | |
<i class="icon ion-eye"></i> <span>View my other pens</span> | |
%a.follow{:href => 'http://codepen.io/jcoulterdesign/',:target => '_blank'} | |
<i class="icon ion-social-codepen-outline"></i> <span>Follow me on codepen</span> | |
.right | |
.app | |
.app_inner | |
- @tabs.each do |i| | |
%input{:type => 'radio',:id => "tab-#{i[:tab]}",:name => 'buttons', :"#{i[:c]}" => ""} | |
%label{:for => "tab-#{i[:tab]}"} | |
.app_inner__tab | |
%h2 | |
%i.icon.ion-android-alarm-clock | |
#{i[:time]} | |
.tab_left | |
%i.icon.big{:class => "#{i[:icon]}"} | |
.tab_left__image | |
%i.icon{:class => "#{i[:icon]}"} | |
.tab_right | |
%h3 #{i[:title]} | |
%h4 #{i[:schedule]} | |
%p #{i[:description]} | |
%button More information |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> |
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300); | |
*{ | |
box-sizing:border-box; | |
} | |
body{ | |
background: #292B31; | |
overflow:hidden; | |
font-family: 'Roboto Condensed', sans-serif; | |
.left{ | |
float:left; | |
width:50%; | |
height:100vh; | |
position:Relative; | |
&_inner{ | |
width:340px; | |
margin:0 auto; | |
transform:translateY(-50%); | |
height: 414px; | |
position:absolute; | |
right:20px; | |
top:50%; | |
h1{ | |
color:white; | |
font-size:28px; | |
margin:120px 0px 0px 0px | |
} | |
h2{ | |
color: rgb(118, 123, 138); | |
font-size:22px; | |
font-weight:200; | |
margin:0px 0px 0px 0px | |
} | |
} | |
} | |
.right{ | |
float:right; | |
position:relative; | |
width:50%; | |
height:100vh; | |
} | |
} | |
.app{ | |
border-radius: 10px; | |
width:340px; | |
margin:0 auto; | |
height: 414px; | |
position:absolute; | |
left:0; | |
top:50%; | |
box-shadow: 4px 5px 0px rgba(0, 0, 0, 0.11); | |
animation:intro .34s .4s cubic-bezier(1.000, 1.400, 0.410, 1.010) forwards ; | |
transform:translateY(-50%) scale(0) rotateX(10deg) rotateY(10deg) rotateZ(10deg); | |
margin:auto; | |
overflow:hidden; | |
font-family: 'Roboto Condensed', sans-serif; | |
&_inner{ | |
position:relative; | |
input[type="radio"]{ | |
display:none; | |
} | |
input[type="radio"]:checked + label .app_inner__tab{ | |
height:175px; | |
} | |
input[type="radio"]:checked + label .app_inner__tab .tab_right{ | |
top:39px; | |
transition:all .3s .2s cubic-bezier(0.455, 0.030, 0.515, 0.955); | |
} | |
input[type="radio"]:not(checked) + label .app_inner__tab{ | |
height:80px; | |
border-left: 12px solid rgba(0, 0, 0, 0.12); | |
} | |
input[type="radio"]:not(checked) + label .app_inner__tab .tab_right{ | |
top:200px; | |
transition:all .3s .3s cubic-bezier(0.455, 0.030, 0.515, 0.955); | |
} | |
input[type="radio"]:checked + label .app_inner__tab .tab_left .tab_left__image{ | |
animation: move_in .55s .05s cubic-bezier(0.455, 0.030, 0.515, 0.955) forwards; | |
transition:all .3s .36s cubic-bezier(0.455, 0.030, 0.515, 0.955); | |
} | |
input[type="radio"]:not(checked) + label .app_inner__tab .tab_left .tab_left__image{ | |
animation: move_out .75s .0s cubic-bezier(0.455, 0.030, 0.515, 0.955) forwards; | |
transition:all .3s .3s cubic-bezier(0.455, 0.030, 0.515, 0.955); | |
} | |
input[type="radio"]:checked + label .app_inner__tab .tab_left .big{ | |
left:260px; | |
} | |
input[type="radio"]:not(checked) + label .app_inner__tab .tab_left .big{ | |
left:400px; | |
} | |
input[type="radio"]:checked + label .app_inner__tab h2 i{ | |
opacity:0; | |
} | |
input[type="radio"]:not(checked) + label .app_inner__tab h2 i{ | |
opacity:.3; | |
} | |
label{ | |
display:block; | |
width:100%; | |
&:nth-of-type(1) .app_inner__tab{ | |
background:#99b998; | |
&:hover{ | |
transition:all .2s; | |
background:darken(#99b998,4%); | |
} | |
height:200px; | |
.tab_left__image{ | |
background:#EA495F | |
} | |
} | |
&:nth-of-type(2) .app_inner__tab{ | |
background:#E4B794; | |
&:hover{ | |
transition:all .2s; | |
background:darken(#E4B794,4%); | |
} | |
.tab_left__image{ | |
background:#99B998 | |
} | |
} | |
&:nth-of-type(3) .app_inner__tab{ | |
background:#f4837d; | |
&:hover{ | |
transition:all .2s; | |
background:darken(#f4837d,4%); | |
} | |
.tab_left__image{ | |
background:#E4B794 | |
} | |
} | |
&:nth-of-type(4) .app_inner__tab{ | |
background:#ea495f; | |
&:hover{ | |
transition:all .2s; | |
background:darken(#ea495f,4%); | |
} | |
.tab_left__image{ | |
background:#F4837D | |
} | |
} | |
} | |
&__tab{ | |
width:100%; | |
height:80px; | |
background:red; | |
cursor:pointer; | |
overflow:hidden; | |
position:relative; | |
transition:all .65s cubic-bezier(1.000, 0.000, 0.410, 1.010); | |
h2{ | |
position: absolute; | |
right: 20px; | |
top: 16px; | |
color: rgb(26, 28, 29); | |
font-size: 18px; | |
i{ | |
position: absolute; | |
right: 271px; | |
opacity:0.3; | |
transition:all .3s; | |
} | |
} | |
.tab_right{ | |
width:60%; | |
float:right; | |
position:relative; | |
top:200px; | |
text-align:right; | |
padding: 20px; | |
h3,h4,p{ | |
margin:0; | |
} | |
h3{ | |
font-size: 14px; | |
color: rgba(0, 0, 0, 0.65); | |
} | |
h4{ | |
font-size: 12px; | |
margin: 4px 0px; | |
color: rgba(0, 0, 0, 0.33); | |
} | |
p{ | |
font-size: 11px; | |
color: white; | |
} | |
button{ | |
margin-top: 10px; | |
border: 2px solid white; | |
background: none; | |
border-radius: 5px; | |
padding: 6px 20px; | |
cursor: pointer; | |
font-family: 'Roboto Condensed', sans-serif; | |
outline:none; | |
font-size: 11px; | |
color: white; | |
transition:all .3s; | |
&:hover{ | |
background:white; | |
color:black; | |
} | |
} | |
} | |
.tab_left{ | |
width:30%; | |
float:left; | |
position:relative; | |
.big{ | |
position: absolute; | |
top: -17px; | |
transition:all .3s .3s; | |
left: 390px; | |
font-size: 180px; | |
opacity: 0.08; | |
} | |
&__image{ | |
position: relative; | |
top: -100px; | |
text-align: center; | |
background: white; | |
left: 47px; | |
border-radius: 20px; | |
width: 80px; | |
height: 80px; | |
i{ | |
color: white; | |
font-size: 40px; | |
top: 18px; | |
position: relative; | |
} | |
} | |
} | |
} | |
} | |
} | |
// Animations | |
@keyframes move_out{ | |
0%{top:47px;} | |
100%{top:200px;} | |
} | |
@keyframes move_in{ | |
0%{top:-200px;} | |
100%{top:47px;} | |
} | |
@keyframes bump{ | |
0%{top:16px;} | |
25%{top:13px;} | |
50%{top:16px;} | |
75%{top:13px;} | |
100%{top:16px;} | |
} | |
@keyframes intro{ | |
0%{transform: translateY(-50%) scale(0) rotateX(10deg) rotateY(10deg) rotateZ(40deg)} | |
100%{transform: translateY(-50%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg)} | |
} | |
a.download,a.follow{i{margin-right:10px;}text-align:center;margin-top:13px;width:300px; | |
float:left;display: inline-block;padding: 16px 30px;background: #EA495F;color: white;font-weight: 900;font-family: 'Roboto Condensed', sans-serif;text-decoration: none;border-radius: 4px;margin-right:12px;} | |
a.follow{ | |
float:left;padding: 14px 30px;background: none;color: white;border:2px solid white;&:hover{color:#41EFB6;border-color:#41EFB6;}} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" /> |