CSS3中如何实现渐变效果

html-css013

CSS3中如何实现渐变效果,第1张

CSS3里面的线性渐变:linear-gradient

1、语法

2、参数

第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示:

第一个参数省略时,默认为“180deg”,等同于“to bottom”。

第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。

例如:

background-image:linear-gradient(to left, red,orange,yellow,green,blue,indigo,violet)

该属性已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:

div {width: 200pxheight: 150pxbackground: linear-gradient(red, white)}

3、浏览器运行index.html页面,此时td中的div的背景颜色从红色到白色渐变。

CSS Animatie

CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码。

CSS3 Keyframes Animation Generator

Long Shadows Generate

Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器。

Long Shadows Generator

Fontastic

Fontastic是一个在线生成字体图标的app,可以定制属于自己的图标字体。

Create your Icon Font in seconds

Screensiz.es

Screensiz.es站收集整理了移动端的相关尺寸。

Screen Sizes

Live Tools

Live Tools是一个UI制作工具,他提供了按钮、表单、icon图标和Ribbons的制作工具,

可以在线配置相关参数,生成你需要的效果代码。

Ui Parade - Live Tools

Button Generator

生成和图片效果一样的按钮工具。

CSS Button Generator

@FONT-FACE GENERATOR

@FONT-FACE GENERATOR只需其中一种字体,就可以帮我们转换成@font-face各浏览器

下所需的所有字体格式。只是中文字体太大,不太好用。

Create Your Own @font-face Kits

@font-face ICON图标

ICON使用@font-face制作是越来越普遍了,但有一些icon字体库有几个icon,而往往我

们有时候只需要其中的几个,加载所有的icon感觉浪费,其实没有必要这么做的,在线

有两个网站,上面提供了各种字体icon库,我们只需要选择其中的部分,进行安装就OK了。

Fontello - icon fonts generator

IcoMoon App - Icon Font &SVG Generator

Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator真心的好用,是我常用的一个在线制作渐变的工具,

他除了类似于photoshop的渐变工具之外,还是firefox和chrome浏览器的一个插件。而

且还能生成兼容IE的滤镜代码,好强大的。

Ultimate CSS Gradient Generator

Pageblox

Pageblox是一款在线生成布局的工具,提供了七种常见的布局模式,而且还可以根据自

己的需求做一些自定义的设置。

CSS Layout Generator

CSS Load

CSS Load是一款纯代码制作loading的工具。

CSS Load.net

【ecd】css3 Animation tool

腾讯ECD推出一款强有力的CSS3动画制作工具。

动画工具[Tool]

Character-Code

http://Character-Code.com提供了对应的字符编码,可以查询出对应的字符编码。