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

Posted on 2007-10-02
Last Modified: 2013-11-19
I need an Advanced Container like blue one in ASP.NET Official Website:

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???
Question by:mkdotnet
    LVL 10

    Expert Comment

    by:Jeffrey Dake
    That site acctually does use an image

    The key to doing this better would be to break the image into smaller pieces so there wouldn't be as much bandwidth used.

    Author Comment

    LVL 17

    Expert Comment

    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).

    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.

    LVL 5

    Expert Comment

    you can make curved corners easily in most mozilla browsers with the non-standard css
             ... -left
             ... -topright
             ... etc

    This won't work in IE though, so my own attempts to find a solution led me to NiftyCube:
    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.

    Author Comment


    I found it UP TO NOW : CSS Gradient Shadow by Only Scripts :
    LVL 9

    Accepted Solution

    LVL 17

    Expert Comment

    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.

    Featured Post

    Courses: Start Training Online With Pros, Today

    Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

    Join & Write a Comment

    I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now