Peeled Text Transforms

index.slim

p aria-label="CodePen"
  span data-text="C" C
  span data-text="O" O
  span data-text="D" D
  span data-text="E" E
  span data-text="P" P
  span data-text="E" E
  span data-text="N" N

Peeled-Text-Transforms.markdown

Peeled Text Transforms

This pen shows text that looks like it is peeled of the page. It has a smooth animation when hovered. For accessibility reasons, I've added an aria-label to the paragraph.

Tests

Primarily tested in Safari 8 with VoiceOver on OS X 10.10 Yosemite. Not tested on mobile devices.

Also tested in these browsers

• Firefox 33 on OS X 10.10 Yosemite Chrome 38 on OS X 10.10 Yosemite
• Internet Explorer 11 on Windows 7
• Internet Explorer 10 on Windows 7
• Firefox 16 on Windows XP

Usable in these browsers

• Internet Explorer 9 on Windows 7—doesn't transform the foreground text.
• Internet Explorer 8 on Windows 7—shows text in base colour.
• Internet Explorer 6 on Windows XP—shows text in base colour.

Broken in these browsers

• Every Opera version up until WebKit versions—text becomes illegible.
• Firefox 3 up to 16 on Windows XP—text becomes illegible.

A Pen by Michiel Bijl on CodePen.

License.

style.stylus

// Brownish
background-color = hsla(353, 8%, 40%, 1)
// Purple
background-color = hsla(259, 36%, 47%, 1)
// CodePen Grey
//background-color = #252527
// CodePen Blue
//background-color = hsla(210, 63%, 53%, 1)

// Some settings
shadow-scale =       1.1
letter-spacing =     (300em/1000)
initial-skew =       -40deg
hover-skew =         -10deg
animation-duration = .3s

// Automatic settings
shadow-initial-skew = ((initial-skew / 2) * -1)
shadow-hover-skew =   ((hover-skew / 2) * -1)

// Styles
p
  color #fff
  font-family Avenir Next, Helvetica Neue, Helvetica, Tahoma, sans-serif
  font-size 1em
  font-weight 700

  span
    display inline-block
    position relative
    transform-style preserve-3d
    perspective 500
    -webkit-font-smoothing antialiased
    
    &::before,
    &::after
      display none
      position absolute
      top 0
      left -1px
      transform-origin left top
      transition all ease-out animation-duration
      content attr(data-text)

    &::before
      z-index 1
      color rgba(0, 0, 0, .2)
      transform scale(shadow-scale, 1) skew(0deg, shadow-initial-skew)

    &::after
      z-index 2
      color background-color
      text-shadow -1px 0 1px background-color, 1px 0 1px rgba(0, 0, 0, .8)
      transform rotateY(initial-skew)

    &:hover
      &::before
        transform scale(shadow-scale, 1) skew(0deg, shadow-hover-skew)
      &::after
        transform rotateY(hover-skew)

    & + span
      margin-left letter-spacing
      
p
  @media (min-width: 20em)
    font-size 2em
    span::before,
    span::after
    	display block
  @media (min-width: 30em)
    font-size 3em
  @media (min-width: 40em)
    font-size 5em
  @media (min-width: 60em)
    font-size 8em

// Unimportant bits
html,
body
  margin 0
  padding 0
  height 100%

body
  display flex
  align-items center
  justify-content center
  background-color background-color