<h1>
Using Text Shadows To Create a Focus Effect
</h1>
@import "compass";
@import url(https://fonts.googleapis.com/css?family=Orbitron:700);
$text-color: darkorange;
$bg-color: #111111;
body {
padding: 2em;
background-color: $bg-color;
}
h1 {
font-size: 3em;
font-family: 'Orbitron', sans-serif;
color: transparent;
text-align: center;
text-shadow: 0 5em 200px $text-color;
@include animation(shadowfocus 4s infinite);
}
@include keyframes(shadowfocus){
0%, 100% {
text-shadow: 0 0 90px $bg-color;
}
25%, 75% {
text-shadow: 0 3em 1px $text-color;
}
}
View Compiled
/*
Twitter: @digsite_
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.