Background Shadow

Has using the Fill Master action been attempted for the gradient? That might be the answer here. I would still use a single background for the shadows, but then use the Fill Master action on a graphic object for the gradient.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The gradient is tiling horizontally all the way across the body of the
page. The shadow is applied to the PageDiv, tiling vertically.

So the issue is of getting a horizontal tile image and a vertical tile
image to play well with one another. On a page that is comprised of
part table layout and part positioned div, getting the PageDiv to be
anything besides collapsed to no height is the major challenge.

Walter

On Mar 18, 2009, at 3:31 PM, chuckamuck wrote:

Has using the Fill Master action been attempted for the gradient?
That might be the answer here. I would still use a single background
for the shadows, but then use the Fill Master action on a graphic
object for the gradient.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ah. Ok then, I would suggest instead of tiling the background make a single shadows graphic longer than will ever be seen. Center of shadows file does not have to have any color so it should be a relatively small gif file.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The problem is the same whether it tiles or not. If the element the
background is attached to collapses to zero height, the background
image is clipped by its parent and you don’t see it at all.

The only way to do this page without a lot of gymnastics in Freeway is
to make a motherhuge gradient + side-shadows image, set it to position
bottom center, and hope that Apple don’t release a Jumbotron-sized
monitor any time soon.

Walter

On Mar 18, 2009, at 4:03 PM, chuckamuck wrote:

Ah. Ok then, I would suggest instead of tiling the background make a
single shadows graphic longer than will ever be seen. Center of
shadows file does not have to have any color so it should be a
relatively small gif file.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter, my FW document was just sent to you offlist by email.

No doubt that jumotron LCD will come on the scene over the next few years. And while I am not enthusiastic about gymnastics in Freeway with my bad back, I do want to find a way to make this work.

Of course, if SoftPress has a convenient page-gradient solution for the Visual Designer, Walter and I are all ears. Indeed, let greatness shine forth from Oxford!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you for your reply offlist, Walter. I sincerely appreciate the time you spent reworking my document.

I just previewed and I can see the page shadow in all its glory! What a wonderful sight. However, the buttons in my menu bar are no longer an equally pretty sight. The horizontal spacing between each CSS Menu button is shifted, as shown in my video here:

(Please ignore the multiple gray arrows issue in my video. This is something that I am still waiting for SoftPress to fix! I reported it 2 months ago, but it still appears even in FW5.3.2.)

Further thoughts?

Many thanks.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter,

After an almost 4 year hiatus, I’m back on the Page Shadow quest again. (Until now, I had just given up on it.) Have there been any advancements in the last few years that make this a reality? What about a CSS3 shadow applied to the page?

Again, my intent is to get an “easy” solution for my existing page design (that has a tiling gradient) which allows me to just add a shadow (both sides and bottom) to the very outside edge of the page itself. It would be nice if there was an Action whereby I could just add a shadow to my page without any significant effort other than adding the Action to the page.

Thanks,

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi James,

Can you not just add a 'wrap" around your entire page and then apply the CSS3 Shadows action to it? This is what I have done in the past?

Seb


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What specifically is the “wrap” you are referring to, Seb?

James


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You might try adding a style like this to your page, just to see if it makes any difference:

#PageDiv { box-shadow: 0 2px 12px #666; overflow:hidden }

Put that in a <style type="text/css"> tag, using the Page / HTML Markup / Before /HEAD editor. See what it looks like in your browser. Box-Shadow is pretty widely available across browsers, at least IE8 uses it, nothing newer, though.

The issue you may run into with this sort of thing is that if you haven’t built your page in a fully-inline manner, the PageDiv may be 0px tall. The overflow:hidden bit there is a trick, trying to get the box to have some layout and thus attempt to “clear” its children. But since drawn (positioned) elements in Freeway are absolutely positioned, not relatively positioned, they don’t reserve any space for themselves – they live on their own private z-index plane, with nothing touching them in any direction. So it’s possible – even likely – that this style trick will have no effect except to add a gray fuzz along the top inside of the browser window.

Walter

On Dec 18, 2012, at 2:06 AM, JDW wrote:

Walter,

After an almost 4 year hiatus, I’m back on the Page Shadow quest again. (Until now, I had just given up on it.) Have there been any advancements in the last few years that make this a reality? What about a CSS3 shadow applied to the page?

Again, my intent is to get an “easy” solution for my existing page design (that has a tiling gradient) which allows me to just add a shadow (both sides and bottom) to the very outside edge of the page itself. It would be nice if there was an Action whereby I could just add a shadow to my page without any significant effort other than adding the Action to the page.

Thanks,

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Oh my! Thank you, Walter. Your suggested style works perfectly! I’ve not tested it on all the pages in my site, nor have I don’t a comprehensive browser test, but it appears to be the solution I’ve long sought after.

