A Few Fascinating Techniques To Use CSS Shadows For Extra Than Intensity — Smashing Mag


The arena 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. To the contrary, they’ve grow to be extra adaptive. Shadows are a shockingly helpful design component. We all know they upload intensity to an in a different way two-dimensional internet design, however do you know we will stack, animate, and manipulate them in ways in which transcend that?

I’ve been experimenting with shadows. On this article, I’m going to proportion a number of “methods” I’ve found out alongside the way in which and the way they may be able to be used to create appealing results that experience little to do with their number one function of including intensity. We’ll take a look at an impact that works by way of stacking layers of shadows that transition on hover. After that, I will be able to display you find out how to make a shadow of a shadow. Finally, we’ll play with shadows on textual content as a substitute for colour.

In a position for some a laugh? Let’s get started with a fascinating hover impact.

The Introspective Shadow Hover Impact

Maximum people are acquainted with the inset key phrase. It’s an non-compulsory price of the CSS box-shadow belongings.

When inset is specified, the shadow is forged throughout the component, directed inward. It’s usually used to make it glance as though a component has been stamped into the outside of the internet 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 will regulate the shadow’s blur radius — how a long way the shadow spreads outward — we will make a choice to use no blur in any respect to the shadow. We will mix that with the truth that inset shadows are painted over a component’s background (in contrast to default shadows which might be forged underneath the component) to create what I name a “veil” that sits on most sensible of a component.

Let’s get started with a unmarried div within the HTML:

<div elegance="merchandise"></div>

There’s not anything to peer but. So, let’s upload some dimensions, a background colour, and a border radius to make a inexperienced circle.

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

That is not anything fancy to this point. I simply need to display that we will necessarily duvet the fairway 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 now we have a crimson circle with a inexperienced background underneath it. We will take away the crimson inset shadow on hover to expose the fairway background:

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

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

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

Since shadows will also be layered and are supported by way of CSS transitions, let’s incorporate that for a extra fluid design. First, I’m going to replace the HTML just a little by way of including a span throughout the .merchandise:

    <div elegance="merchandise">
      <span>The New York Occasions</span>
    </div>
    <!-- extra pieces -->

For the CSS, it’s the similar thought as earlier than. We would like 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 variation to this point is that I’m the use of a background-image as an alternative of a background-color. They’re completely interchangeable for the hover impact we’re running on.

Subsequent, I’m going to do two issues. First, I’m going to stack extra inset shadows throughout the .merchandise. Then I’m converting the textual content colour to white, however just for a second so the background picture displays during.

.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; /* usual outset shadow */
  colour: white;
  }

Even once we upload the ones 4 further shadows, we nonetheless are left with just a black circle that claims “The New York Occasions” on it in white. The trick is to take away the ones shadows on hover, alternate the colour of the textual content to clear, and disclose the brand underneath 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 */
  colour: clear;
}

That works! However possibly we must upload somewhat transition in there to clean 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; /* usual outset shadow */
  colour: white;
  transition:
    box-shadow ease-in-out .6s,
    colour 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; /* preserving the outset shadow */
  colour: clear;
}

The one thing more I feel that’s value calling out is that the outward shadow within the stack isn’t got rid of when the .merchandise is hovered. I most effective 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 way of Preethi Sam.

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

I used CSS variables during so you’ll be able to alternate the colours of the shadows and the dimensions of the component.

Casting A Shadow Of A Shadow

If we realized the rest from that remaining instance, it’s that shadows are visually appealing: they may be able to bend, fade, intersect, and transition. However what a couple of shadow casting any other shadow? Are we able to create a shadow of a component’s shadow?

This isn’t the similar as stacking layers of shadows as we did previous. Relatively, we will be able to be creating a silhouette of a shadow. And since now we have a 2d means so as to add shadows to parts with the CSS drop-shadow() filter out, we will do just that.

A drop-shadow() is somewhat other 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 will mix those to make appealing results, like a Venn diagram form.

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

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

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

This easy aggregate of field and drop shadows may end up in appealing designs, like shadows that forged shadows. Let’s get started with some HTML that incorporates the similar .merchandise component we used within the remaining segment. This time, we’ll position two kid parts within it, any other div and an img:

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

<!-- extra pieces -->

The .merchandise is simply serving as a container this time. The true paintings occurs at the .background kid component. The picture is only there for adornment. We’re going to set a box-shadow at the .background component, then upload a stack of 3 drop-shadow() layers to it:

/* 3rd circle within the following demo */
.merchandise > .background {
    box-shadow: 0 0 40px rgb(255 0 0 / .5);
    filter out:
      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 will additionally use transitions with those results (as within the center circle beneath).

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

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

The Textual Shadow

The remaining impact we’re going to take a look at comes to the CSS text-shadow belongings. It’s if truth be told much less of an advanced “trick” than this is a demonstration of the use of and appearing simply the shadow of a textual content component for colour functions.

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

/* 2d column within the beneath demo */
p {
  colour: clear;
  text-shadow: 1px 1px 0 black;
}

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

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

Understand the emoji? As a substitute of the full-color deal, we in most cases get, this emoji is extra like an icon stuffed with a cast colour. That is one strategy to make a snappy and grimy icon machine with out drawing them or running with recordsdata.

We can have additionally pulled this off with background-clip: textual content to clip across the form of the emoji or practice a drop-shadow(). On the other hand, that is affecting the background, restricting the place it may be used. Plus, I love the theory of the use of text-shadow with textual content parts since that’s what it’s used for, and emoji are a part of the textual content.

Chances are you’ll suppose 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 way of Geoff Graham.

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

No giant deal. If you wish to have to toughen underlines, we will achieve for the CSS text-decoration and text-underline-offset homes:

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

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

See the Pen Shadow-Simplest Hyperlink With Underline [forked] by way of Geoff Graham.

Conclusion

That’s a take a look at 3 appealing methods to make use of CSS shadows as greater than that factor you utilize so as to add intensity. We checked out a technique that makes use of inset shadows to cover the contents of a component’s background for a neat hover impact. Then there used to be the theory of mixing box-shadow and drop-shadow() to forged a shadow of any other shadow. We capped issues off with a snappy strategy to manipulate textual content and emoji with text-shadow.

I’m hoping those experiments provide the inspiration to do a little CSS shadow experiments of your individual. Shadows and gradients are possibly the 2 maximum essential CSS options for “drawing” with CSS, like most of the examples you’ll see on Lynn Fisher’s A Unmarried Div undertaking. Shadows have implausible browser toughen, so the choices are ample so far as what we will do with them.

Additional Studying On SmashingMag

Smashing Editorial
(gg, yk)
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Back To Top
0
Would love your thoughts, please comment.x
()
x