In it you define the type of gradient as a value, rather than in the property name. There is also an older version of the Webkit extension that works with Chrome 2+ and Safari 4+. To define the above gradient for Safari 5.1+ or Chrome 10+ write: Webkit Extension-The -webkit- extension works a lot like the CSS3 property. Opera Extension-The -o- extension adds gradients to Opera 11.1+. To get the above gradient for Firefox, write: Mozilla Extension-The -moz- extension works like the CSS3 property, just with the extension. ms-filter: "progid:(startColorstr='#999999', endColorstr='#ffffff', GradientType=1)" To get the above gray to white gradient you would write:įilter: progid:( startColorstr='#999999', endColorstr='#ffffff', GradientType=1) Microsoft Filters and Extension-Internet Explorer is the most challenging to support, because you need three different lines to support the different browser versions. All of these take the same elements to define your gradient (except that you can only define 2-color gradients in IE). To get your gradient to work cross-browser, you need to use browser extensions for most browsers and a filter for Internet Explorer 9 and lower (actually 2 filters). Linear-gradient(left, #999999 0%, #ffffff 100%) Īnd to set it as the background of a DIV write:īackground-image: linear-gradient(left, #999999 0%, #ffffff 100% īrowser Extensions for CSS3 Linear Gradients So, to define the above gradient with CSS3, you write: You will learn more about color stops on page 3. The default is to place the colors evenly along the line. The percentage tells the browser where on the line to start or end with that color.
#Define gradient code#
You define the color stops with the color code and an optional percentage. If you leave these out, the gradient will flow from the top to the bottom of the element. Then, you define the start and stop points of the gradient in one of two ways: the angle of the line in degrees from 0 to 359, with 0 degrees pointing straight up. Linear-gradient(angle or side or corner, color stop, color stop)įirst you define the type of gradient with the name To define linear gradients using CSS3, write: Add, too, the colors of the gradient and where those colors individually begin and end. When you define a gradient, identify its type- linear or radial-and where the gradient should stop and start.
#Define gradient android#
CSS3 linear gradients are supported in Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, and Safari 4+. Linear gradients are the easiest to define and have the most support in browsers. The image above shows a simple left-to-right gradient of #999 (dark gray) to #fff (white). A simple linear gradient from left to right of #999 (dark gray) to #fff (white).
0 kommentar(er)
