[Pro] Fancy html box border

I have spent hours looking for something I don’t really know what to call or if exists.

Attempted description: I drew a html box then flattened and extended it to the page width so it looks like a double line. I would like to have an electric blue spark/star take off from a designated mid-ish point (under Logo) and ‘travel’ around the border and back to the start midpoint. Ideal would be two sparks in opposite directions.

If this html box were not flattened, this star/spark (or two in opposite directions) would run the boarder and stop at the start point. The desired effect is a symbolic pulse or surge of electricity out to the end of the line and back, or in and back out.

Obviously, I am not a programer or engineer, so I have no idea what I am asking for, but with all the snow, lighting, rollovers, and other such effects I searched through, I have hope this is a relative simple bit of code.

Please take a look at the header/Logo on this (only) page posted here and perhaps this will make better sense.

http://www.class-e-ads.com

Do I have to make a animation gif (would have to learn that also). Please feel free with any and all comments.

Thanks in advance.
Frank


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

Border Images are something that’s at the very bleeding edge of CSS3,
and I doubt much besides nightly versions of WebKit would support it.
If you want such a line around a box, you’re probably going to have to
use a combination of static images as the top and bottom and a tiling
image running the height of the box (which means fixed-width for the
box, you didn’t say if that was an issue for you).

So if you make your sides as a wide stripe, wide enough to hold both
left and right sides of the box, and just tall enough to repeat in
your star pattern (so as tall as the space between stars plus one
star’s height) then you will get your look very easily. Apply that as
a background to the box, and you’ll have the stars down the left and
right. Then make a foreground image for the top and another for the
bottom, and style them to appear at the very top of the box and the
very bottom of the box. Because they are foreground (placed) images,
they will always cover over the background image, so you would give
them a solid background color, and the illusion would be complete.

If you’re visiting this mailing list on the Web forum view, look at
the main middle box in any page – that’s styled precisely this way.
There’s an image that tiles down the sides, and another that goes
across the top and bottom, and between them, you see a curved-edge
soft shadow border. (If I were doing this site over again today, I
would probably use the CSS3 attributes of border-radius and box-shadow
instead – so much less code!)

Hope this helps,

Walter

On May 22, 2011, at 1:40 AM, Frank H wrote:

I have spent hours looking for something I don’t really know what to
call or if exists.

Attempted description: I drew a html box then flattened and extended
it to the page width so it looks like a double line. I would like
to have an electric blue spark/star take off from a designated mid-
ish point (under Logo) and ‘travel’ around the border and back to
the start midpoint. Ideal would be two sparks in opposite directions.

If this html box were not flattened, this star/spark (or two in
opposite directions) would run the boarder and stop at the start
point. The desired effect is a symbolic pulse or surge of
electricity out to the end of the line and back, or in and back out.

Obviously, I am not a programer or engineer, so I have no idea what
I am asking for, but with all the snow, lighting, rollovers, and
other such effects I searched through, I have hope this is a
relative simple bit of code.

Please take a look at the header/Logo on this (only) page posted
here and perhaps this will make better sense.

http://www.class-e-ads.com

Do I have to make a animation gif (would have to learn that also).
Please feel free with any and all comments.

Thanks in advance.
Frank


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 Walter, that is a lot of food for thought. I am viewing this on the web forum and see what your suggesting. Again, Thanks.
Frank


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

Oh thats what all this WebKit stuff is about…

: )
Frank


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