轩枫阁

首页 / Web前端 / CSS / CSS3渐变gradient的应用

CSS3渐变gradient的应用

前言

在CSS3盛行的年代,我们要学会极致的运用它的属性来装点我们的网站,学会CSS3的渐变就可以做出一些非常炫的效果。

应用点

在没有CSS3之前,为了显示一个渐变而专门制作一个图片,这种不法不但不灵活还增加请求数。那我们能用gradient做些什么呢?做渐变背景、做渐变导航、做按钮、按钮的四态(default、hover、active、focus)、绘制图形、配合CSS3动画做特效等。

Gradient语法

1、线性渐变的语法

对象选择器 {background:-浏览器前缀-linear-gradient( 起点方向,起点颜色,终点颜色);}

2、径向渐变的语法

对象选择器 {background:-浏览器前缀-radial-gradient( 起点方向,形状,大小,起点颜色,终点颜色);}

Gradient的兼容方法

1、线性渐变

I、各浏览器前缀

(1)Firefox

moz-gradient

(2)Safari , Chrome

webkit-gradient

wekit-gradient-new

(3)Opera 11.10+

opera-gradient

II、兼容IE

ie-gradient-filter

 

2、径向渐变

径向渐变和线性渐变的语法差不多,详情请查看后续链接。

 

demo

预览地址:http://www.xuanfengge.com/demo/201402/gradient/

1. 径向渐变做大背景

NT_ZWV@ZS2O6V1)C38`$$Q5

主要代码

 

2. css3蒙版

如轩枫阁页面底部渐变效果

3. 渐变按钮

asfes

4. 闪光效果

2RJ9)PU8NG4WP58T)A}1OOE

 

技巧

相信你看到这,一定觉得,这么长串的代码,我怎么写出来,看着都晕。

如果是简单的渐变,可以用less的函数来生成,只需要提供开始颜色和停止颜色。如果是按钮,则有专门的网站,可视化生成。

Less函数

用法:

S$BVOP0JF$~BQMEFHT]{UNU

 

附录链接

CSS3详细教程:http://www.w3cplus.com/content/css3-gradient

按钮制作1:http://www.bestcssbuttongenerator.com/

按钮制作2:http://www.colorzilla.com/gradient-editor/

Less函数技巧:http://www.xuanfengge.com/less-writing-skills-sharing-happy-to-write-css.html

本文标题:CSS3渐变gradient的应用 - 轩枫阁

转载请务必注明出处,欢迎分享

如果觉得我的文章对您有用,欢迎打赏
赞  赏
赞赏作者 urnotivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
259/470
261/470

相关阅读

文章评论

  • 水平很高啊,值得学习

  • 没来得急看,应该不错,先帮你顶

  • 问一下大牛,我想用css3的特性做一个光盘上的激光效果。径向渐变可以做成圆圈,但扇形的渐变我就不知道怎么做了?可否提供一下思路。用的是background-image:不是分成各种小的div

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子