nexnexus — 2011-11-28T19:34:25-05:00 — #1
New to the site, but seems like there is a good community out there so here goes...
I appreciate any help, and will definitely be using this site as a resource in the future.
ralphm — 2011-11-28T20:26:59-05:00 — #2
Hi nexnexus. Welcome to SitePoint.
You can easily create rounded corners on an input field with CSS. Sitting this over/aligning with a background image can be a bit messy, though. Ideally, place the background image on the input field itself. Or, depending on the bg image, perhaps you are better off just styling the input field to look like the image and not use the image at all. Perhaps post the bg image you are working with, or an image of the overall look you are shooting for.
nexnexus — 2011-11-28T21:24:58-05:00 — #3
Here is a rough idea of what I am looking for
ralphm — 2011-11-28T22:03:42-05:00 — #4
O, I see. It may be possible to get the gray box to bend like that using advanced CSS3, but most browsers wouldn't support it anyhow. There are also very cumbersome CSS2 tricks to get something appraoching that, but it's not worth it, IMHO. As for the text, I don't think that's possible right now, unless perhaps you use something like HTML5 canvas ... which again is cutting edge and not widely supported.
I think it's images all the way, or rethink your design.
nexnexus — 2011-11-29T01:54:03-05:00 — #5
already been rethinking the design - thanks for the responses tho
is there any way to curve an entire division? I think I may use a standard box (with some minor tweaks) and an image outside the boxes to try and obtain the desired effect
ralphm — 2011-11-29T02:43:37-05:00 — #6
Not really, though you can make it appear so with CSS3—though it's not ready for prime time yet.
I think I may use a standard box (with some minor tweaks) and an image outside the boxes
I would suggest having the image as a background image inside the boxes. You can have boxes within boxes (with padding) if need be.