CODEWITHSUNDEEP
htmlcsswebkit
Allen Zhang
Allen Zhang

Reputation: 2552

What's the equivalent -webkit-gradient of this CSS?

The style needs to be backward compatible.

Tried googling -webkit-gradient syntax and figure it out myself, but can't find the document......

So, what's the equivalent -webkit-gradient of this CSS:

background: -webkit-linear-gradient(left, #E0E0E0 0%, #E0E0E0 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 100%),
            -webkit-linear-gradient(top, #F9FCF6 0%, #BBE6BF 100%); /* Chrome10+,Safari5.1+ */

Upvotes: 9

Views: 12021

Answers (3)

insertusernamehere
insertusernamehere

Reputation: 23580

Here you go. -webkit-gradient was only used in Chrome 4-9 and Safari 4-5. I'm surprised that it's still supported in the Safari 9:

background:
    -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(224,224,224,1)), color-stop(10%, rgba(224,224,224,1)), color-stop(11%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,0))),
    -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(249,252,246,1)), color-stop(100%, rgba(187,230,191,1)));

Demo

Try before buy

Upvotes: 9

RPichioli
RPichioli

Reputation: 3345

The -webkit- is a hack for the Webkit Browser engine. In this case, applied to the linear-gradient CSS property.

Usually, the first thing we must have in mind when using CSS3 is that some old browsers could not support this "new" property (or many others).. So we use the common background always, covering the legacy engines simply.

Together with the property and the -webkit- hack, we have hacks for another old browser engines like Mozilla Firefox, Internet Explorer, Safari and Opera.

Take a look at this example

.some-class{

    /* Fallback (could use .jpg/.png alternatively) */
    background-color: red;

    /* SVG fallback for IE 9 (could be data URI, or could use filter) */
    background-image: url(fallback-gradient.svg); 

    /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
    background-image:
    -webkit-gradient(linear, left top, right top, from(red), to(#f06d06));

    /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
    background-image:
    -webkit-linear-gradient(left, red, #f06d06);

    /* Firefox 3.6 - 15 */
    background-image:
    -moz-linear-gradient(left, red, #f06d06);

    /* Opera 11.1 - 12 */
    background-image:
    -o-linear-gradient(left, red, #f06d06);

    /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
    background-image:
    linear-gradient(to right, red, #f06d06);

}

You can see more explanations at: https://css-tricks.com/css3-gradients/

And: http://www.w3schools.com/css/css3_gradients.asp

Hope it helps!

Upvotes: 6

Zac Webb
Zac Webb

Reputation: 663

The new standard is to use background-image: linear-gradient().

The following browser versions (or later) support the new 'un-prefixed' version of background-image: linear-gradient():

Chrome: 26
Safari: 6.1
Firefox: 16
Opera: 15
IE: 10
Android: 4.4
iOS: 7.0

If you want to learn more about CSS Gradients, and the new 'un-prefixed' syntax, I'd recommend having a read of this CSS-Tricks article.

Upvotes: 3

Related Questions