CSS3's text-shadow property allows you to do some awesome effects to create letterpress, neon, and retro designs. I use the same techniques on this site for the main Hank Stoever headline. Here's what it looks like:

holographic text

Here is the SASS mixin I use to create this effect:

@mixin retro($spacing)
  $opacity: 0.7
  :text-shadow $spacing -#{$spacing} 0 rgba(#ecd07a, $opacity), -#{$spacing} -#{$spacing} rgba(#34b0ca, $opacity), -#{$spacing} $spacing 0 rgba(#ff628b, $opacity), $spacing $spacing 0 rgba(#3fca34, $opacity)
  $textColor: rgba(#6d34ca, 0.6)
  :color $textColor
  a
    :color $textColor
    :text-decoration none
    &:hover, &:active
      :text-decoration underline

You can use the mixin like this:

.retro
  +retro(3px)

The main text color is a purple with an opacity of 0.6.

plain text

Each text shadow is then placed one by one behind the text:

$spacing -#{$spacing} 0 rgba(#ecd07a, $opacity)

holo1

-#{$spacing} -#{$spacing} rgba(#34b0ca, $opacity)

holo2

-#{$spacing} $spacing 0 rgba(#ff628b, $opacity)

holo3

$spacing $spacing 0 rgba(#3fca34, $opacity)

holo4

Altering the $spacing variable changes how far each shadow is shifted:

spaced out

This is just one of many awesome things you can do with CSS3's text-shadow. If you end up using something like this in one of your own websites, let me know and I'll post it here!

Holographic Text with CSS Text-Shadow

holographic text