Sent by Rich M on 6 June 2011 18:06
On 06/05/2011 02:07 PM, Colin (Sandy) Pittendrigh wrote:
> http://montana-riverboats.com/Uploads/isitpossible.jpg shows a small crop
> from a large layered psd file I got from a designer.
>
> 1)
> The image above shows the top-left corner of the proposed page's main
> content display division, which shows a semi-internal border that looks
> like a fuzzy drop-shadow with rounded corners. In a fixed-width layout I
> could imagine making a background image that was
> the size of the entire division, and then using that as the division's url
> background.
>
> But as a liquid layout, where all the top-level divisions are sized as a
> percentage of the available view port, I don't see how that
> (the above fuzzy drop shadow internal bordering) would be possible. It it
> possible to make a fuzzy border like this in a liquid layout context?
> How?
That essentially relates to the box-shadow CSS3 property. You might want
to look into the pitfalls and caveats of using that property, along with
the fact that it will not be greatly supported in older browsers, and
most of IE (I believe only starting in IE9 does it work).
Furthermore, you'd need to use the vendor specific properties for webkit
and mozilla browsers.
http://www.css3.info/preview/box-shadow/
generic --
box-shadow: {x offset} {y offset} {blur radius} {color}
-webkit-box-shadow: 0 0 3px #000;
-moz-box-shadow: 0 0 3px #000;
box-shadow: 0 0 3px #000;
In summary, it's possible to emulate that effect and this should scale
with a fluid layout. The downside is it will not be as widely
browser-compatible as using an image would be.
> 2)
> Is it true that liquid layouts are the most portable device-wise? From large
> high-res monitors to pads to smart phones?
> Corollary: is it true that fixed-width layouts (perhaps a centered 780 pixel
> wide wrapper division) are the least portable across
> various devices?
Generally speaking, sure. Although you could just have separate styles
completely depending on the screen resolution of the device using @media
queries. Someone not too long ago posted a link in a thread here to this
A List Apart article that I found very entertaining and enlighening:
http://www.alistapart.com/articles/responsive-web-design/
> ...thank you
>
>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
