Skip to content

Instantly share code, notes, and snippets.

@rileyjshaw

rileyjshaw/Long-shadow checkboxes.markdown

Last active December 26, 2015 20:59
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save rileyjshaw/7213152 to your computer and use it in GitHub Desktop.
Download ZIP
Long-shadow checkboxes
Raw
index.html
#vcent
h1 What'll it be today?
.buttons
input type="checkbox" name="flat" id="sex"
label for="sex" Sex
input type="checkbox" name="flat" id="drugs" class="s34"
label for="drugs" Drugs
input type="checkbox" name="flat" id="rock" class="s34"
label for="rock" Rock & Roll
Raw
index.slim
#vcent
h1 What'll it be today?
.buttons
input type="checkbox" name="flat" id="sex"
label for="sex" Sex
input type="checkbox" name="flat" id="drugs" class="s34"
label for="drugs" Drugs
input type="checkbox" name="flat" id="rock" class="s34"
label for="rock" Rock & Roll
Raw
Long-shadow checkboxes.markdown

Long-shadow checkboxes

An attempt to give flat buttons some depth. Let me know what you think! (Part of a series)

A Pen by Riley Shaw on CodePen.

License.

Raw
Long-shadow-checkboxes.markdown

Long-shadow checkboxes

An attempt to give flat buttons some depth. Let me know what you think! (Part of a series)

A Pen by Riley Shaw on CodePen.

License.

Raw
script.coffee
$('input').change () ->
$($(this).nextAll('input').get(0)).toggleClass('s34')
Raw
script.js
$('input').change () ->
$($(this).nextAll('input').get(0)).toggleClass('s34')
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
@import compass
$colors: #2980b9 #8e44ad #7f8c8d #c0392b #16a085 #f39c12
$h1height: 108px
$buttonsize: 230px
$pressdepth: 12px
$bg: nth($colors, random(length($colors)) + 1)
// Override the random color for now
$bg: #8e44ad
=shadowfy($num, $c)
$shadow: 1px 1px #{$c}
@for $i from 2px through $num*1px
$shadow: append($shadow, $i ($i) $c, comma)
box-shadow: $shadow
*
box-sizing: border-box
html, body
height: 100%
body
margin: 0
padding: 0
background: $bg
h1
height: $h1height
font: bold 36px/#{$h1height} sans-serif
text-transform: uppercase
color: scale-lightness($bg, -35%)
#vcent
$vcentheight: $h1height * 2 + $buttonsize / 2
$vcentwidth: $buttonsize * 3 + 2 * $buttonsize * 2/5
position: absolute
top: 50%
left: 50%
height: $vcentheight
width: $vcentwidth
margin: -$vcentheight/2 0 0 #{-$vcentwidth/2}
text-align: center
input
position: absolute
left: -99999px
label
cursor: pointer
position: absolute
height: $buttonsize / 2
width: $buttonsize + $pressdepth
border-left: $pressdepth solid scale-lightness($bg, 20%)
border-right: 0 solid $bg
font: bold 24px / #{$buttonsize / 2} sans-serif
text-align: center
text-transform: uppercase
color: scale-lightness($bg, -25%)
background: scale-lightness($bg, 10%)
@for $i from 0 through 2
&:nth-child(#{2 * ($i + 1)})
left: $i * $buttonsize*7/5
+transition(background 2s, width 0.5s 0.5s, border-left 0.5s 0.5s, border-right 0.5s, box-shadow 0s 0.5s)
+shadowfy(800, scale-lightness($bg, -5%))
\input:checked + &
width: $buttonsize - $pressdepth
border-left-width: 0
border-left-color: $bg
border-right-width: $pressdepth
border-right-color: scale-lightness($bg, 10%)
color: scale-lightness($bg, -45%)
background: scale-lightness($bg, -10%)
+box-shadow(none)
+transition(color 2s, background 2s, width 0.5s, border-left 0.5s, border-right 0.5s 0.5s, box-shadow 0s 0.5s)
&:before
background: scale-lightness(#27ae60, 35%)
&:before
content: ''
position: absolute
top: 12px
right: 12px
height: 12px
width: 12px
+border-radius(6px)
background: scale-lightness($bg, -15%)
+transition(background 0.5s)
&:after
content: ''
position: absolute
bottom: 0px
left: 0px
height: 0
width: 0
border-bottom: 10px solid transparent
border-right: 10px solid transparent
+transition(border 0.5s)
\input.s34:checked+label:after
border-right-width: 34px
border-bottom-width: 34px
border-bottom-color: scale-lightness($bg, -25%)
+transition(border 0.5s 0.5s)
Raw
style.sass
@import "compass"
$colors: #2980b9 #8e44ad #7f8c8d #c0392b #16a085 #f39c12
$h1height: 108px
$buttonsize: 230px
$pressdepth: 12px
$bg: nth($colors, random(length($colors)) + 1)
// Override the random color for now
$bg: #8e44ad
=shadowfy($num, $c)
$shadow: 1px 1px #{$c}
@for $i from 2px through $num*1px
$shadow: append($shadow, $i ($i) $c, comma)
box-shadow: $shadow
*
box-sizing: border-box
html, body
height: 100%
body
margin: 0
padding: 0
background: $bg
h1
height: $h1height
font: bold 36px/#{$h1height} sans-serif
text-transform: uppercase
color: scale-lightness($bg, -35%)
#vcent
$vcentheight: $h1height * 2 + $buttonsize / 2
$vcentwidth: $buttonsize * 3 + 2 * $buttonsize * 2/5
position: absolute
top: 50%
left: 50%
height: $vcentheight
width: $vcentwidth
margin: -$vcentheight/2 0 0 #{-$vcentwidth/2}
text-align: center
input
position: absolute
left: -99999px
label
cursor: pointer
position: absolute
height: $buttonsize / 2
width: $buttonsize + $pressdepth
border-left: $pressdepth solid scale-lightness($bg, 20%)
border-right: 0 solid $bg
font: bold 24px / #{$buttonsize / 2} sans-serif
text-align: center
text-transform: uppercase
color: scale-lightness($bg, -25%)
background: scale-lightness($bg, 10%)
@for $i from 0 through 2
&:nth-child(#{2 * ($i + 1)})
left: $i * $buttonsize*7/5
+transition(background 2s, width .5s .5s, border-left .5s .5s, border-right .5s, box-shadow 0 .5s)
+shadowfy(800, scale-lightness($bg, -5%))
\input:checked + &
width: $buttonsize - $pressdepth
border-left-width: 0
border-left-color: $bg
border-right-width: $pressdepth
border-right-color: scale-lightness($bg, 10%)
color: scale-lightness($bg, -45%)
background: scale-lightness($bg, -10%)
+box-shadow(none)
+transition(color 2s, background 2s, width .5s, border-left .5s, border-right .5s .5s, box-shadow 0 .5s)
&:before
background: scale-lightness(#27ae60, 35%)
&:before
content: ''
position: absolute
top: 12px
right: 12px
height: 12px
width: 12px
+border-radius(6px)
background: scale-lightness($bg, -15%)
+transition(background .5s)
&:after
content: ''
position: absolute
bottom: 0px
left: 0px
height: 0
width: 0
border-bottom: 10px solid transparent
border-right: 10px solid transparent
+transition(border .5s)
\input.s34:checked+label:after
border-right-width: 34px
border-bottom-width: 34px
border-bottom-color: scale-lightness($bg, -25%)
+transition(border .5s .5s)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment