CODEWITHSUNDEEP
htmlcssgradient
copenndthagen
copenndthagen

Reputation: 50790

Convert to CSS3 Gradient

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 Normal CSS border/background color

TO

enter image description here 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 ?

Upvotes: 0

Views: 1504

Answers (4)

drublic
drublic

Reputation: 993

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(to bottom, #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.

Edit: The syntax for linear-gradient changed. The spec'd syntax:

background-image: linear-gradient(to bottom, #444444, #999999);

I've changed this above too, so everyone can just copy this.

Upvotes: 3

Mike Vierwind
Mike Vierwind

Reputation: 7019

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: http://www.colorzilla.com/gradient-editor/ And with this tool you create a SVG for ie9: http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

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 */

Upvotes: 0

defau1t
defau1t

Reputation: 10619

The Best place to look is below:

CSS3 Gradients

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34863

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:

http://gradients.glrzad.com/

Upvotes: 1

Related Questions