Drop-Shadow DOM

Today I was reading an article about the Shadow DOM and it got me thinking about whether anyone has looked at the DropShadow DOM.

I hope there’s a few others (Dad joke fans mostly) that get a chuckle as well.

See the Pen Drop Shadow DOM by Justin Avery (@justincavery) on CodePen.

Building the Drop Shadow DOM

Kidding aside, it’s these tiny little silly thoughts that I have which have taught me about building things on the web over the years.

For idea I wanted to:

1. Position the word DOM in the middle of the page
2. Make it more accessible/semantic so users understood what DOM meant
3. Add a drop shadow against the title

Positioning the word in the middle of the page

There’s probably loads of ways in which this could be achieved. At first I added display: flex; to the h1 element that was the word DOM and I used justify-content: center; to center the element on the page. I could have also used text-align:center; as well, but that wouldn’t help with centering the element vertically.

At this point I hadn’t given the page any more height than the element itself, but I didn’t think about that until after I moved the display: flex; onto the body element (my line of thinking was that I couldn’t center the element vertically by applying a change to the element, but rather I needed to apply the rule to the containing parent).

After I applied display: flex; to the body I realised that the page was only as tall as the height of the h1 element, so I added height: 98vh; to the body element to make the page 98 percent of the Viewport Height. Anyway, the code I ended up with was this:

body {
  height: 98vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

First job, tick.

Make the Drop Shadow DOM more semantic

We talk about the DOM a lot but I’ve been guilty of not knowing what it stood for, so I wrapped it in a <abbr> tag.

When you apply a <abbr> tag you’re saying that the term is an abbreviation, and you can then use the title attribute to fully describe what that term is. When you add this the browsers semantics kicks in as does the default browser CSS styling and you get a text dotted underline effect. Do. Not. Want. Or at least I didn’t want it for this.

I tried adding abbr {text-decoration: none;} but it didn’t have any impact. I was sure that was the problem so I referred to the dev tools before I realised the CSS rule is applied to the abbr[title] attribute rather than the abbr element itself. I guess that provides the visual indication that hovering over the element will display something, anyone?

With that knowledge, I added the style updates to remove the default styles

HTML

<h1><abbr title="Document Object Model">DOM</abbr></h1>

CSS

abbr[title] {
text-decoration:none;
}

Apply a dropshadow to the text

The first thing I did (I’m so bad at this) was apply box-shadow: 5px 5px 15px; to the h1 and the plan was to then make the adjustments to the shadow via the dev tools.

Anyone see a problem with this?

Yeah, I didn’t really think it through.

box-shadow applies the shadow to the elements box, where as I wanted to apply the effect to the text itself.

So if box-shadow applies a drop shadow to the box then, yep — you guessed it, text-shadow applies the drop shadow to the text.

h1 {text-shadow: 6px 4px 16px #000;}

Is it right?

Probably not. But there’s a lot of ways to implement anything on the web. If you have a little project, even if it takes you 5 minutes to do, put it out there and share how you did it so that people can learn from your mistakes, and hopefully the community will constructively point out your mistakes and help you grow too.