A Pen by Riley Shaw.

index.slim

#vcent
  h1 Who are you?
  input type="text" name="flat" placeholder="First name"
  input type="text" name="flat" placeholder="Last name"
  input type="text" name="flat" placeholder="Rap name"

Long-shadow-series-text-inputs.markdown

Long-shadow series text inputs

Pretty boring, but intended to go with cdpn.io/xoirg and cdpn.io/xeaBz. More coming soon!

A Pen by Riley Shaw on CodePen.

License.

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: #2980b9

*
  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 / 4
  $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
  height: $buttonsize / 4
  width: $buttonsize + $pressdepth
  border: 0
  border-right: $pressdepth solid scale-lightness($bg, 10%)
  outline: 0
  font: bold 24px / #{$buttonsize / 4 + 2px} sans-serif
  text-align: center
  text-transform: uppercase
  color: scale-lightness($bg, -45%)
  background: scale-lightness($bg, -10%)
  @for $i from 0 through 2
    &:nth-child(#{$i + 2})
      left: $i * $buttonsize*7/5
      
  &::-webkit-input-placeholder
    color: scale-lightness($bg, -25%)
  &:-moz-placeholder
    color: scale-lightness($bg, -25%)
  &::-moz-placeholder
    color: scale-lightness($bg, -25%)
  &:-ms-input-placeholder 
    color: scale-lightness($bg, -25%)