A Few Fascinating Methods To Use CSS Shadows For Extra Than Depth — Smashing Journal

0
3


The world of post-modern internet design is one the place the sunshine doesn’t forged many shadows. That doesn’t imply CSS shadows are going away. Quite the opposite, they’ve turn into extra adaptive. Shadows are an extremely helpful design component. We all know they add depth to an in any other case two-dimensional internet design, however do you know we are able to stack, animate, and manipulate them in ways in which transcend that?

I’ve been experimenting with shadows. On this article, I’m going to share a number of “methods” I’ve found alongside the best way and the way they can be utilized to create fascinating results which have little to do with their major function of including depth. We’ll take a look at an impact that works by stacking layers of shadows that transition on hover. After that, I’ll present you the way to make a shadow of a shadow. Lastly, we’ll play with shadows on textual content as a substitute for coloration.

Prepared for some enjoyable? Let’s begin with an fascinating hover impact.

The Introspective Shadow Hover Impact

Most of us are accustomed to the inset key phrase. It’s an optionally available worth of the CSS box-shadow property.

When inset is specified, the shadow is forged contained in the component, directed inward. It’s generally used to make it look as if a component has been stamped into the floor of the net web page. We’re going to push that shadow additional, each metaphorically and actually, to create an overlay hover impact for picture transitions.

Simply as we are able to management the shadow’s blur radius — how far the shadow spreads outward — we are able to select to use no blur in any respect to the shadow. We are able to mix that with the truth that inset shadows are painted over a component’s background (not like default shadows which might be forged beneath the component) to create what I name a “veil” that sits on high of a component.

Let’s begin with a single div within the HTML:

<div class="merchandise"></div>

There’s nothing to see but. So, let’s add some dimensions, a background coloration, and a border radius to make a inexperienced circle.

.merchandise {
  width: 250px;
  peak: 250px;
  background: inexperienced;
  border-radius: 50%;
}

That is nothing fancy up to now. I merely need to display that we are able to basically cowl the inexperienced background with a crimson inset box-shadow:

.merchandise {
  width: 250px;
  peak: 250px;
  background: inexperienced;
  border-radius: 50%;
  box-shadow: inset 250px 250px 0 crimson;
}

Now we’ve got a crimson circle with a inexperienced background beneath it. We are able to take away the crimson inset shadow on hover to disclose the inexperienced background:

.merchandise:hover {
  box-shadow: none;
}

