Convert to CSS3 Gradient?

Without seeing the colors you are working with, you want to do something like this.

Up vote 0 down vote favorite share g+ share fb share tw.

I am new to using CSS3 (specially gradients). How do I convert the following HTML/CSS coded border to one with CSS3-based gradient (i.e. Using no image) I want to convert FROM Normal CSS border/background color TO Box with Gradient Width/Heights are approx in the img above...I need to know how to get the gradient as per the 2nd fig?

Html css html5 css3 gradient link|improve this question asked Oct 17 '11 at 17:24testndtv2,94721546 99% accept rate.

1 It might be helfpul if you included the actual CSS in your question, rather than just the images. – Jim Oct 17 '11 at 17:25.

Without seeing the colors you are working with, you want to do something like this . Class{ background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000)); background: -moz-linear-gradient(top, #fff, #000); } Here's a tool that might help: gradients.glrzad.com.

This link should help you. You will find the syntax for gradients there. It's this one for all the major browsers: background-color: #444444; background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); background-image: -webkit-linear-gradient(top, #444444, #999999); background-image: -moz-linear-gradient(top, #444444, #999999); background-image: -ms-linear-gradient(top, #444444, #999999); background-image: -o-linear-gradient(top, #444444, #999999); background-image: linear-gradient(top, #444444, #999999); filter: progid:DXImageTransform.Microsoft.

Gradient(startColorStr='#444444', EndColorStr='#999999'); …while #444444 is the color at top of the gradient and #999999 the gradient-color at the bottom. The different "vendor-prefixes" ensure that the gradient works in different browsers as the 'default'-syntax is not supported by every browser by now. The filter-property will make the gradient work in Internet Explorer 8 and below.

But this has some drawbacks (performance aso…). Just use it if really necessary.

Thanks @Phrogz for removing the typo :) – drublic Oct 17 '11 at 18:53 +1 for the most complete answer. In addition, it's worth noting the existence of CSS3Pie which adds support for the standard CSS to IE, instead of having to use that horrible filter style. – Spudley Oct 17 '11 at 19:21 Whay do you feel or say that the filter style is horrible?

– testndtv Oct 18 '11 at 9:24.

The Best place to look is below: CSS3 Gradients.

CSS gradients are cool stuff. But you have one problem. When you are used background gradients in ie9.

You can not used border radius are other CSS3. The background filter propertiy for ie is suck. I have a better solution for this.

That fix the problem in ie9. With this tool you create a gradient: colorzilla.com/gradient-editor/ And with this tool you create a SVG for ie9: ie.microsoft.com/testdrive/graphics/svgg... Now we have this code: background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1OCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgo8c3RvcCBzdG9wLWNvbG9yPSIjNDQ0NDQ0IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjOTk5OTk5IiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNTgpIiAvPgo8L3N2Zz4=); background: #444444; /* Old browsers */ background: -moz-linear-gradient(top, #444444 0%, #999999 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#999999)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #444444 0%,#999999 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #444444 0%,#999999 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #444444 0%,#999999 100%); /* IE10+ */ background: linear-gradient(top, #444444 0%,#999999 100%); /* W3C.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.