Some kind of dashboard that pops out when you click on the blocks. Done using pure CSS using labels and checkboxs to trigger the transitions.
A Pen by Jamie Coulter on CodePen.
.wrapper | |
%h1 | |
Oh, hey there | |
%h2 | |
Go ahead and click on the blocks to watch 'em pop | |
-(1..9).each do |i| | |
%input{:id => i,:type => 'checkbox'} | |
%label{:for => i} | |
%div | |
.circle | |
%span Click me | |
%p Congrats, you managed to click the box! Thanks for checking out this pen. Take a look at some of my other stuff too. | |
%a{:href => 'http://codepen.io/jcoulterdesign/'} View my other stuff | |
Some kind of dashboard that pops out when you click on the blocks. Done using pure CSS using labels and checkboxs to trigger the transitions.
A Pen by Jamie Coulter on CodePen.
/* Nope, not today */ |
/* Fonts */ | |
@import url(http://fonts.googleapis.com/css?family=Oswald); | |
/* Variables */ | |
$color:white; | |
$font:'Oswald', sans-serif; | |
/* Styles */ | |
body{ | |
font-family:$font; | |
background: rgb(219, 242, 247); | |
margin:0; | |
h1{ | |
font-weight: normal; | |
text-transform:uppercase; | |
margin:0; | |
color: rgb(86, 86, 86); | |
} | |
h2{ | |
font-size:18px; | |
font-weight: normal; | |
margin:0px 0px 50px 0px; | |
color: #A9A9A9; | |
} | |
.wrapper{ | |
background:white; | |
width:800px; | |
padding:50px 0px; | |
margin:0 auto; | |
overflow:hidden; | |
text-align:center; | |
position:relative; | |
label{ | |
width:200px; | |
height:200px; | |
background: rgb(146, 178, 205); | |
display:inline-block; | |
border-radius:2px; | |
margin:10px; | |
cursor:pointer; | |
span{ | |
color:white; | |
font-size:13px; | |
position:relative; | |
top:10px; | |
} | |
p{ | |
margin:25px; | |
color:white; | |
display:none; | |
position:absolute; | |
bottom:10px; | |
left:0; | |
right:0; | |
width:150px; | |
margin:0 auto; | |
top:25px; | |
font-size:10px; | |
} | |
a{ | |
display:none; | |
color:white; | |
position:absolute; | |
bottom:10px; | |
left:0; | |
font-size:10px; | |
right:0; | |
margin:0 auto; | |
} | |
} | |
input[type='checkbox']{ | |
display:none; | |
} | |
input[type='checkbox']:checked + label a,input[type='checkbox']:checked + label p{ | |
display:block; | |
} | |
input[type='checkbox']:checked + label span,input[type='checkbox']:checked + label div{ | |
visibility:hidden; | |
} | |
input[type='checkbox']:checked + label{ | |
left:0; | |
transform: scale(3.33); | |
z-index:122221; | |
transition-duration: 0.1s; | |
position:relative; | |
transition-property: transform; | |
top:0; | |
background: rgb(93, 133, 161); | |
} | |
input[type='checkbox']:not(:checked) + label{ | |
transform:scale(1); | |
transition-duration: 0.1s; | |
transition-property: transform; | |
} | |
/* I don't like this, i will probably replace with a sass loop at some point */ | |
label:nth-of-type(1) { | |
transform-origin: 0% 0%; | |
} | |
label:nth-of-type(2) { | |
transform-origin: 50% 0%; | |
} | |
label:nth-of-type(3) { | |
transform-origin: 100% 0%; | |
} | |
label:nth-of-type(4) { | |
transform-origin: 0% 50%; | |
} | |
label:nth-of-type(5) { | |
transform-origin: 50% 50%; | |
} | |
label:nth-of-type(6) { | |
transform-origin: 100% 50%; | |
} | |
label:nth-of-type(7) { | |
transform-origin: 0% 100%; | |
} | |
label:nth-of-type(8) { | |
transform-origin: 50% 100%; | |
} | |
label:nth-of-type(9) { | |
transform-origin: 100% 100%; | |
} | |
.circle{ | |
visibility: visible; | |
width:40px; | |
height:40px; | |
border:3px solid white; | |
border-radius:100%; | |
opacity:0.3; | |
margin:60px auto 0px auto; | |
-webkit-animation: circle 1s infinite; /* Chrome, Safari, Opera */ | |
animation: circle 1s infinite; | |
} | |
} | |
} | |
/* Animations */ | |
@-webkit-keyframes circle{ | |
0%{transform:scale(1)} | |
50%{transform:scale(1.1)} | |
100%{transform:scale(1)} | |
} |