Rounded corners, shading, borders

Hello Experts,

How can I achieve the following effect.
sample.gif
LVL 1
bibmed2Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

i-CONICACommented:
you can use the CSS 3 property border-radius:10px but it's not supported by all browsers. (Guess which doesn't support it).

http://www.css3.info/a-border-radius-solution/
^ Some hacks have been put together to "support" it in IE...


0
LZ1Commented:
For something of this nature, if it really is that small and you only need one version on your site, I would strongly recommend an image as a background.
The css to create the image above is not, yet, full supported cross-browser.  You can use "hacks" but your code may not validate in the long run if there is extensive hacking to make it work.
An image would probably be the best way to go.
0
i-CONICACommented:
For the border, it's just border:2px solid #888; and for the gradient, use background: -moz-linear-gradient(-90deg, #F88, #800);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#F88), to(#800)); but again, not supported by any IE, use a 1px wide background image repeat-x for IE browsers to achieve the gradient.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

bibmed2Author Commented:
Thanks for responses.

- I can`t use one background image because the field is filled with text from database so I don`t know its height.

- I`m looking for solution compatible for all main browsers IE FF Opere...
0
Umar Topia.Net Full Stack DeveloperCommented:
You can try using JQuery rounded corner plugin
0
i-CONICACommented:
You can do a mixture of two methods, will be all browser compatible and will scale in hight, the gradient however, will expire at it's fixed height.

You'd use 3 images and do a "sliding doors" style thing where the top image is the header, the bottom is the footer, and after the gradient finishes, you'd repeat-y a single pixel high image to scale as tall as the div.

If you want to try this way, I'll post some more details.


0
LZ1Commented:
For IE and other browsers, you can use DD_roundies for the rounded corners
http://www.dillerdesign.com/experiment/DD_roundies/#nogo 
For the corss-browser gradients:
With Javascript: http://webtecker.com/2008/02/07/cross-browser-gradient-without-images/ 
Without:http://www.alistapart.com/articles/supereasyblendys/  
0
bibmed2Author Commented:
Thanks for all suggestions.

i-CONICA your method is quite interesting. Can You post some more details or example, please.

It`s important that there are gray borders on the left and right side and at the bottom.  
0
LZ1Commented:
Any updates?
0
Julian HansenCommented:
Images are the only way to get this to work across all browsers.

There are a number of ways to solve this - depends on whether the width is variable or not. If the width is static then do like this
/* where image 1 is the rounded corner title box */
<div style="background: url(image1.png) no-repeat center top">Nowe Ksiazki</div>
<div style="background: url(detail_bg.png) repeat-x;">
Results from DB
</div>
<div style="background: url(footer_img.png) no-repeat center top"></div>

The first div is for the top title box
The middle div is for the results where detail_bg.png is a 1px wide image that produces the colour gradient top to bottom
The bottom div gives the rounded corners for the footer.

If the width is not static then you need to do everything above but add two absolute posiitioned divs (left and right) that add the corners to the top and bottom divs.
<div class="top">
  <div class="top_left" style="position: absolute; left: 0; top: 0; background: url(tl.png)"></div>
  <div class="top_right" - same as above
</div>
Keep middle bit the same
<div class="footer"> do same as above with two divs to give rounded corners on the bottom positioned left and right absolutely.

Use of PNG's - you need the images to have a transparent section for the corner bits in case you position over varying background - can also use GIF if you want - I prefer png.



0
ziffgoneCommented:
Here's a cross browser, all-in-one solution:

http://jquery.ziffgone-enterprises.com/bgcanvas/

Regards...
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
bibmed2Author Commented:
Thank you all for your help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.