Website Design Forum - Surrounding link with liquid graphic

Author

Surrounding link with liquid graphic

Eric Lindsay

2007-01-27, 11:33 pm

My neighbour the architect told me what he wanted something that looked
like :
http://www.troppoarchitects.com.au/

He really likes the hand drawn boxes around the links in that and other
pages. I am having a lot of trouble coming up with any way to surround a
link (or more accurately, the list item containing the link) with an
expandable graphic in a liquid design.

http://www.queenslandarchitect.com/ is all I have managed so far.

All I can think of so far is to do a graphics of two lines making up two
adjacent sides of a box. Make them longer than the text can ever expand
to. Put them in as a background image in the list.

But then I seem to need a container div to hold the other two sides of
the box.

Can anyone point me to an idea for doing this?

--
http://www.ericlindsay.com

dkva

2007-01-27, 11:33 pm

You could just make a graphic in photoshop with the stylized frame and
a background that matches the color of your site. You can reuse the
frame for all of your images you want to use it on and then save them
out individually. If you want it to work on any background, you could
also make it a transparent GIF or PNG (need to add code to make the PNG
work though: http://koivi.com/ie-png-transparency/ ). The images on the
site you referenced were "sliced" and the actual background color and
graphics are in the graphics making it appear that they were using
custom frames. We use the PNG route quite a bit and with the code
referenced in the link above (there are other ways to do it also) you
can use your border graphics on any BG color or graphic. The best part
about PNG-24 Alpha transparency is that you can have partial
tranparencies i.e. soft drop shadows, glares etc. and everything behind
it will shine through. Rounded edges also remain clean. Transparent
GIFs can get very choppy around the edges especially on rounded corner.

Hope this helps.

On Dec 29 2006, 2:00 am, Eric Lindsay <NOwebmasterS...@ericlindsay.com>
wrote:
> My neighbour the architect told me what he wanted something that looked
> like :http://www.troppoarchitects.com.au/
>
> He really likes the hand drawn boxes around the links in that and other
> pages. I am having a lot of trouble coming up with any way to surround a
> link (or more accurately, the list item containing the link) with an
> expandable graphic in a liquid design.
>
> http://www.queenslandarchitect.com/is all I have managed so far.
>
> All I can think of so far is to do a graphics of two lines making up two
> adjacent sides of a box. Make them longer than the text can ever expand
> to. Put them in as a background image in the list.
>
> But then I seem to need a container div to hold the other two sides of
> the box.
>
> Can anyone point me to an idea for doing this?
>
> --http://www.ericlindsay.com

sd@dobney.com

2007-01-27, 11:33 pm

Eric Lindsay wrote:

> My neighbour the architect told me what he wanted something that looked
> like :
> http://www.troppoarchitects.com.au/
>
> He really likes the hand drawn boxes around the links in that and other
> pages. I am having a lot of trouble coming up with any way to surround a
> link (or more accurately, the list item containing the link) with an
> expandable graphic in a liquid design.
>
> http://www.queenslandarchitect.com/ is all I have managed so far.
>
> All I can think of so far is to do a graphics of two lines making up two
> adjacent sides of a box. Make them longer than the text can ever expand
> to. Put them in as a background image in the list.
>
> But then I seem to need a container div to hold the other two sides of
> the box.
>
> Can anyone point me to an idea for doing this?

I think you're using something like

<li><a>Link</a></li>

Then if you have a large enough GIFs with transparency on them you can
use something like:

li { background: URL(botright.gif) bottom right no-repeat;}
a { background: URL(topleft.gif) top left no-repeat; width:100% }

and the backgrounds will sit one on top of the other and expand to the
text.

Saul
www.notanant.com
Communities of websites

Eric Lindsay

2007-01-27, 11:33 pm

In article <1169248822.097050.212790@a75g2000cwd.googlegroups.com>,
sd@dobney.com wrote:

> Eric Lindsay wrote:
>
>
> I think you're using something like
>
> <li><a>Link</a></li>

Yes. Just didn't think of giving the link itself a background graphic (I
don't normally use graphics in web pages).
>
> Then if you have a large enough GIFs with transparency on them you can
> use something like:
>
> li { background: URL(botright.gif) bottom right no-repeat;}
> a { background: URL(topleft.gif) top left no-repeat; width:100% }
>
> and the backgrounds will sit one on top of the other and expand to the
> text.

Many thanks for that. It sounds like it will do what I am hoping for. I
seem to recall something about some browsers not handling background
images on elements, but I guess I will find out when I test it. Thanks.

--
http://www.ericlindsay.com