Skip to content

Instantly share code, notes, and snippets.

@amin3d

amin3d/css-only-cupcake-slider-with-sprinkles.markdown

Created October 20, 2016 03:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save amin3d/fb37fc1ae4f265957320fbe0726cb79f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save amin3d/fb37fc1ae4f265957320fbe0726cb79f to your computer and use it in GitHub Desktop.
Download ZIP
CSS Only Cupcake Slider with Sprinkles!
Raw
css-only-cupcake-slider-with-sprinkles.markdown
Raw
index.haml
.ui
.ui_inner
.ui_fruit
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/treats.png'}
.ui_basket
Basket
%i.fa.fa-shopping-cart
.ui_inner__selection
%input{:id => 'lovely', :type => 'radio', :name => 'selection', :checked => 'checked'}
%label{:for => 'lovely'}
.selected.l Lovely cupcake
.ui_inner__slider
.sb
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/starburst2.png'}
.slide
.slide_inner
.slide_inner__left
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cupcake1.png'}
.firework
-(1..70).each do
.firework_part
.slide_inner__right
%h2 Lovely cupcake
%h3 $4.99 <span> Pack of 10</span>
%p Pie cupcake caramels marshmallow ice cream icing. Brownie biscuit candy macaroon dessert ice cream halvah. Cheesecake sweet roll marzipan brownie lollipop gummies.
%input{:type => 'text',:value => '10'}
%input.hid{:type => 'checkbox', :id => 'add'}
%label{:for => 'add'}
%div.add
Add to cart
.firework
-(1..30).each do
.firework_part
%input{:id => 'super', :type => 'radio', :name => 'selection'}
%label{:for => 'super'}
.selected.s Super cupcake
.ui_inner__slider
.sb
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/starburst2.png'}
.slide
.slide_inner
.slide_inner__left
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cupcake2.png'}
.firework
-(1..70).each do
.firework_part
.slide_inner__right
%h2 Super cupcake
%h3 $4.99 <span> Pack of 10</span>
%p Pie cupcake caramels marshmallow ice cream icing. Brownie biscuit candy macaroon dessert ice cream halvah. Cheesecake sweet roll marzipan brownie lollipop gummies.
%input{:type => 'text',:value => '10'}
%input.hid{:type => 'checkbox', :id => 'add2'}
%label{:for => 'add2'}
%div.add
Add to cart
.firework
-(1..30).each do
.firework_part
%input{:id => 'mega', :type => 'radio', :name => 'selection'}
%label{:for => 'mega'}
.selected.m Mega cupcake
.ui_inner__slider
.sb
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/starburst2.png'}
.slide
.slide_inner
.slide_inner__left
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cupcake3.png'}
.firework
-(1..70).each do
.firework_part
.slide_inner__right
%h2 Mega cupcake
%h3 $4.99 <span> Pack of 10</span>
%p Pie cupcake caramels marshmallow ice cream icing. Brownie biscuit candy macaroon dessert ice cream halvah. Cheesecake sweet roll marzipan brownie lollipop gummies.
%input{:type => 'text',:value => '10'}
%input.hid{:type => 'checkbox', :id => 'add3'}
%label{:for => 'add3'}
%div.add
Add to cart
.firework
-(1..30).each do
.firework_part
%input{:id => 'huge', :type => 'radio', :name => 'selection'}
%label{:for => 'huge'}
.selected.h Huge cupcake
.ui_inner__slider
.sb
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/starburst2.png'}
.slide
.slide_inner
.slide_inner__left
%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cupcake4.png'}
.firework
-(1..70).each do
.firework_part
.slide_inner__right
%h2 Huge cupcake
%h3 $9.99 <span> Pack of 10</span>
%p Pie cupcake caramels marshmallow ice cream icing. Brownie biscuit candy macaroon dessert ice cream halvah. Cheesecake sweet roll marzipan brownie lollipop gummies.
%input{:type => 'text',:value => '10'}
%input.hid{:type => 'checkbox', :id => 'add4'}
%label{:for => 'add4'}
%div.add
Add to cart
.firework
-(1..30).each do
.firework_part
Raw
style.scss
@import 'https://fonts.googleapis.com/css?family=Amatic+SC|Bad+Script|Satisfy|Shadows+Into+Light|Yellowtail';
$width: 600;
* {
box-sizing: border-box;
}
i {
font-family: 'font-awesome';
}
body {
overflow: hidden;
background-image: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/food.png);
font-family: 'Amatic SC', cursive;
.ui {
width: $width + px;
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 50%;
transform: translateY(-50%);
&_fruit {
position: absolute;
z-index: 34;
right: -47px;
pointer-events: none;
top: 180px;
img {
width: 344px;
}
}
&_basket {
color: #de467c;
position: relative;
top: -6px;
text-align: right;
}
&_inner {
height: 340px;
background-image: -webkit-linear-gradient(45deg, #ffffff 0%, #f3f3f3 100%);
padding: 40px;
box-shadow: 0px 2px 40px 0px transparent, 0px 6px 26px 0px rgb(191, 155, 89), 0px 3px 0px -2px white inset, 0px 22px 60px 70px #f1f1f1 inset, 0px 8px 18px -7px transparent, 30px 13px 30px 28px #b18f8f inset;
.sb {
overflow: hidden;
width: 450px;
top: -1px;
left: -171px;
position: absolute;
height: 480px;
animation: spin 14s infinite linear;
img {
width: 450px;
opacity: 0;
transition: all .15s .0s
}
}
&__selection {
label {
.ui_inner__slider {
//display:none;
//position: absolute;
}
%selected {
background: #de467c;
position: absolute;
right: -130px;
cursor: pointer;
width: 130px;
color: white;
padding: 20px;
font-size: 14px;
z-index: 4;
font-family: 'Bad Script', cursive;
top: 0;
text-align: center;
transition: all .2s;
&:hover {
background: #94619c;
padding: 20px 20px 20px 30px;
}
}
.m,
.s,
.l,
.h {
@extend %selected;
border-radius: 255px 15px 205px 35px/35px 225px 35px 255px;
}
.l {
top: 0px;
border-radius: 265px 35px 185px 14px/8px 235px 12px 255px;
width: 126px;
right: -119px;
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.06) inset;
&:before {
content: '';
display: block;
background: #f1f1f1;
height: 100px;
width: 10px;
position: ABSOLUTE;
LEFT: -3PX;
top: 0px;
}
}
.s {
top: 63px;
border-radius: 195px 35px 155px 3px/19px 265px 25px 235px;
width: 127px;
right: -123px;
&:before {
content: '';
display: block;
background: #f1f1f1;
height: 100px;
width: 10px;
position: ABSOLUTE;
LEFT: -6PX;
top: 0px;
}
}
.h {
top: 187px;
border-radius: 195px 9px 177px 3px/49px 275px 65px 235px;
width: 127px;
right: -123px;
&:before {
content: '';
display: block;
background: #f1f1f1;
height: 100px;
width: 10px;
position: ABSOLUTE;
LEFT: -6PX;
top: 0px;
}
}
.m {
top: 127px;
border-radius: 265px 15px 205px 1px/0px 225px 35px 245px;
right: -125px;
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.06) inset;
&:before {
content: '';
display: block;
background: #f1f1f1;
height: 100px;
width: 10px;
position: ABSOLUTE;
LEFT: -5PX;
top: 0px;
}
}
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
.selected {
background: #d02562 !important
}
}
input[type="radio"]:checked + label .ui_inner__slider .sb img {
opacity: 0.3;
transition: all 1s .2s
}
input[type="radio"]:checked + label .ui_inner__slider .slide_inner__left {
opacity: 1;
left: -100px;
transition: all .5s .35s cubic-bezier(0.175, 1.605, 0.455, 0.920);
}
input[type="radio"]:checked + label .ui_inner__slider .slide_inner__right h2 {
opacity: 1;
left: 0px;
transition: all .5s .4s cubic-bezier(0.175, 1.605, 0.455, 0.920);
}
input[type="radio"]:checked + label .ui_inner__slider .slide_inner__right h3 {
opacity: 1;
left: 0px;
transition: all .5s .45s cubic-bezier(0.175, 1.605, 0.455, 0.920);
}
input[type="radio"]:checked + label .ui_inner__slider {
pointer-events: all
}
input[type="radio"]:checked + label .ui_inner__slider .slide_inner__right p {
opacity: 1;
left: 0px;
transition: all .5s .50s cubic-bezier(0.175, 1.605, 0.455, 0.920);
}
input[type="radio"]:checked + label .ui_inner__slider .slide_inner__right input {
position: relative;
opacity: 1;
left: 0px;
transition: all .5s .55s cubic-bezier(0.175, 1.605, 0.455, 0.920);
}
input[type="radio"]:checked + label .ui_inner__slider .slide_inner__right .add {
position: relative;
opacity: 1;
left: 0px;
transition: all .5s .6s cubic-bezier(0.175, 1.605, 0.455, 0.920);
}
input[type="radio"]:checked + label .ui_inner__slider .slide_inner__left .firework .firework {
&_part {
@for $i from 1 through 70 {
&:nth-of-type(#{$i}) {
left: random(-230, 230) + px;
top: random(-230, 230) + px;
opacity: 0;
transform: rotate(random(600, 1200) + 0deg) !important;
}
}
}
}
input[type="checkbox"]:checked + label .add .firework {
&_part {
@for $i from 1 through 70 {
&:nth-of-type(#{$i}) {
left: 277px;
top: -186px;
opacity: 1;
transform: rotate(random(600, 1200) + 0deg) !important;
}
}
}
}
}
.ui_inner__slider {
pointer-events: none;
.slide {
&_inner {
position: absolute;
top: 54px;
text-align: right;
&__left {
display: inline-block;
width: 42%;
opacity: 0;
position: absolute;
left: -220px;
top: 10px;
-webkit-transition: all .5s 0s cubic-bezier(0.175, 1.605, 0.455, 0.920);
img {
width: 100%;
z-index: 8;
position: Relative;
filter: drop-shadow(-4px 6px 6px rgba(0, 0, 0, 0.2))
}
.firework {
position: relative;
left: 130px;
top: -150px;
// z-index: 8;
&_part {
position: absolute;
border-radius: 10px;
background: Red;
transition: left .99s .36s cubic-bezier(0.230, 1.000, 0.320, 1.000), transform .6s .36s, top .99s .36s cubic-bezier(0.330, 1.000, 0.320, 1.000), opacity .99s .55s;
left: 0;
top: 0;
opacity: 1;
@for $i from 1 through 70 {
&:nth-of-type(#{$i}) {
background: adjust-hue(#de467c, random(80));
height: random(5, 15) + px;
width: 5px;
transform: rotate(0deg);
}
}
}
}
}
&__right {
display: inline-block;
width: 70%;
padding: 0px 40px 0px 0px;
text-align: left;
position: relative;
z-index: 1;
.hid {
display: none;
}
h2 {
margin: 0px 0px 10px 0px;
font-family: 'Amatic SC', cursive;
color: #94619c;
font-size: 32px;
position: relative;
opacity: 0;
left: -90px;
transition: all .5s .2s cubic-bezier(0.175, 1.605, 0.455, 0.920);
}
h3 {
margin: 0px 0px 10px 0px;
font-family: 'Satisfy', cursive;
color: #de467c;
font-size: 20px;
position: relative;
opacity: 0;
left: -90px;
transition: all .5s .25s cubic-bezier(0.175, 1.605, 0.455, 0.920);
span {
font-size: 11px;
}
}
p {
margin: 0;
font-family: 'Bad Script', cursive;
line-height: 22px;
color: #9e9da7;
font-size: 12px;
position: relative;
opacity: 0;
left: -90px;
transition: all .5s .3s cubic-bezier(0.175, 1.605, 0.455, 0.920);
}
input {
margin: 20px 0px;
padding: 10px;
outline: none;
border-radius: 255px 15px 205px 35px/35px 225px 35px 255px;
font-family: 'Satisfy', cursive;
border: 3px solid #e8e8e8;
color: #de467c;
width: 55px;
text-align: Center;
position: relative;
opacity: 0;
left: -40px;
transition: all .5s .35s cubic-bezier(0.175, 1.605, 0.455, 0.920);
}
.add {
cursor: pointer;
input {
display: none;
}
display: inherit;
margin: 20px 0px;
padding: 10px 20px;
margin-left: 10px;
border-radius: 255px 15px 205px 35px/35px 225px 35px 255px;
font-family: 'Amatic SC',
cursive;
background: #de467c;
color: white;
width: 25px;
text-align: Center;
text-decoration: none;
position: relative;
opacity: 0;
left: -40px;
transition: all .5s .4s cubic-bezier(0.175, 1.605, 0.455, 0.920);
.firework {
position: absolute;
left: 0px;
top: 0px;
// z-index: 8;
&_part {
position: absolute;
border-radius: 10px;
left: 0;
top: 0;
opacity: 1;
@for $i from 1 through 40 {
&:nth-of-type(#{$i}) {
background: #de467c;
height: 5px;
width: 5px;
opacity: 0;
left: random(40, 50) + px;
top: random(10, 20) + px;
transform: rotate(0deg);
transition: left random(30, 170)/100 + 0s $i / 80 + 0s cubic-bezier(0.230, 1.000, 0.320, 1.000), transform .6s $i / 80 + 0s, top .99s $i / 80 + 0s cubic-bezier(0.330, 1.000, 0.320, 1.000), opacity .3s .2 + 0s;
}
}
}
}
}
}
}
}
}
}
}
}
@keyframes spin {
to {
transform: rotate(360deg)
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment