Re: Implementation of Inset Box Shadow on image elements

On Tue, Jul 27, 2010 at 2:54 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
> On Jul 27, 2010, at 2:10 PM, Simon Fraser <smfr@me.com> wrote:
>
> z-index only applies to positioned elements, so the author will have to
> apply both position: and z-index: to pop children above the inset shadow.
> That's unfortunate. It also means that a z-index: 0 child that projects
> outside
> the shadowed box's bounds will get the shadow rendered over part of it,
> which is
> weird, unless you also require overflow:hidden here.
> Testcase at <http://smfr.org/misc/inset-shadow.html>.
> Also, a common use of inset shadows is as an alternative border around
> <div>s containing text. It seems wrong for the shadow to cause the text
> to "dim out" without further author tweaking
>
> Right. I really come down to, if you think of inner shadows as simulating an
> element shaped hole being cut out of the canvas (and whatever else is behind
> the canvas), then should the content be at the level of the canvas with the
> hole behind it, or should it be on that background surface behind the hole.
> I've always preferred the former, given that I want my text to be readable
> (consider white text against a darkish background with a black shadow, for
> example), and given that child element can extend outside the box, and with
> 'overflow: visible' the illusion that the element was behind the hole would
> not hold up.
> So perhaps for non-visible overflow the shadow could go in front of the
> children. That might be kind of cool, but still isn't what I really want for
> scrollable text boxes with inner shadows.

Or:

.img-with-shadow {
  content: opacity(attr(src,url),0);
  background: attr(src,url);
  box-shadow: 10px 10px 10px black inset;
}

(This assumes a not-yet-real filter function, opacity(), that takes an
image and an opacity value, and returns a transformed image.  You need
that rather than something simple like content:""; to keep the natural
size of the image.  If you're manually specifying the size through
@width/@height or width:/height:, then you can just use content:"";.
The discussed crossfade() function would also work in a pinch, by
specifying transparent as the destination image and a 100% fade.)

~TJ

Received on Tuesday, 27 July 2010 22:16:24 UTC