miles wrote:
I like to use Inkscape(SVG) to mock up my output pages (beats the
drawing on paper thing and Firefox & Safari users can display it in
the browser for full effect). I've drawn some nice looking gradient
boxes (with rounded corners). Now I have to add it to my program so
I'm assuming I'll add it to the css.
What is the best way to duplicate a gradient rounded box in css ? a)
fill the entire div with a png image with no-repeat ? b) slice the
image and go the 4 corners route with transparent pngs ?
the entire image seems the easiest but I'm wondering about performance
of downloading large images especially when there are several / page.
any suggestions ?
Ruzee borders use javascript, but the code ends up being lighter and
alot easier to manage than what you can currently do with CSS, IMHO.
Bear in mind I am a total CSS junkie and generally avoid javascript. I
would not use ruzee with drop shadows though as I've not had much luck
there.
For CSS + images only, you can make a wide background (make it wider
than you anticipate the box ever being - small file sizes are still
achievable if your gradient is verticle) that has a rounded corner on
the right side, background-position: right; background-repeat:
no-repeat. Use that as a background in a div. Then add your left-side
rounding using a positioned image inside the div. You'll need to do the
same thing for a "footer" on the box.
Hoping it helps,
Velda
_______________________________________________
UPHPU mailing list
[email protected]
http://uphpu.org/mailman/listinfo/uphpu
IRC: #uphpu on irc.freenode.net
