A Pen by Riley Shaw.

index.slim

#vcent
  h1 And how does that make you feel?
  textarea

Long-shadow-series-textarea.markdown

Long-shadow series textarea

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: #7f8c8d

*
  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
  
textarea
  overflow: hidden
  position: relative
  height: $buttonsize / 2
  width: $buttonsize * 3 + 2 * $buttonsize * 2/5
  padding: 6px
  border: 0
  border-right: $pressdepth solid scale-lightness($bg, 10%)
  outline: none
  font: 24px sans-serif
  text-align: justify
  //text-transform: uppercase
  color: scale-lightness($bg, -45%)
  background: scale-lightness($bg, -10%)