Many thanks.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’d test this thoroughly. Depending how you’ve constructed your pages, you might find some of them get cut short when using overflow:hidden on the PageDiv. It will probably only work on pages that have been constructed using inflow (box model) layouts or using the RPL Action.

Joe

On 19 Dec 2012, at 00:24, JDW email@hidden wrote:

Oh my! Thank you, Walter. Your suggested style works perfectly! I’ve not tested it on all the pages in my site, nor have I don’t a comprehensive browser test, but it appears to be the solution I’ve long sought after.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for the tip, Joe. I’ll be sure to note how it looks on “all” my pages. But on the two pages in my site that I’ve tested so far (which are very similar in construction to other pages in the site), it works fine. I am talking about pages that do NOT use inflow or RPL.

If I find trouble down the line, I will report it here.

Best,

James W.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Joe & Walter,

First problem found. I just made a screen video with voiceover for you:

As I ask in that video, how can I make exceptions to the rule?

Thanks,

James W.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi James,
Try changing Walter’s original style to;

#PageDiv { box-shadow: 0 2px 12px #666; overflow:visible }

The only other way I can think of fixing this requires the ScriptLightbox Action to place the player window outside of the bounds of the PageDiv which, in turn, makes placing the item that much more involved.
Regards,
Tim.

On 20 Dec 2012, at 02:53, JDW wrote:

As I ask in that video, how can I make exceptions to the rule?


Experienced Freeway designer for hire - http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You might try dropping the overflow altogether, just put the shadow on and see what you see. Delete everything after the first semicolon and before the closing curly-brace.

Walter

On Dec 20, 2012, at 6:26 AM, Tim Plumb wrote:

Hi James,
Try changing Walter’s original style to;

#PageDiv { box-shadow: 0 2px 12px #666; overflow:visible }

The only other way I can think of fixing this requires the ScriptLightbox Action to place the player window outside of the bounds of the PageDiv which, in turn, makes placing the item that much more involved.
Regards,
Tim.

On 20 Dec 2012, at 02:53, JDW wrote:

As I ask in that video, how can I make exceptions to the rule?


Experienced Freeway designer for hire - http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you, Tim. Changing overflow to “visible” solves the problem.

Thanks also, Walter. Deleting overflow entirely also solves the problem!

Merry Christmas!

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter and Tim, I have one question for you. To streamline our discussion and give you crystal clarity on what I am trying to accomplish with CSS3 page shadow on my site, I’ve made a video with voiceover here (give it some time to download):

I look forward to hearing your thoughts and advice.

Thank you!

James W.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

James, I do not have a very fast connection to the net, as we have discussed. Any time that you can make a JPEG replace a movie, or a paragraph of text replace a JPEG, I am much more willing to click the link. As it stands, I can’t really afford the time to watch a movie.

Walter

On Dec 21, 2012, at 5:26 AM, JDW wrote:

Walter and Tim, I have one question for you. To streamline our discussion and give you crystal clarity on what I am trying to accomplish with CSS3 page shadow on my site, I’ve made a video with voiceover here (give it some time to download):

Error 404: Not Found

I look forward to hearing your thoughts and advice.

Thank you!

James W.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

For those who haven’t seen James’ video he is looking to create a shadow on a page that is 29 pixels below the height of the original item but doesn’t extend 29 pixels below it at the bottom.

Hi James,
I was looking at this earlier and what you are attempting to do isn’t something that is directly possible using CSS box shadows. Unlike other CSS properties box shadows only have the single value meaning that you can’t (as yet) define the shadow for each side of the box independently.

I’ve two very simple example pages for you.

The first uses three values on a single box shadow style to try and emulate the effect you are after;
http://www.freewayactions.com/test/variable-box-shadows/box-shadow-3-styles.html
It doesn’t really work as the shadows at the bottom don’t meet.

The second example is much better but uses an extra item that wraps around the PageDiv to hold the shadow as well as some JavaScript to calculate and set the shadow height;
http://www.freewayactions.com/test/variable-box-shadows/box-shadow-with-javascript.html

If this was me I might be inclined to look at wrapping the page content in a flexible table with the shadows set as PNGs. It isn’t very elegant but it will work in most browsers and with the addition of a PNG fix even older version s of IE too.
Regards,
Tim.

On 21 Dec 2012, at 10:26, JDW wrote:

Walter and Tim, I have one question for you. To streamline our discussion and give you crystal clarity on what I am trying to accomplish with CSS3 page shadow on my site, I’ve made a video with voiceover here (give it some time to download):

Error 404: Not Found

I look forward to hearing your thoughts and advice.


Experienced Freeway designer for hire - http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options