CSS 渐变多浏览器实现
来源:互联网 发布:eviews for mac破解版 编辑:程序博客网 时间:2024/05/20 15:10
转载链接:http://www.impressivewebs.com/css3-linear-gradient-syntax/
CSS3 Linear Gradient Syntax Breakdown
This is not going to be an extensive post, but just something to serve as a quick reference, along with some interesting points fromthe spec.
In another post, I’ll break down CSS3 radial gradients, but for now I’ll just focus on linear, to keep things simple.
The Bare Minimum for All Supporting Browsers
To get a linear gradient to work in all supporting browsers, this is how you do it:
- #element {
- background: -moz-linear-gradient(black, white); /* FF 3.6+ */
- background: -ms-linear-gradient(black, white); /* IE10 */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */
- background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */
- background: -o-linear-gradient(black, white); /* Opera 11.10 */
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
- background: linear-gradient(black, white); /* the standard */
- }
Which will produce the following gradient:
I’ve included the IE filter syntax, for those who find this page through a search, and need it, but this post isn’t really about that, so I won’t discuss it.
Couple of things to note about the ‘bare minimum’ code above: First, all I’ve declared are two colors — the start and end of the gradient. That’s all you need for a simple linear gradient. Second, to conform tobest practices, I’ve listed the standard syntax last. This future-proofs the code, to ensure that the viewing browser will always be displaying the page based on the standard implementation.
Finally, I’ve also included the old syntax for WebKit-based browsers, as well as the updated version. I won’t be talking about the old syntax here, but do realize that it should be included for full compatibility.
The Full Syntax Simplified
Here’s the same example, but with the full syntax (and without all the proprietary stuff), so we can break it down:
- #element {
- background: linear-gradient(top, black 0%, white 100%);
- }
The above code (with all the necessary proprietary prefixes) will produce the exact same result as the simple ‘black, white’ example from above. Let’s see what each part does.
The Gradient Angle or Starting Point
Where you see the word “top”, you have one of two options: You can declare the angle that the gradient will take, or you can tell it where to start. In this example, we tell it to start at the top, which would be equivalent to an angle of “-90deg”. So this would produce the same result:
- #element {
- background: linear-gradient(-90deg, black 0%, white 100%);
- }
You would also get the same result displayed if you used an angle of “270deg”, which is equivalent to “-90deg”.
So you can use one of the positional keywords (top, right, left, bottom) or else just give it a specific angle numerically, and it will figure out where to start.
Update (Oct. 27/2011) The syntax for the angle value has changed in the spec, and this has beenimplemented by Mozilla. I will be posting more details here when I understand it better and have time to experiment, but it might be a while since I don’t think any stable version of Firefox uses the updated syntax.
The Color Stops and Positions
With a simple linear gradient, you just need two color stops, without specifying positions (as shown in my first code example). But in my extended example, you’ll notice I’ve included the position of each color, in percentage values.
This tells the browser where the full version of the color will begin (not where the gradient gradually starts to fade). The browser will naturally figure out the actual gradient; you just have to tell it where the “gradual change” should completely “stop”. In the example above, the “gradual change” stops right at the bottom of the element, so you don’t really see much (if any) full white in that element.
If we changed the value to 50% for the white “stop”, the result would look like this:
So the “white” now “stops” at 50%, and the rest is solid white.
Adding Color Stops
To add color stops is nothing overly complicated; just add as many comma-separated values as you want. Here’s the CSS for a rainbow:
- #element {
- background: linear-gradient(top, red 0%, orange 15%, yellow 30%, green 45%, blue 60%, indigo 75%, violet 100%);
- }
And here’s the result:
Browser Support
All things considered, browser support for linear gradients is pretty good. But more than likely, depending on your target audience, unless you’re using a simple two-color gradient, then potentially around 20-60% of users won’t see the gradient (naturally,because of IE6-8).
Chrome has supported linear gradients since (I believe) version 2. Starting with version 10, Chrome now supports the simplified syntax. The other browser versions that support linear gradients are: Firefox 3.6+, Opera 11.10+, and nowInternet Explorer 10 Platform Preview supports linear gradients using the-ms-
prefix.
Mobile support for linear gradients includes: iOS 3.2+, Opera Mini 5+, Opera Mobile 10+, and Android Browser 2.1+.
As far as I know, no browser supports linear gradients using only the standard syntax.
Some Closing Points
Here are some points of note for linear gradients:
- CSS3 gradients are not properties; they are images rendered as such by the browser
- You can use a gradient anywhere you would use
url(image.jpg)
in your CSS - The syntax that creates the gradient is actually a function that takes the various values as arguments;see how the spec explains it
- You can also specify a repeating linear gradient, which could come in handy in certain cases
- The percentage values for the color stop positions can also be expressed in pixels
- For the color stops, negative percentage values (e.g. -20%) and percentages higher than 100% are perfectly valid
Anything else about linear gradients that I’ve missed here? Let me know in the comments and I’ll add it.
- CSS 渐变多浏览器实现
- CSS实现渐变 兼容各主流浏览器
- 跨浏览器实现CSS滤镜颜色渐变
- CSS实现背景渐变(gradient)多兼容
- 用css实现渐变
- CSS实现网页背景渐变
- css实现网页背景渐变
- css实现渐变效果
- CSS 实现色彩渐变
- css 实现球形渐变
- CSS实现网页背景渐变
- CSS实现渐变
- css实现文字渐变
- css渐变效果,兼容所有主流浏览器
- css渐变(Firefox,google,IE浏览器)
- 跨浏览器的CSS渐变解决方案
- CSS -- 实现DIV层背景颜色渐变 (兼容IE 火狐 谷歌浏览器)
- CSS实现网页背景颜色渐变的效果(火狐浏览器,IE,)
- java-J2SE学习笔记(四)
- ecshop红包指定某些商品不能使用 修改步骤
- Java心得--键值、枚举器
- Catalan数应用
- java-J2SE学习笔记(五)
- CSS 渐变多浏览器实现
- java-J2SE学习笔记(六)
- Avoiding duplicate session detected errors in LCDS (and BlazeDS)
- SS7网络中的短消息服务(SMS): 使用模块化设备优化利润
- Lisp天才神话(转)
- java-J2SE学习笔记(七)
- 多比矢量图形控件用户手册(四)-图元
- 转载只为记录经典之<使用linux中的sed编辑器>
- java-J2SE学习笔记(八)