Pure CSS Name Tag (sass)

nametag.sass

// just create a container .nametag div, with a .name div with the name inside of that.
// NOTE I'm using 'Permanent Marker' from the Google Font directory: http://www.google.com/webfonts/family?family=Permanent+Marker&subset=latin
// e.g. with HAML:
//.nametag
//  .name My Name

.nametag
  background: #D00
  border-radius: 20px
  padding: 5px 2px 20px 2px
  text-align: center
  color: white
  width: 300px
  font-family: helvetica, arial, sans-serif
  -webkit-transform: rotate(3deg)
  -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.245)
  -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.245)
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.245)
  .hello
    &:before
      font-weight: bold
      font-size: 3em
      display: block
      content: "HELLO"
    &:after
      font-size: 1.5em
      display: block
      content: "my name is"
  .name
    color: #222
    background: #fff
    padding: 25px 0
    margin: 5px 0
    font-size: 2.5em
    letter-spacing: -2px
    font-family: 'Permanent Marker', arial, serif