[Pro] Trouble Achieving a 'Simple' Graphic Effect

I’ve spent the better part of this afternoon futsing with FW and still am no closer to solving my problem.

Here’s the effect I’m looking for:

I’d like to create a white frame set on a white page background (assume a frame width of 20px). Apply to that frame a black “inner shadow” which makes it appear that the center is cut out of the page.

I then want to apply ScriptyAccordion to the items which ‘should’ appear under the frame with a horizontal action so that only a portion of the underlying elements appears as it slides back and forth.

I have two problems:
[1] I can achieve a nice looking frame in several file formats (png, jpg, HTML), but it appears that the background must be white in order to show the “inner shadow” affect. This, of course, blocks the viewing of the material that is on a layer below it.

[2] Problem 1 aside, I’ve determined that I can hide the width of the underlying material with large white overlays (on the same layer level as the frame). Is there a simpler way of doing this?

My “way to cumbersome” solution is to create each side of the frame from four different graphic squares and apply the appropriate inner shadow to each piece, then add more graphics to block the shadow that bleeds out on each frame piece.

I was hoping that there was a “knock out” option much like graphic text.

Any suggestions would be greatly appreciated.


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

HI Robert,

It’s an interesting problem. Although I can’t promise an answer I’d like to have a look at finding a solution.

Are you able to point to a url that shows a graphical example of what you’re trying to achieve?

Thanks,

Sly.


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

Why not just create the ‘Frame’ element and export it from FW (or PS) as a png and then reimport it with a transparent centre.

Not 100% sure if I know what you are trying to achieve.

D


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

Dave, I thought of that as well, but I’m not getting the inner shadow over the other information working (I’m sure I have something set wrong).

Sly (et al), I popped an example of what I’m attempting in the form of a movie grab at <sideways.griphus.com> (though I’ll be doing it with a white-on-white theme).

Thanks,
Robert


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

Are you wishing the HTML items behind to be clickable/selectable in a Browser - if so I don’t think that this is doable using graphics.

D


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

On 13 May 2011, 12:01 am, DeltaDave wrote:

Are you wishing the HTML items behind to be clickable/selectable in a Browser - if so I don’t think that this is doable using graphics.

D

That was the general idea. This example was done in Director.

Robert


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

Well…you could achieve something similar to this using a CSS “sliding windows” technique. Using separate nested divs for top, bottom left and right sides of your frame with a background image of the frame and and its shadow, and a center div with your content. A bit of laboriously styling here, but doable.

Doing it this way also gets you flexible size frame.


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

On 13 May 2011, 12:21 am, chuckamuck wrote:

Well…you could achieve something similar to this using a CSS “sliding windows” technique. Using separate nested divs for top, bottom left and right sides of your frame with a background image of the frame and and its shadow, and a center div with your content. A bit of laboriously styling here, but doable.

http://www.alistapart.com/articles/slidingdoors/

Doing it this way also gets you flexible size frame.

Only skimmed the article, but that is the right direction. Keeping the frame size flexible is also a huge plus.

I just hope that most of the coding is either straightforward or handled by Freeway.

Thanks,
Robert


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

If you draw an HTML box on the page, apply the Inner Shadow graphic effect to that, then double-click inside it and insert another HTML box inline within it to use as your Accordion container, you should get both the things you want.

The HTML box with the inner shadow will give you your white-on-white page effect, and the Accordion will do its normal thing.

Walter


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

chuckamuck,

I’ve read through the ‘slidingdoors’ article and think I grasp the concept (operative word is ‘think’). Trouble is, I can’t get it to work in Freeway.

I can get left & right HTML items inside a parent HTML item, but then I’m lost. I’ve applied CSS Menus to the right HTML box. I’ve tried different floats and clears but I don’t seem to have the width limiters or something set correctly.

Any further examples or help would be appreciated.

Robert

On 13 May 2011, 12:21 am, chuckamuck wrote:

Well…you could achieve something similar to this using a CSS “sliding windows” technique. Using separate nested divs for top, bottom left and right sides of your frame with a background image of the frame and and its shadow, and a center div with your content. A bit of laboriously styling here, but doable.

http://www.alistapart.com/articles/slidingdoors/

Doing it this way also gets you flexible size frame.


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

Walter,

Your suggestion works great for regular accordion actions that all take place - within - the inner shadowed HTML box.

The effect I was attempting to achieve was to layer the ‘cutout’ over the displayed material that was larger than the cutout (revealing only parts of it at a time). Your solution leaves two problems unresolved:

First, the inner shadow isn’t dropped on the underlying object(s). Second, it doesn’t address the sideways sliding issue.

Robert

On 13 May 2011, 2:06 am, waltd wrote:

If you draw an HTML box on the page, apply the Inner Shadow graphic effect to that, then double-click inside it and insert another HTML box inline within it to use as your Accordion container, you should get both the things you want.

The HTML box with the inner shadow will give you your white-on-white page effect, and the Accordion will do its normal thing.

Walter


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

If you try to place anything over the top of the accordion, then the
accordion effect (which relies on clicks or mouseover events to be
registered by the individual headers) will stop working. It’s like
putting a sheet of glass over the top of your keyboard and then trying
to type. You’ll have to see if you can get this to work by splitting
up the image as you have done, so that it only exists on the sides of
the accordion, but not in the middle. Either that, or try setting
Overflow:Hidden on your Accordion HTML box. I can’t imagine that would
be a perfect solution, but it might give you what you’re looking for
here.

Walter

On May 13, 2011, at 12:08 PM, Robert wrote:

Walter,

Your suggestion works great for regular accordion actions that all
take place - within - the inner shadowed HTML box.

The effect I was attempting to achieve was to layer the ‘cutout’
over the displayed material that was larger than the cutout
(revealing only parts of it at a time). Your solution leaves two
problems unresolved:

First, the inner shadow isn’t dropped on the underlying object(s).
Second, it doesn’t address the sideways sliding issue.

Robert

On 13 May 2011, 2:06 am, waltd wrote:

If you draw an HTML box on the page, apply the Inner Shadow graphic
effect to that, then double-click inside it and insert another HTML
box inline within it to use as your Accordion container, you should
get both the things you want.

The HTML box with the inner shadow will give you your white-on-
white page effect, and the Accordion will do its normal thing.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk


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

Here is another link to another technique using CSS background images that is more appropriate to what you are trying: http://webdesignerwall.com/tutorials/css-decorative-gallery

And here is a sample file using it for you to dissect: http://www.chuckdesigns.com/downloads/SPAN_TEST.zip

Basically, the effect is achieved with two styles applied to an html div (photodiv) that I manually setup in the Styles Editor. Getting Freeway to recognize the span tag was a bit of a struggle…and I think may be bug in the editor. The main class style .photo is applied to the div and sets the main background image. The second style has a transparent gif of a frame created in Photoshop applied as a span. In order to apply the span I added a single space character in the div so that nothing is visible other than background images. The effect looks like a frame over a photo.

FYI - Using an empty span this way is considered a poor choice semantically so use it sparingly.


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

And here is a sample file using it for you to dissect:

Sorry, typo: http://www.chucksdesigns.com/downloads/SPAN_TEST.zip


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

here is a sample file using it for you to dissect:

Is your server down?

David


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

On 14 May 2011, 8:28 pm, DeltaDave wrote:

Is your server down?

Just my eyesight.


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

Got it now thanks

D


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

chuckamuck,

Very interesting - and definitely a step in the right direction. I now have to figure out how to tag and move the underlying background ‘image’ so that it slides from side to side revealing only those menu items I want to show.

On 14 May 2011, 8:20 pm, chuckamuck wrote:

Here is another link to another technique using CSS background images that is more appropriate to what you are trying: http://webdesignerwall.com/tutorials/css-decorative-gallery


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