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.
Each text shadow is then placed one by one behind the text:
$spacing -#{$spacing} 0 rgba(#ecd07a, $opacity)
-#{$spacing} -#{$spacing} rgba(#34b0ca, $opacity)
-#{$spacing} $spacing 0 rgba(#ff628b, $opacity)
$spacing $spacing 0 rgba(#3fca34, $opacity)
Altering the $spacing
variable changes how far each shadow is shifted:
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!