"etched" lines?

I would like to separate my menu items with a “sunken” or etched line. Sort of a custom embossed effect. I want to carve up a single gray box vs align a bunch of embossed gray blocks tightly together.

Here’s a vertical line example in the top menu. I’m looking to create the horizontal equivelent:

http://www.envelopments.com/

I tried drawing a graphic line and trying various border/shadow options but can’t seem to make it happen.

I can’t be the first person to employ this effect. Any pointers?

-g


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

In an HTML box use Insert>Rule between your text items

Have a look at http://www.deltadzine.net/headerpage.html for a quick example

David


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

thx for the example.

Question - how do you get the rule to be more "3d"like? Any tricks to make the rule appear “deeper” like an etching?

thx

-geoff


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

Do you mean like the dividers at the bottom of this page? http://
ineedwebhosting.co.uk/

These are simply graphic items (x2 1px high graphic boxes one on top
of another) select both together and exported out of Freeway as a gif
and then bought back into Freeway into another graphic box and pasted
between each line.

Ideally they should be styled to appear as a background image on a
div or list, as they not part of the page content only styling, but
that’s coming on the next iteration.

David

David Owen :: Freeway Friendly Web Hosting and Domains :: http://
www.ineedwebhosting.co.uk

On 29 Nov 2009, at 12:21 am, geoffb wrote:

I would like to separate my menu items with a “sunken” or etched
line. Sort of a custom embossed effect. I want to carve up a single
gray box vs align a bunch of embossed gray blocks tightly together.

Here’s a vertical line example in the top menu. I’m looking to
create the horizontal equivelent:

http://www.envelopments.com/

I tried drawing a graphic line and trying various border/shadow
options but can’t seem to make it happen.

I can’t be the first person to employ this effect. Any pointers?

-g


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

On 29 Nov 2009, at 10:38, David Owen wrote:

Ideally they should be styled to appear as a background image on a div or list, as they not part of the page content only styling, but that’s coming on the next iteration.

Here’s an interesting thing I saw regarding this on another list. I’m not sure how you’d go about this in Freeway, but I guess if you named the container you could make a new style to target it, like #container hr or something?

alt text

best wishes,

Paul Bradforth

Buy my eBooks at:
http://www.paulbradforth.com/books/


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

Sometime around 29/11/09 (at 12:21 +0000) Paul Bradforth said:

I guess if you named the container you could make a new style to
target it, like #container hr or something?

Yep, that sort of thing can work very well, although it wouldn’t show
in the design view.

k


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

Yes that right your can style the hr tag instead if you look at this
post.

http://www.sovavsiti.cz/css/hr.html

David Owen :: Freeway Friendly Web Hosting and Domains :: http://
www.ineedwebhosting.co.uk

On 29 Nov 2009, at 12:21 pm, Paul Bradforth wrote:

On 29 Nov 2009, at 10:38, David Owen wrote:

Ideally they should be styled to appear as a background image on a
div or list, as they not part of the page content only styling,
but that’s coming on the next iteration.

Here’s an interesting thing I saw regarding this on another list.
I’m not sure how you’d go about this in Freeway, but I guess if you
named the container you could make a new style to target it, like
#container hr or something?

alt text

best wishes,

Paul Bradforth

Buy my eBooks at:
http://www.paulbradforth.com/books/


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

In Freeway if you take your div name and create a new style in the
styles palette.

 #box hr { height: 5px; background-image:url("../Resources/ 

bar.gif"); border: none }

Create a new style and in the TAG box put… #box hr

Delete the name form the Name box and “tab” out of it so it it blank.

In the Character section add your background image.

Click the Extended button and add two styles:

 height : 5px

(or to change the height of your graphic)

and

border : none

This is to stop the default rule from being rendered.

David

On 29 Nov 2009, at 12:21 pm, Paul Bradforth wrote:

I guess if you named the container you could make a new style to
target it, like #container hr or something?


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

Keith,

Let’s hope SoftPress finds a way of perhaps displaying CSS in the
design view, or at least a better integration of CSS in the next
version of Freeway. I’m sure there are many designers aching for
this. I know I am :slight_smile:

David

On 29 Nov 2009, at 12:45 pm, Keith Martin wrote:

Yep, that sort of thing can work very well, although it wouldn’t
show in the design view.


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

On 29 Nov 2009, 9:38 am, David Owen wrote:

Do you mean like the dividers at the bottom of this page? http://
ineedwebhosting.co.uk/

These are simply graphic items (x2 1px high graphic boxes one on top
of another) select both together and exported out of Freeway as a gif
and then bought back into Freeway into another graphic box and pasted
between each line.

Ideally they should be styled to appear as a background image on a
div or list, as they not part of the page content only styling, but
that’s coming on the next iteration.

David

David Owen :: Freeway Friendly Web Hosting and Domains :: http://
www.ineedwebhosting.co.uk
Thanks - yes, just like that. I was thinking that there was a “canned” effect in Fwy somewhere that I was just missing. I guess not. Would be nice though.

Easy enough for me to patch together a couple of gray and white lines and import…

thanks,

-g


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

Thanks to all who replied.

Aside from all the “visible CSS” stuff, I’d like to add my feature request for a simple additional option in the effects panel next to all the shadow effects - maybe called “etched” or something like that.

-g


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

Hi Geoff,
Here’s an example Freeway 5 Pro file that demonstrates how you can
replicate the menu in your example using the CSS Menus action that
ships with Freeway.
http://www.freewayactions.com/test/css-menu-example/

The trick is to use the ‘Item Dividers’ section to specify borders
both to the left and the right of the menu items that differ slightly
from the background colour. In this case one is slightly darker than
the background and the other is slightly lighter. The overall effect
makes the lines look chiseled.
Regards,
Tim.

On 29 Nov 2009, at 18:32, geoffb wrote:

Thanks to all who replied.

Aside from all the “visible CSS” stuff, I’d like to add my feature
request for a simple additional option in the effects panel next to
all the shadow effects - maybe called “etched” or something like that.

FreewayActions.com - Freeware and shareware actions for Freeway
Express & Pro.

Protect your mailto links from being harvested by spambots with Anti
Spam.
Only available at FreewayActions.com

http://www.freewayactions.com


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