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.
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).
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.
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.
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.
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.
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.
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.
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.
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.