How I Can Create Gradient and Curve Web Container without any image file

I need an Advanced Container like blue one in ASP.NET Official Website:
http://ASP.NET

These containers has a gradient background in center and curve corners, Shadow under title and ...
It works WITHOUT any Images on all browsers

I know they use CSS and JavaScript for it, but how???
mkdotnetAsked:
Who is Participating?
 
Hamed ZaghaghiProgrammerCommented:
0
 
Jeffrey Dake Senior Director of TechnologyCommented:
That site acctually does use an image

http://asp.net/App_Themes/Standard/i/bg_heading.png.

The key to doing this better would be to break the image into smaller pieces so there wouldn't be as much bandwidth used.
0
 
mkdotnetAuthor Commented:
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.

 
jrm213jrm213Commented:
Hi mkdotnet,

The examples you show there are done in FLASH. It really isn't a recommended solution to try and draw gradients with javascript. I have seen people attempt to do this and usually it only works in one browser type Mozilla or IE and not the other, as well as being slow and sometimes being so slow you get to watch the gradients being drawn.

The best solution I have found for this is to make a gradient image, then apply that as the background-image for the div, table, or whatever element you want the gradient on, set it to background-repeat: repeat-X, and then set the background-color to the last color at the bottom of the gradient.

So your gradient image only needs to be 1 pixel wide by however high you want the gradient (this makes for a small image size and quick download).

example:
gradient-image starts with #ff0000 and ends with #000000;
<div style="background-image: url(/images/mygradient.jpg);background-repeat:repeat-x;background-color: #000000;">My content is in here with a gradient background</div>

If you wanted to make it customizable by the user, you could make multiple gradient images and swap the style information with javascript.

If you find a good, cross-browser, fast javascript gradient creator post it because I know people are looking for it. I just don't think it is Javascripts job to be drawing gradients.


0
 
SyntheticsCommented:
you can make curved corners easily in most mozilla browsers with the non-standard css
         -moz-border-radius
         -moz-border-radius-bottom
         ... -left
         ... -topright
         ... etc
settings.

This won't work in IE though, so my own attempts to find a solution led me to NiftyCube:
http://www.html.it/articoli/niftycube/index.html
which I actually couldn't get to work on my own systems, but know it can work as I've seen examples.

As for gradients, go with jrm213jrm213's solution of a small gradient image being repeated.
0
 
mkdotnetAuthor Commented:
jrm213jrm213:

I found it UP TO NOW : CSS Gradient Shadow by Only Scripts :
http://www.dynamicdrive.com/style/csslibrary/item/css-gradient-shadow/P0/
0
 
jrm213jrm213Commented:
Those both "seem" to work.

The dynamic drive one seems decent but it appears from reading the comments that people have varying results.

The osteele one the demo looks different in IE and Firefox, which isn't good if you want something that works cross browser... i guess technically it does work cross browser but the end result is different (it looks much nicer in firefox).

Is there a reason you don't want to use images?

Also, to Synthetics, I tried NiftyCube a while back and was never ever to get it working properly cross browser, and sometimes I couldn't get it working at all, so I gave up on it.
0
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.

All Courses

From novice to tech pro — start learning today.