Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1519
  • Last Modified:

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???
0
mkdotnet
Asked:
mkdotnet
1 Solution
 
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
 
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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
 
Hamed ZaghaghiProgrammerCommented:
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now