See the Pen [Inward Shadow Pt. 1 [forked]](https://codepen.io/smashingmag/pen/qBLdjKR) by Preethi Sam.

See the Pen Inward Shadow Pt. 1 [forked] by Preethi Sam.

Since shadows might be layered and are supported by CSS transitions, let’s incorporate that for a extra fluid design. First, I’m going to replace the HTML a bit by including a span contained in the .merchandise:

    <div class="merchandise">
      <span>The New York Occasions</span>
    </div>
    <!-- extra objects -->

For the CSS, it’s the identical concept as earlier than. We wish a circle with an inset shadow and a background:

.merchandise {
  width: 300px;
  peak: 300px;
  background-image: url('nytimes.svg');
  border-radius: 50%;
  box-shadow: inset -300px -300px 0 black,
}

The distinction up to now is that I’m utilizing a background-image as a substitute of a background-color. They’re completely interchangeable for the hover impact we’re engaged on.

Subsequent, I’m going to do two issues. First, I’m going to stack extra inset shadows contained in the .merchandise. Then I’m altering the textual content coloration to white, however just for a second so the background picture exhibits all over.

.merchandise {
  width: 300px;
  peak: 300px;
  background-image: url('nytimes.svg');
  border-radius: 50%;
  box-shadow:
    inset -300px -300px 0 black,
    inset 300px -300px 0 inexperienced,
    inset -300px 300px 0 blue,
    inset 300px 300px 0 yellow,
    0 0 20px silver; /* customary outset shadow */
  coloration: white;
  }

Even after we add these 4 further shadows, we nonetheless are left with solely a black circle that claims “The New York Occasions” on it in white. The trick is to take away these shadows on hover, change the colour of the textual content to clear, and reveal the emblem beneath our stack of inset shadows.

.merchandise:hover {
  box-shadow:
    inset 0 0 0 clear,
    inset 0 0 0 clear,
    inset 0 0 0 clear,
    inset 0 0 0 clear,
    0 0 20px silver; /* retain the outset shadow */
  coloration: clear;
}

That works! However maybe we must always add a bit transition in there to easy it out:

.merchandise {
  width: 300px;
  peak: 300px;
  background-image: url('nytimes.svg');
  border-radius: 50%;
  box-shadow:
    inset -300px -300px 0 black,
    inset 300px -300px 0 inexperienced,
    inset -300px 300px 0 blue,
    inset 300px 300px 0 yellow,
    0 0 20px silver; /* customary outset shadow */
  coloration: white;
  transition:
    box-shadow ease-in-out .6s,
    coloration ease-in-out .5s;
  }

.merchandise:hover {
  box-shadow:
    inset 0 0 0 clear,
    inset 0 0 0 clear,
    inset 0 0 0 clear,
    inset 0 0 0 clear,
    0 0 20px silver; /* protecting the outset shadow */
  coloration: clear;
}

The one different factor I feel that’s value calling out is that the outward shadow within the stack shouldn’t be eliminated when the .merchandise is hovered. I solely need to take away the inset shadows.

Right here’s the ultimate outcome:

See the Pen [Inward Shadow Pt. 2 [forked]](https://codepen.io/smashingmag/pen/abPOwRm) by Preethi Sam.

See the Pen Inward Shadow Pt. 2 [forked] by Preethi Sam.

I used CSS variables all through so you’ll be able to change the colours of the shadows and the scale of the component.

Casting A Shadow Of A Shadow

If we discovered something from that final instance, it’s that shadows are visually fascinating: they’ll bend, fade, intersect, and transition. However what a couple of shadow casting one other shadow? Can we create a shadow of a component’s shadow?

This isn’t the identical as stacking layers of shadows as we did earlier. Slightly, we shall be making a silhouette of a shadow. And since we’ve got a second manner so as to add shadows to components with the CSS drop-shadow() filter, we are able to do precisely that.

A drop-shadow() is a bit totally different than a box-shadow. The place a box-shadow casts a shadow alongside the bodily edges of the component’s bounding field, a drop-shadow() ignores the field and casts a shadow alongside the component’s form.

When drop-shadow() is given to a component with a box-shadow, the shadow from the box-shadow will forged a shadow of its personal. We are able to mix these to make fascinating results, like a Venn diagram form.

.merchandise {
  box-shadow: 0 0 20px black ;
  filter: drop-shadow(-30px 0 0 blue);
}

See the Pen [Shadow of a Shadow Pt. 1 [forked]](https://codepen.io/smashingmag/pen/ZEVGymY) by Preethi Sam.

See the Pen Shadow of a Shadow Pt. 1 [forked] by Preethi Sam.

This straightforward mixture of field and drop shadows can result in fascinating designs, like shadows that forged shadows. Let’s begin with some HTML that features the identical .merchandise component we used within the final part. This time, we’ll place two youngster components inside it, one other div and an img:

<div class="merchandise">
  <div class="background"></div>
  <img src="https://smashingmagazine.com/2023/08/interesting-ways-use-css-shadows/picture.jpeg" />
</div>

<!-- extra objects -->

The .merchandise is merely serving as a container this time. The true work occurs on the .background youngster component. The picture is solely there for adornment. We’re going to set a box-shadow on the .background component, then add a stack of three drop-shadow() layers to it:

/* third circle within the following demo */
.merchandise > .background {
    box-shadow: 0 0 40px rgb(255 0 0 / .5);
    filter:
      drop-shadow(-20px 0 0 rgb(255 0 0 / .5))
      drop-shadow(20px 0 0 rgb(255 0 0 / .5))
      drop-shadow(20px 0 0 rgb(255 0 0 / .5));
}

We are able to additionally use transitions with these results (as within the center circle under).

See the Pen [Shadow of a Shadow Pt. 2 [forked]](https://codepen.io/smashingmag/pen/VwqLWqM) by Preethi Sam.

See the Pen Shadow of a Shadow Pt. 2 [forked] by Preethi Sam.

The Textual Shadow

The final impact we’re going to have a look at entails the CSS text-shadow property. It’s truly much less of a sophisticated “trick” than it’s a demonstration of utilizing and exhibiting simply the shadow of a textual content component for coloration functions.

Particularly, I’m speaking about clear textual content with a shadow on it:

/* second column within the under demo */
p {
  coloration: clear;
  text-shadow: 1px 1px 0 black;
}

See the Pen [Textual Shadow Pt. 2 [forked]](https://codepen.io/smashingmag/pen/yLGNXZB) by Preethi Sam.

See the Pen Textual Shadow Pt. 2 [forked] by Preethi Sam.

Discover the emoji? As an alternative of the full-color deal, we usually get, this emoji is extra like an icon crammed with a strong coloration. That is one method to make a fast and soiled icon system with out drawing them or working with recordsdata.

We may have additionally pulled this off with background-clip: textual content to clip across the form of the emoji or apply a drop-shadow(). Nevertheless, that impacts the background, limiting the place it may be used. Plus, I like the thought of utilizing text-shadow with textual content components since that’s what it’s used for, and emoji are a part of the textual content.

You may assume there’s a “gotcha” with underlines. For instance, text-shadow ignores the textual content ornament of hyperlinks.

See the Pen [Text Shadow No Likey Link Underlines [forked]](https://codepen.io/smashingmag/pen/YzdXQBY) by Geoff Graham.

See the Pen Textual content Shadow No Likey Hyperlink Underlines [forked] by Geoff Graham.

No massive deal. If you should help underlines, we are able to attain for the CSS text-decoration and text-underline-offset properties:

p {
  coloration: clear;
  text-shadow: 1px 1px 0 black;
  text-decoration-line: underline;
  text-decoration coloration: black;
  text-underline-offset: 3px;
}

See the Pen [Shadow-Only Link With Underline [forked]](https://codepen.io/smashingmag/pen/abPOwMB) by Geoff Graham.

See the Pen Shadow-Solely Hyperlink With Underline [forked] by Geoff Graham.

Conclusion

That’s a take a look at three fascinating methods to make use of CSS shadows as greater than that factor you utilize so as to add depth. We checked out a method that makes use of inset shadows to cover the contents of a component’s background for a neat hover impact. Then there was the thought of mixing box-shadow and drop-shadow() to forged a shadow of one other shadow. We capped issues off with a fast method to manipulate textual content and emoji with text-shadow.

I hope these experiments provide the inspiration to do some CSS shadow experiments of your personal. Shadows and gradients are maybe the 2 most necessary CSS options for “drawing” with CSS, like lots of the examples you’ll see on Lynn Fisher’s A Single Div venture. Shadows have unimaginable browser help, so the choices are plentiful so far as what we are able to do with them.

Additional Studying On SmashingMag

Smashing Editorial
(gg, yk)

LEAVE A REPLY

Please enter your comment!
Please enter your name here