<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/rgg/pen/rxLmQm?limit=all&page=22&q=css" />
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block;
}
body {
font-family: "Open Sans", sans-serif;
font-size: 16px;
text-align: center;
color: #444;
background: #d0d0d0;
}
header {
margin-bottom: 2em;
}
h1 {
font-size: 2em;
margin: 2em 0 1em;
}
strong {
font-weight: 700;
}
p {
line-height: 1.4em;
}
article header {
margin: 0;
}
.full-height {
height: 26em;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.flexy-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
}
.flexy-column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flexy-column.reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.flexy-item_child {
-webkit-box-flex: 1;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
}
.pure-steps {
display: inline-block;
width: 20em;
color: white;
margin-bottom: 3em;
}
.pure-steps strong {
color: #B2FF41;
font-weight: 300;
}
.pure-steps .pure-steps_group {
position: relative;
min-height: 26em;
border-radius: .4em;
overflow: hidden;
-webkit-box-shadow: 0 1.7em 5.5em -0.94em rgba(0, 0, 0, 0.3), 0 2em 3em 0.5em rgba(0, 0, 0, 0.1), 0 1.8em 2em -1.5em rgba(0, 0, 0, 0.2);
box-shadow: 0 1.7em 5.5em -0.94em rgba(0, 0, 0, 0.3), 0 2em 3em 0.5em rgba(0, 0, 0, 0.1), 0 1.8em 2em -1.5em rgba(0, 0, 0, 0.2);
background-image: _linear-gradient(-120deg, #26E289 0, #1a5fa2 100%, red 200%...);
background-position: 0 0;
background-size: 300%;
will-change: background, box-shadow;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.pure-steps .pure-steps_group .pure-steps_group-step {
position: absolute;
left: 0;
top: 0;
width: 100%;
-webkit-transform: translate(100%);
transform: translate(100%);
opacity: 0;
will-change: transform, opacity;
-webkit-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
text-align: left;
}
.pure-steps .pure-steps_group .pure-steps_group-step:last-child {
text-align: center;
}
.pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_legend {
font-size: 1.5em;
font-weight: 700;
padding: 1.5em 1.34em 1em;
line-height: 1em;
position: relative;
}
.pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item {
padding: 0 2em 1em;
}
.pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item label {
font-size: .8em;
display: block;
opacity: .6;
}
.pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item input {
font-size: 1em;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
border: 0;
line-height: 1.5em;
background-color: transparent;
background-image: _linear-gradient(0deg, transparent 0, #e5e5e5 1px...), _linear-gradient(0deg, transparent 0, #B2FF41 1px...);
background-size: 100% 1px, 0% 1px;
background-repeat: no-repeat;
outline: none;
will-change: background;
-webkit-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
color: white;
font-family: "Open Sans", sans-serif;
font-weight: 300;
}
.pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item input:focus {
color: white;
background-size: 0% 1px, 100% 1px;
}
.pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item input:focus + label {
opacity: 1;
color: #B2FF41;
}
.pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item input::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item input:-moz-placeholder {
/* Firefox 18- */
color: rgba(255, 255, 255, 0.6);
}
.pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item input::-moz-placeholder {
/* Firefox 19+ */
color: rgba(255, 255, 255, 0.6);
}
.pure-steps .pure-steps_group .pure-steps_group-step .pure-steps_group-step_item input:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.pure-steps .pure-steps_radio {
display: none;
}
.pure-steps .pure-steps_group-triggers {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3.6em;
border-radius: 0 0 .4em .4em;
background-color: rgba(0, 0, 0, 0.1);
will-change: opacity;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.pure-steps .pure-steps_group-triggers:before {
content: '';
display: inline-block;
position: absolute;
left: 0;
width: 0%;
height: .1em;
background: rgba(178, 255, 65, 0.4);
will-change: width;
-webkit-transition: width 0.6s ease-in-out;
transition: width 0.6s ease-in-out;
}
.pure-steps .pure-steps_group-triggers .pure-steps_group-triggers_item {
display: none;
}
.pure-steps .pure-steps_group-triggers .pure-steps_group-triggers_item label {
display: block;
padding: 1.2em;
color: white;
}
.pure-steps .pure-steps_radio:nth-child($i):checked ~ .pure-steps_group {
background-position: 25% 0;
}
.pure-steps .pure-steps_radio:nth-child($i):checked ~ .pure-steps_group .pure-steps_group-triggers:before {
width: 33.333%;
}
.pure-steps .pure-steps_radio:nth-child($i):checked ~ .pure-steps_group .pure-steps_group-triggers .pure-steps_group-triggers_item:nth-child(2) {
display: block;
}
.pure-steps .pure-steps_radio:nth-child($i):checked ~ .pure-steps_group .pure-steps_group-step:nth-child(1) {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
}
.pure-steps .pure-steps_radio:nth-child($i):checked ~ .pure-steps_group {
background-position: 50% 0;
}
.pure-steps .pure-steps_radio:nth-child($i):checked ~ .pure-steps_group .pure-steps_group-triggers:before {
width: 66.666%;
}
.pure-steps .pure-steps_radio:nth-child($i):checked ~ .pure-steps_group .pure-steps_group-triggers .pure-steps_group-triggers_item:nth-child(3) {
display: block;
}
.pure-steps .pure-steps_radio:nth-child($i):checked ~ .pure-steps_group .pure-steps_group-step:nth-child(2) {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
}
.pure-steps .pure-steps_radio:nth-child($i):checked ~ .pure-steps_group {
background-position: 75% 0;
}
.pure-steps .pure-steps_radio:nth-child($i):checked ~ .pure-steps_group .pure-steps_group-triggers {
opacity: 0;
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.pure-steps .pure-steps_radio:nth-child($i):checked ~ .pure-steps_group .pure-steps_group-step {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
}
.pure-steps .pure-steps_radio:nth-child($i):checked ~ .pure-steps_group .pure-steps_group-step .pure-steps_preload {
display: block;
height: .1em;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 2em;
background-image: _linear-gradient(0deg, rgba(255, 59, 153, 0.4) 0%, rgba(255, 157, 0, 0.4) 50%, rgba(178, 255, 65, 0.4) 100%...);
background-size: 0 10em;
background-position: top center;
background-repeat: no-repeat;
will-change: background-image;
-webkit-transition: background-image 3s linear;
transition: background-image 3s linear;
-webkit-animation: preloadLine 3s ease-out forwards;
animation: preloadLine 3s ease-out forwards;
}
.pure-steps .pure-steps_radio:nth-child($i):checked ~ .pure-steps_group .pure-steps_group-step .pure-steps_preload svg {
font-size: 1.2em;
width: auto;
height: 1em;
padding: 1em;
border-radius: 2em;
background-color: #5BD670;
fill: white;
margin-top: -1.5em;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation: preloadTic .8s linear forwards;
animation: preloadTic .8s linear forwards;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.pure-steps .pure-steps_radio:nth-child($i):checked ~ .pure-steps_group .pure-steps_group-triggers:before {
width: 99.999%;
}
.pure-steps .pure-steps_radio:nth-child($i):checked ~ .pure-steps_group .pure-steps_group-triggers .pure-steps_group-triggers_item:nth-child(4) {
display: block;
}
.pure-steps .pure-steps_radio:nth-child($i):checked ~ .pure-steps_group .pure-steps_group-step:nth-child(3) {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
}
@-webkit-keyframes preloadLine {
0% {
background-position: bottom center;
background-size: 0 10em;
}
100% {
background-position: top center;
background-size: 100% 10em;
}
}
@keyframes preloadLine {
0% {
background-position: bottom center;
background-size: 0 10em;
}
100% {
background-position: top center;
background-size: 100% 10em;
}
}
@-webkit-keyframes preloadTic {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
20% {
-webkit-transform: scale(0.2);
transform: scale(0.2);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
65% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
80%,
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes preloadTic {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
20% {
-webkit-transform: scale(0.2);
transform: scale(0.2);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
65% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
80%,
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
</style></head><body>
<header>
<h1>Pure <strong>CSS</strong> Steps</h1>
<p>... a sassy "Step By Step" process.</p>
</header>
<section>
<article>
<form class="pure-steps">
<input type="radio" name="steps" class="pure-steps_radio" id="step-0" checked="">
<input type="radio" name="steps" class="pure-steps_radio" id="step-1">
<input type="radio" name="steps" class="pure-steps_radio" id="step-2">
<div class="pure-steps_group">
<ol>
<li class="pure-steps_group-step">
<header>
<h2 class="pure-steps_group-step_legend">Welcome</h2>
<p class="pure-steps_group-step_item">The <strong>"Step By Step"</strong> pattern is usually 100% developed with JavaScript but you can use CSS too.</p>
<p class="pure-steps_group-step_item">Enjoy this example of "what can be done" <strong>just with SASS,</strong> simulating a "sign-up" process.</p>
<p class="pure-steps_group-step_item"></p>
</header>
</li>
<li class="pure-steps_group-step">
<fieldset>
<legend class="pure-steps_group-step_legend">Sign Up</legend>
<p class="pure-steps_group-step_item flexy-item flexy-column reverse">
<input type="text" placeholder="Type your email here" value="" id="input_email">
<label for="input_email">Email</label>
</p>
<p class="pure-steps_group-step_item flexy-item flexy-column reverse">
<input type="text" placeholder="Type your nick here" value="" id="input_nick">
<label for="input_nick">Nick</label>
</p>
<p class="pure-steps_group-step_item flexy-item flexy-column reverse">
<input type="password" placeholder="Type your password here" value="" id="input_password">
<label for="input_password">Password</label>
</p>
</fieldset>
</li>
<li class="pure-steps_group-step flexy-item">
<div class="pure-steps_preload">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<path d="M31.8,3.6c-0.2-0.5-0.4-0.9-0.9-1.2C30.4,2,29.7,1.8,29,1.9c-0.6,0.1-1.2,0.4-1.6,1l-8.5,11.2l0,0l-7.2,9.5l-7.1-9.4 c-0.5-0.7-1.3-1-2.1-1c-0.5,0-1,0.2-1.4,0.5c-0.5,0.4-0.9,1-1,1.7s0.1,1.2,0.5,1.8l9.1,12.1l0,0c0.1,0.2,0.3,0.3,0.4,0.4 c0.4,0.3,0.9,0.5,1.4,0.5c0.8,0,1.6-0.3,2.1-1L22.1,18l0,0l9.1-12.1C32,5.2,32.1,4.4,31.8,3.6z"></path>
</svg>
</div>
</li>
</ol>
<ol class="pure-steps_group-triggers">
<li class="pure-steps_group-triggers_item">
<label for="step-0">Restart</label>
</li>
<li class="pure-steps_group-triggers_item">
<label for="step-1">Sign Up</label>
</li>
<li class="pure-steps_group-triggers_item">
<label for="step-2">Jump in</label>
</li>
</ol>
</div>
<br>
<label for="step-0">Restart</label>
</form>
</article>
</section>
</body></html>
