Creating Playful Effects With CSS Text Shadows

Celý článek

Let’s have a look at how we can use the CSS text-shadow property to create truly 3D-looking text. You might think of text-shadow as being able to apply blurred, gradient-looking color behind text, and you would be right! But just like box-shadow, you can control how blurred the shadow is, including taking it all the way down to no blur at all. That, combined with comma-separating shadows and stacking them, is the CSS trickery we’ll be doing here.

By the end, we’ll have something that looks like this:

Quick refresher on text-shadow

The syntax is like this:

.el {
  text-shadow: [x-offset] [y-offset] [blur] [color];
}

• x-offset: Position on the x-axis. A positive value moves the shadow to the right, a negative value moves the shadow to the left. (required)
• y-offset: Position on the y-axis. A positive value moves the shadow to the bottom, a negative value moves the shadow to the top. (required)
• blur: How much blur the shadow should have. The higher the value, the softer the shadow. The default value is 0px (no blur). (optional)
• color: The color of the shadow. (required)

The first shadow

Let’s start creating our effect by adding just one shadow. The shadow will be pushed 6px to the right and 6px to the bottom:

:root {
  --text: #5362F6; /* Blue */
  --shadow: #E485F8; /* Pink */
}


.playful {
  color: var(--text);
  text-shadow: 6px 6px var(--shadow);
}

Creating depth with more shadows

All we have is a flat shadow at this point — there’s not much 3D to it yet. We can create the depth and connect the shadow to the actual text by adding more text-shadow instances to the same element. All it takes is comma-separating them. Let’s start with adding one more in the middle:

.playful {
  color: var(--text);
  text-shadow: 6px 6px var(--shadow),
               3px 3px var(--shadow);
}

This is already getting somewhere, but we’ll need to add a few more shadows for it to look good. The more steps we add, the more detailed the the end result will be. In this example, we’ll start from 6px 6px and gradually build down in 0.25px increments until we’ve reached 0.

.playful {
  color: var(--text);
  text-shadow: 
    6px 6px        var(--shadow), 
    5.75px 5.75px  var(--shadow), 
    5.5px 5.5px    var(--shadow), 
    5.25px 5.25px  var(--shadow),
    5px 5px        var(--shadow), 
    4.75px 4.75px  var(--shadow), 
    4.5px 4.5px    var(--shadow), 
    4.25px 4.25px  var(--shadow),
    4px 4px        var(--shadow),
    3.75px 3.75px  var(--shadow),
    3.5px 3.5px    var(--shadow),
    3.25px 3.25px  var(--shadow),
    3px 3px        var(--shadow),
    2.75px 2.75px  var(--shadow),
    2.5px 2.5px    var(--shadow),
    2.25px 2.25px  var(--shadow),
    2px 2px        var(--shadow),
    1.75px 1.75px  var(--shadow),
    1.5px 1.5px    var(--shadow),
    1.25px 1.25px  var(--shadow),
    1px 1px        var(--shadow),
    0.75px 0.75px  var(--shadow),
    0.5px 0.5px    var(--shadow),
    0.25px 0.25px  var(--shadow);
}

Simplifying the code with Sass

The result may look good, but the code right now is quite hard to read and edit. If we want to make the shadow larger, we’d have to do a lot of copying and pasting to achieve it. For example, increasing the shadow size to 10px would mean adding 16 more shadows manually.

And that’s where SCSS comes in the picture. We can use functions to automate generating all of the shadows.

@function textShadow($precision, $size, $color){
  $value: null; 
  $offset: 0;
  $length: $size * (1 / $precision) - 1;


  @for $i from 0 through $length {
    $offset: $offset + $precision;
    $shadow: $offset + px $offset + px $color;
    $value: append($value, $shadow, comma);
  }


  @return $value;
}


.playful {
  color: #5362F6;
  text-shadow: textShadow(0.25, 6, #E485F8);
}

The function textShadow takes three different arguments: the precision, size and color of the shadow. It then creates a loop where the offset gets increased by $precision (in this case, it’s 0.25px) until it reaches the total size (in this case 6px) of the shadow.

This way we can easily increase the size or precision of the shadow. For example, to create a shadow that’s 10px large and increases with 0.1px, we would only have to change this in our code:

text-shadow: textShadow(0.1, 10, #E485F8);

Alternating colors

We want to spice things up a bit by going for alternating colors. We will split up the text in individual letters wrapped in spans (this can be done manually, or automated with React or JavaScript). The output will look like this:

<p class="playful" aria-label="Wash your hands!">
  <span aria-hidden="true">W</span><span aria-hidden="true">a</span><span aria-hidden="true">s</span><span aria-hidden="true">h</span> ...
</p>

Then we can use the :nth-child() selector on the spans to change the color of their text and shadow.

.playful span:nth-child(2n) {
  color: #ED625C;
  text-shadow: textShadow(0.25, 6, #F2A063);
}

If we had done this in vanilla CSS, then here’s what we’d end up with:

.playful span {
  color: var(--text);
  text-shadow: 
    6px 6px var(--shadow),
    5.75px 5.75px var(--shadow),
    5.5px 5.5px var(--shadow),
    5.25px 5.25px var(--shadow),
    5px 5px var(--shadow),
    4.75px 4.75px var(--shadow),
    4.5px 4.5px var(--shadow),
    4.25px 4.25px var(--shadow),
    4px 4px var(--shadow),
    3.75px 3.75px var(--shadow),
    3.5px 3.5px var(--shadow),
    3.25px 3.25px var(--shadow),
    3px 3px var(--shadow),'
    2.75px 2.75px var(--shadow),
    2.5px 2.5px var(--shadow),
    2.25px 2.25px var(--shadow),
    2px 2px var(--shadow),
    1.75px 1.75px var(--shadow),
    1.5px 1.5px var(--shadow),
    1.25px 1.25px var(--shadow),
    1px 1px var(--shadow),
    0.75px 0.75px var(--shadow),
    0.5px 0.5px var(--shadow),
    0.25px 0.25px var(--shadow);
}


.playful span:nth-child(2n) {
  --text: #ED625C;
  --shadow: #F2A063;
}

We can repeat the same a couple of times with other colors and indexes until we achieve a pattern we like:

Bonus points: Adding animation

Using the same principles, we can bring the text to life even more by adding animations. First, we’ll add a repeating animation that makes each span move up and down:

.playful span {
  color: #5362F6;
  text-shadow: textShadow(0.25, 6, #E485F8);
  position: relative;
  animation: scatter 1.75s infinite;
}

We can optimize this a little further by using the prefers-reduced-motion media query. That way, folks who don’t want the animation won’t get it.

.playful span {
  color: #5362F6;
  text-shadow: textShadow(0.25, 6, #E485F8);
  position: relative;
  animation: scatter 1.75s infinite;
}

@media screen and (prefers-reduced-motion: reduce) {
  animation: none;
}

Then, in each nth-child(n) we’ll add a different animation delay.

.playful span:nth-child(2n) {
  color: #ED625C;
  text-shadow: textShadow(0.25, 6, #F2A063);
  animation-delay: 0.3s;
}

The post Creating Playful Effects With CSS Text Shadows appeared first on CSS-Tricks.