jQuery扁平化图标文字长阴影特效插件

文字阴影 长阴影 扁平化 2015-01-01

控件介绍
这是一款效果超酷的jQuery扁平化图标文字长阴影特效插件。扁平化设计是时下最流行的设计方案,这款扁平化文字长阴影特效能够通过jQuery来将文字制作出扁平化长阴影效果,并可以通过参数修改阴影方向和背景颜色,非常方便。
浏览器兼容

支持IE9+

演示下载 1127
使用方法

HTML结构

使用该扁平化字体图标长阴影插件,首先要在页面中引入 jquery 和jquery.flatshadow.js文件。

HTML
1
2
3
4
5
6
7
</pre>
<div class="flat-icon">FLAT</div>
<div class="flat-icon">UI</div>
<div class="flat-icon">IS</div>
<div class="flat-icon">PRETTY</div>
<div class="flat-icon">AWESOME</div>
<pre>
CSS
1
2
3
4
5
6
7
8
9
10
.flat-icon {
  padding:23px 28px;
    font-size: 45px;
    font-weight: bold;
    display: inline-block;
    line-height: 100%;
    overflow: hidden;
    text-transform: uppercase;
    margin-right: 15px;
}
JAVASCRIPT

通过下面的语句来调用该扁平化字体图标长阴影插件。

1
2
3
4
5
6
$(".flat-icon").flatshadow({
  color: "#3498DB",
  angle: "SE",
  fade: false,
  boxShadow: false // Accept full 6 digit hex color (#000000)
});

通过上面的代码,可以制作出DEMO1中的扁平化文字长阴影效果,阴影的方向是东南方向。效果如下图:

扁平化字体图标长阴影效果-1

颜色参数(color)允许你设置元素背景的颜色,如果你不设置任何颜色,插件将自动从预定义的色板中随机挑取一种颜色。

角度参数(angle)用于定制.flat-icon容器中的元素的阴影方向。方向可设置为"N"(北边)、"S"(南边)、"E"(东边)或"W"(西边),或者是它们的组合,如"SE"(东南)、"NW"(西北)等等。如果你不设置方向,插件将随机给出一个方向。

摄用fade参数,会在元素内部产生一个扁平的阴影效果。你可以将它设置为true来制作一张渐变的效果。例如DEMO4的效果,如下图:

扁平化字体图标长阴影效果-4

使用boxShadow参数你也可以创建同样的阴影效果,但不是在元素内部,而是在元素的外部容器上。该参数接收6个字符的HEX颜色值。例如:如果你想添加一个黑色的外部阴影效果,可以简单的将上面代码中的"false"该为"#000000"。外部容器将有一个和文字阴影方向相同的阴影效果。

高级定制

如果你需要为每一个元素都自定义一种样式,可以使用下面的html结构:

1
2
3
4
5
6
7
</pre>
<div class="flat-icon" data-color="#2ecc71" data-angle="NE">FLAT</div>
<div class="flat-icon" data-color="#1ABC9C" data-angle="NW">UI</div>
<div class="flat-icon" data-color="#3498db" data-angle="SE">IS</div>
<div class="flat-icon" data-color="#9b59b6" data-angle="SW">PRETTY</div>
<div class="flat-icon" data-color="#34495e" data-angle="NE">AWESOME</div>
<pre>

然后使用下面的JS代码来调用它:

1
2
3
4
$(".flat-icon").flatshadow({
    fade: false,
    boxShadow: false
});

这样你就可以将每一个元素都渲染成不同的长阴影效果,背景颜色也不相同。如下图:

扁平化字体图标长阴影效果-2

本文转载请注明出处:http://www.zhuiye.com/detail_29.html