In makeshift metal homes in a camp in Mogadishu, women wrapped in brightly patterned scarves are making savoury pastries and mixing flour for flatbreads.

Sedgwick, Marcus, author

Asher, Neal L., 1961-

Rotch Library - N6488.I8 V433 2019 U38

Hayden Library - PQ6663.U4795 C6613 2017

Dewey Library - HQ76.2.U5 O326 2019

Dewey Library - HN59.2.G35 2019

Dewey Library - HQ250.A5 P58 2020

Berardi, Franco

This morning I awakened with a question in my twitter stream from @deebeefunky. He was frustrated by the fact that when he sets a blur on box-shadow, it shows on two sides of the box. He wants it to show on only one side. Of course, that got me thinking. I did come up with [...]

Pilobolus artistic directors Matt Kent and Renee Jaworski explain how their dancers use shadow to create almost anything imaginable. Beholder image © Wizards 2018 You can watch new episodes of WIRED Masterminds on the free WIRED channel, available on Roku, Apple TV, Amazon Fire TV, and Android TV: https://www.wired.com/brandlab/2018/06/wired-smart-tv-app-new-way-watch-wired/

MEDIA PhonCD ML5.P76 v.101

Browsery Z286.S37 S48 2018

Hayden Library - QD22.M43 G67 2019

Hayden Library - BP166.14.M63 L58 2017

Dewey Library - PR5397.F73 R66 2019

Senior Researcher Elias Walsh looks into helping provide meaningful feedback to "invisible teachers" - those who leave the profession feeling as though they have made no progress with their students.

Gildea, Robert, author

Online Resource

Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances.

Demo: CSS drop-shadows without images

Known support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+

I’ll be looking mainly at a few details involved in making this effect more robust. Divya Manian covered the basic principle in her article Drop Shadows with CSS3 and Matt Hamm recently shared his Pure CSS3 box-shadow page curl effect.

After a bit of back-and-forth on Twitter with Simurai, and proposing a couple of additions to Divya’s and Matt’s demos using jsbin, I felt like documenting and explaining the parts that make up this technique.

The basic technique

There is no need for extra markup, the effect can be applied to a single element. A couple of pseudo-elements are generated from an element and then pushed behind it.

.drop-shadow {
  position: relative;
  width: 90%;
}

.drop-shadow:before,
.drop-shadow:after {
  content: "";
  position: absolute;
  z-index: -1;
}

The pseudo-elements need to be positioned and given explicit or implicit dimensions.

.drop-shadow:before,
.drop-shadow:after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 15px;
  left: 10px;
  width: 50%;
  height: 20%;
}

The next step is to add a CSS3 box-shadow and apply CSS3 transforms. Different types of drop-shadow can be produced by varying these values and the types of transforms applied.

.drop-shadow:before,
.drop-shadow:after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 15px;
  left: 10px;
  width: 50%;
  height: 20%;
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  transform: rotate(-3deg);
}

One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction. This is easily done by overriding only the properties that need to differ.

.drop-shadow:after{
  right: 10px;
  left: auto;
  transform: rotate(3deg);
 }

The final core code is as shown below. There is just one more addition – max-width – to prevent the drop-shadow from extending too far below very wide elements.

.drop-shadow {
  position: relative;
  width: 90%;
}

.drop-shadow:before,
.drop-shadow:after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 15px;
  left: 10px;
  width: 50%;
  height: 20%;
  max-width: 300px;
  box-shadow :0 15px 10px rgba(0, 0, 0, 0.7);
  transform: rotate(-3deg);
}

.drop-shadow:after{
  right: 10px;
  left: auto;
  transform: rotate(3deg);
}

No Firefox 3.0 problems this time

Some pseudo-element hacks require a work-around to avoid looking broken in Firefox 3.0 because that browser does not support the positioning of pseudo-elements. This usually involves implicitly setting their dimensions using offsets.

However, as Divya Manian pointed out to me, in this case we’re only using box-shadow – which Firefox 3.0 doesn’t support – and Firefox 3.0 will ignore the position:absolute declaration for the pseudo-elements. This leaves them with the default display:inline style. As a result, there is no problem explicitly setting the pseudo-element width and height because it won’t be applied to the pseudo-elements in Firefox 3.0.

Further enhancements

From this base there are plenty of ways to tweak the effect by applying skew to the pseudo-elements and modifying the styles of the element itself. A great example of this was shared by Simurai. By adding a border-radius to the element you can give the appearance of page curl.

.drop-shadow {
  border-radius: 0 0 120px 120px / 0 0 6px 6px;
}

I’ve put together a little demo page with a few of drop-shadow effects, including those that build on the work of Divya Manian and Matt Hamm.

If you’ve got your own improvements, please send them to me on Twitter.

Barker Library - QC173.55.K35 2019

Rotch Library - HT147.C26 E87 2018

Rotch Library - NA4670.G84 2017

Ghosh, Amitav, 1956- author

Moreno-Garcia, Silvia, author

Barker Library - PN6728.B36 S674 2017

Barker Library - PN6728.A482 R87 2018

Lewis Library - ML410.H4 K537 2018