CodePen

HTML

            
              <p>Old printer paper. No images!</p>
            
          
!
via HTML Inspector

CSS

            
              $stripe-color: rgb(210,230,240)
$stripe-dark: darken($stripe-color, 5%)

*
  +box-sizing(border-box)

p
  width: 30em
  height: 14em
  background: gray
  margin: -3em auto
  position: relative
  line-height: 2em
  font-family: monospace
  padding: 8em 1em 0
  +background(linear-gradient($stripe-dark 1%, white 1%, white 50%, $stripe-dark 50%, $stripe-color 52%))
  color: rgb(20,20,50)
  background-size: 100% 4em
  +filter(drop-shadow(2px 2px 5px rgba(black, .25)))
  z-index: 10
  -webkit-animation: print 3s cubic-bezier(.75,.8,0,-0.5)
  &::before, &::after
    content: ''
    position: absolute
    top: 0
    width: 2em
    height: inherit
    background: salmon
    +background(radial-gradient(transparent 24%, white 24%) 0 0)
    background-size: 2em 2em
  &::before
    left: -2em
    border-right: 1px dashed rgba($stripe-color, .7)
    border-top-left-radius: 2px
    border-bottom-left-radius: 2px
  &::after
    right: -2em
    border-left: 1px dashed rgba($stripe-color, .7)
    border-top-right-radius: 2px
    border-bottom-right-radius: 2px

body
  height: 100%
  width: 100%
  +background(linear-gradient(rgb(200,50,50), rgb(190,40,40)))
  background-repeat: no-repeat
  background-attachment: fixed
  font-size: 18px

@-webkit-keyframes print
  0%
    +translateY(-75%)
  100%
    +translateY(0%)

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................