Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/css-pancake-toggle.markdown

Created January 13, 2018 23:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeMyUI/769b84eadbd55a89de2c840107ee77ac to your computer and use it in GitHub Desktop.
Save CodeMyUI/769b84eadbd55a89de2c840107ee77ac to your computer and use it in GitHub Desktop.
Download ZIP
CSS Pancake Toggle
Raw
css-pancake-toggle.markdown

CSS Pancake Toggle

exploring some more culinary toggles inspired by some of @ChrisGannon's wonderful works (chrome/firefox only)

A Pen by Adam Kuhn on CodePen.

License.

Raw
index.haml
.wrap
%input{:type => "checkbox"}/
.griddle
.cake
.syrup
.butter
.butter.two
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
<svg class="svg" viewBox="0 0 400 400">
<defs>
<filter id="duotone-filter-post-one">
<feColorMatrix type="matrix" values="0.14453125 0 0 0 0.33203125 0.71875 0 0 0 0.27734375 -0.34765625 0 0 0 0.73046875 0 0 0 1 0"></feColorMatrix>
</filter>
</defs>
</svg>
Raw
style.scss
body{
width:100%;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:radial-gradient(circle at center, lighten(#a3ccba, 5%), #a3ccba);
svg{
position:absolute;
width:0;
height:0;
}
.wrap{
width:350px;
height:150px;
min-width:350px;
position:relative;
box-shadow:0 0 0 10px #fff, 0 0 0 11px darken(#a9cfbe, 10%), 0 0px 20px 15px darken(#a9cfbe, 10%);
background:#fff;
border-radius:100px;
opacity:0;
animation:fadein 0.5s ease-in-out 1 forwards;
animation-delay:0.5s;
@keyframes fadein{
to{
opacity:1;
}
}
input{
position:absolute;
width:100%;
height:100%;
opacity:0;
z-index:999;
top:0;
left:0;
&:checked ~ .syrup{
&:before{
animation:drip 3.25s ease-out 1 forwards;
-webkit-animation:drip 3.25s ease-out 1 forwards;
@keyframes drip{
0%{
transform:translateY(-100vh);
clip-path: polygon(55% 0, 44% 1%, 39% 9%, 40% 15%, 39% 19%, 38% 24%, 37% 27%, 37% 31%, 39% 34%, 40% 36%, 43% 38%, 46% 39%, 50% 41%, 53% 39%, 55% 37%, 59% 35%, 63% 35%, 64% 31%, 61% 24%, 60% 16%, 59% 9%);
}
80%{
transform:translateY(-100vh);
clip-path: polygon(55% 0, 44% 1%, 39% 9%, 40% 15%, 39% 19%, 38% 24%, 37% 27%, 37% 31%, 39% 34%, 40% 36%, 43% 38%, 46% 39%, 50% 41%, 53% 39%, 55% 37%, 59% 35%, 63% 35%, 64% 31%, 61% 24%, 60% 16%, 59% 9%);
}
90%{
transform:translateY(0vh);
clip-path: polygon(55% 0, 44% 1%, 39% 9%, 40% 15%, 39% 19%, 38% 24%, 37% 27%, 37% 31%, 39% 34%, 40% 36%, 43% 38%, 46% 39%, 50% 41%, 53% 39%, 55% 37%, 59% 35%, 63% 35%, 64% 31%, 61% 24%, 60% 16%, 59% 9%);
}
100%{
transform:translateY(0vh);
clip-path: polygon(60% 14%, 40% 16%, 22% 6%, 8% 23%, 2% 36%, 13% 55%, 10% 68%, 7% 96%, 13% 97%, 24% 57%, 38% 56%, 44% 75%, 42% 94%, 61% 97%, 57% 56%, 70% 57%, 80% 92%, 91% 96%, 95% 85%, 86% 51%, 88% 7%);
}
}
@-webkit-keyframes drip{
0%{
-webkit-transform:translateY(-100vh);
-webkit-clip-path: polygon(55% 0, 44% 1%, 39% 9%, 40% 15%, 39% 19%, 38% 24%, 37% 27%, 37% 31%, 39% 34%, 40% 36%, 43% 38%, 46% 39%, 50% 41%, 53% 39%, 55% 37%, 59% 35%, 63% 35%, 64% 31%, 61% 24%, 60% 16%, 59% 9%);
}
80%{
-webkit-transform:translateY(-100vh);
-webkit-clip-path: polygon(55% 0, 44% 1%, 39% 9%, 40% 15%, 39% 19%, 38% 24%, 37% 27%, 37% 31%, 39% 34%, 40% 36%, 43% 38%, 46% 39%, 50% 41%, 53% 39%, 55% 37%, 59% 35%, 63% 35%, 64% 31%, 61% 24%, 60% 16%, 59% 9%);
}
90%{
-webkit-transform:translateY(0vh);
-webkit-clip-path: polygon(55% 0, 44% 1%, 39% 9%, 40% 15%, 39% 19%, 38% 24%, 37% 27%, 37% 31%, 39% 34%, 40% 36%, 43% 38%, 46% 39%, 50% 41%, 53% 39%, 55% 37%, 59% 35%, 63% 35%, 64% 31%, 61% 24%, 60% 16%, 59% 9%);
}
100%{
-webkit-transform:translateY(0vh);
-webkit-clip-path: polygon(60% 14%, 40% 16%, 22% 6%, 8% 23%, 2% 36%, 13% 55%, 10% 68%, 7% 96%, 13% 97%, 24% 57%, 38% 56%, 44% 75%, 42% 94%, 61% 97%, 57% 56%, 70% 57%, 80% 92%, 91% 96%, 95% 85%, 86% 51%, 88% 7%);
}
}
}
}
&:checked ~ .butter{
animation:drop 3.25s ease-out 1 forwards;
-webkit-animation:drop 3.25s ease-out 1 forwards;
&.two{
animation-delay:0.25s;
z-index:12;
filter:brightness(0.975);
-webkit-filter:brightness(0.975);
}
@keyframes drop{
0%{
transform:translateY(-100vh) rotate(-10deg);
}
90%{
transform:translateY(-100vh) rotate(-10deg);
}
100%{
transform:translateY(0vh) rotate(-10deg);
}
}
@-webkit-keyframes drop{
0%{
-webkit-transform:translateY(-100vh) rotate(-10deg);
}
90%{
-webkit-transform:translateY(-100vh) rotate(-10deg);
}
100%{
-webkit-transform:translateY(0vh) rotate(-10deg);
}
}
}
&:checked ~ .cake{
animation:flip 3.25s linear 1 forwards;
-webkit-animation:flip 3.25s linear 1 forwards;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
@keyframes flip{
0%{
background:transparent;
}
45%{
background:transparent;
border-radius:100%;
}
50%{
background:#f5e3be;
border-radius:100%;
transform:translateX(0);
box-shadow:inset 0 0 5px 90px #f5e3be;
}
65%{
background:#f5e3be;
border-radius:100%;
transform:scale(1) translateX(0) rotateY(0deg);
box-shadow:inset 0 0 5px 90px #f5e3be;
}
70%{
background:#f5e3be;
border-radius:100%;
transform:scale(1.5) translateX(25px) rotateY(75deg);
box-shadow:inset 0 0 5px 90px #f5e3be;
}
75%{
background:#f5e3be;
border-radius:100%;
transform:scale(1.75) translateX(100px) rotateY(120deg);
box-shadow:inset 0 0 5px 90px #f5e3be;
}
80%{
background:#eec87d;
border-radius:100%;
transform:scale(1.1) translateX(185px) rotateY(180deg);
box-shadow:inset 0 0 5px 15px #f5e3be;
}
100%{
background:#eec87d;
border-radius:100%;
transform:scale(1.1) translateX(185px) rotateY(180deg);
box-shadow:inset 0 0 5px 10px #f5e3be;
}
}
@-webkit-keyframes flip{
0%{
background:transparent;
}
45%{
background:transparent;
-webkit-border-radius:100%;
}
50%{
background:#f5e3be;
-webkit-border-radius:100%;
-webkit-transform:translateX(0);
-webkit-box-shadow:inset 0 0 5px 90px #f5e3be;
}
65%{
background:#f5e3be;
-webkit-border-radius:100%;
-webkit-transform:scale(1) translateX(0) rotateY(0deg);
-webkit-box-shadow:inset 0 0 5px 90px #f5e3be;
}
70%{
background:#f5e3be;
-webkit-border-radius:100%;
-webkit-transform:scale(1.5) translateX(25px) rotateY(75deg);
-webkit-box-shadow:inset 0 0 5px 90px #f5e3be;
}
75%{
background:#f5e3be;
-webkit-border-radius:100%;
-webkit-transform:scale(1.75) translateX(100px) rotateY(120deg);
-webkit-box-shadow:inset 0 0 5px 90px #f5e3be;
}
80%{
background:#eec87d;
border-radius:100%;
transform:scale(1.1) translateX(185px) rotateY(180deg);
box-shadow:inset 0 0 5px 15px #f5e3be;
}
100%{
background:#eec87d;
-webkit-border-radius:100%;
-webkit-transform:scale(1.1) translateX(185px) rotateY(180deg);
-webkit-box-shadow:inset 0 0 5px 10px #f5e3be;
}
}
&:before{
animation:pour 3s linear 1 forwards;
-webkit-animation:pour 3s linear 1 forwards;
transition:0.5s ease-in-out;
transform:scale(1);
@keyframes pour{
0%{
clip-path: polygon(49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 50%, 50% 50%, 49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 51%);
}
25%{
clip-path: polygon(0 24%, 14% 53%, 0 60%, 0 83%, 20% 89%, 43% 67%, 63% 87%, 90% 95%, 96% 79%, 74% 56%, 80% 40%, 100% 15%, 94% 6%, 77% 0, 60% 10%, 38% 30%, 15% 8%);
opacity:1;
}
50%{
clip-path: polygon(0 24%, 0 41%, 0 60%, 0 78%, 0 100%, 27% 99%, 46% 100%, 81% 100%, 100% 100%, 100% 69%, 100% 38%, 100% 15%, 100% 0, 77% 0, 48% 0, 22% 0, 0 0);
opacity:1;
}
75%{
clip-path: polygon(0 24%, 0 41%, 0 60%, 0 78%, 0 100%, 27% 99%, 46% 100%, 81% 100%, 100% 100%, 100% 69%, 100% 38%, 100% 15%, 100% 0, 77% 0, 48% 0, 22% 0, 0 0);
border-radius:100%;
opacity:0;
}
100%{
clip-path: polygon(0 24%, 0 41%, 0 60%, 0 78%, 0 100%, 27% 99%, 46% 100%, 81% 100%, 100% 100%, 100% 69%, 100% 38%, 100% 15%, 100% 0, 77% 0, 48% 0, 22% 0, 0 0);
border-radius:100%;
opacity:0;
}
}
@-webkit-keyframes pour{
0%{
-webkit-clip-path: polygon(49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 50%, 50% 50%, 49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 51%);
}
25%{
-webkit-clip-path: polygon(0 24%, 14% 53%, 0 60%, 0 83%, 20% 89%, 43% 67%, 63% 87%, 90% 95%, 96% 79%, 74% 56%, 80% 40%, 100% 15%, 94% 6%, 77% 0, 60% 10%, 38% 30%, 15% 8%);
opacity:1;
}
50%{
-webkit-clip-path: polygon(0 24%, 0 41%, 0 60%, 0 78%, 0 100%, 27% 99%, 46% 100%, 81% 100%, 100% 100%, 100% 69%, 100% 38%, 100% 15%, 100% 0, 77% 0, 48% 0, 22% 0, 0 0);
opacity:1;
}
75%{
-webkit-clip-path: polygon(0 24%, 0 41%, 0 60%, 0 78%, 0 100%, 27% 99%, 46% 100%, 81% 100%, 100% 100%, 100% 69%, 100% 38%, 100% 15%, 100% 0, 77% 0, 48% 0, 22% 0, 0 0);
-webkit-border-radius:100%;
opacity:0;
}
100%{
-webkit-clip-path: polygon(0 24%, 0 41%, 0 60%, 0 78%, 0 100%, 27% 99%, 46% 100%, 81% 100%, 100% 100%, 100% 69%, 100% 38%, 100% 15%, 100% 0, 77% 0, 48% 0, 22% 0, 0 0);
-webkit-border-radius:100%;
opacity:0;
}
}
}
}
&:checked ~ .griddle{
animation:turn 2.5s ease-in-out 1 forwards;
-webkit-animation:turn 2.5s ease-in-out 1 forwards;
@keyframes turn{
0%{
transform:rotate(0deg);
}
65%{
transform:rotate(0deg) rotateY(-10deg);
}
75%{
transform:rotate(0deg) rotateY(-10deg);
}
85%{
transform:rotate(0deg) rotateY(20deg);
}
90%{
transform:rotate(0deg) rotateY(0deg);
}
100%{
transform:rotate(180deg);
}
}
@-webkit-keyframes turn{
0%{
-webkit-transform:rotate(0deg);
}
65%{
-webkit-transform:rotate(0deg) rotateY(-10deg);
}
75%{
-webkit-transform:rotate(0deg) rotateY(-10deg);
}
85%{
-webkit-transform:rotate(0deg) rotateY(20deg);
}
90%{
-webkit-transform:rotate(0deg) rotateY(0deg);
}
100%{
-webkit-transform:rotate(180deg);
}
}
transition-delay:0px;
&:after{
box-shadow:inset 0 -3px 0 #000;
top:calc(50% - 2.5px);
}
}
}
.butter{
position:absolute;
width:15px;
height:10px;
background:linear-gradient(to bottom, #ffffa2, #ffffa2 7px, darken(#ffffa2, 5%) 7px);
right:65px;
top:65px;
z-index:13;
border-radius:2px;
transform:translateY(-100vh) rotate(-10deg);
&.two{
right:57.5px;
top:67.5px;
}
}
.syrup{
position:absolute;
width:100px;
height:100px;
z-index:11;
border-radius:100%;
right:22.5px;
top:30px;
filter:url("#goo");
-webkit-filter:url("#goo");
&:before{
content:'';
position:absolute;
width:100%;
height:100%;
border-radius:100%;
top:0;
left:0;
background:#c9af90;
transform:translateY(-100vh);
}
}
.cake{
position:absolute;
width:100px;
height:100px;
left:25px;
top:25px;
filter:url("#goo");
-webkit-filter:url("#goo");
z-index:10;
will-change:transform;
&:before{
content:'';
position:absolute;
width:100px;
height:100px;
z-index:10;
background:#f5e3be;
clip-path: polygon(49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 50%, 50% 50%, 49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 51%, 49% 51%);
transition:0.5s ease-out;
transform:scale(0);
}
}
.griddle{
position:absolute;
width:150px;
height:150px;
background:#000;
top:0;
left:0;
border-radius:100%;
box-shadow:inset 0 0 0 5px lighten(#000, 20%), inset 0 0 3px 8px lighten(#000, 30%), inset 0 0 20px 20px lighten(#000, 20%);
z-index:2;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
transform-origin:175px 50%;
animation:turnback 0.5s ease-in-out 1 forwards;
@keyframes turnback{
0%{
transform:rotate(180deg);
}
100%{
transform:rotate(0deg);
}
}
&:before{
content:'';
position:absolute;
width:52.5%;
height:25px;
top:calc(50% - 12.5px);
right:-50%;
background:lighten(#000, 20%);
z-index:-1;
border-radius:350% 100% 100% 350% / 200% 200% 200% 200%;
}
&:after{
content:'';
position:absolute;
width:10px;
height:10px;
top:calc(50% - 7px);
right:-65px;
background:#fff;
border-radius:100%;
box-shadow:inset 0 3px 0 #000;
transition:0.5s ease-in-out;
transition-delay:2s;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment