Comments on: Facebook Style Overlay in YUI 3 & CSS 3

By: Joacim Boive

Joacim Boive — Wed, 01 Jul 2009 08:58:01 +0000

@Eric – Great! Thanks!

Eric Ferraiuolo — Tue, 30 Jun 2009 17:22:48 +0000

@Richard Glad this helps you. Good find on working with YUI 3.x Panel; makes sense since the Standard Module structure (hd, bd, ft) is the same.

Richard — Tue, 30 Jun 2009 16:22:17 +0000

Brilliant, thanks for this. Was literally about to try this myself this week!

Works in YUI 2.x panels as well if you remove the “yui-widget-” from the CSS and set underlay to “none”

Eric Ferraiuolo — Tue, 30 Jun 2009 15:54:23 +0000

@Joacim Feel free to create a 1x1 alpha-transparent PNG that's black @ 50% opacity; then you could do this in CSS:

.yui-widget #fbOverlay {
	background: url(path/to/bg-image.png);
	background: rgba(0, 0, 0, 0.5);
}

Since IE doesn't know about rgba it will ignore it, letting the background image shine through.

Joacim Boive — Tue, 30 Jun 2009 08:41:16 +0000

Cool!

But it would’ve been nice with an example where the borders worked in at least IE7 or IE8 as well. (I know CSS3 isn’t supported, but still).

Thanks!

Eric Ferraiuolo — Fri, 26 Jun 2009 06:22:59 +0000

Wrote my thoughts on YUI 3 Widget skinning on the YUI Library Forum.

Eric Ferraiuolo — Thu, 25 Jun 2009 05:05:44 +0000

@Luke if YUI 3 starts to have more of a story around custom skinning I will ;-)

devin — Thu, 25 Jun 2009 05:01:38 +0000

Huh. Interesting! ++ to you good sir.

Luke — Thu, 25 Jun 2009 04:49:25 +0000

You should bundle it into a module and post it to GitHub :)