这是一款效果十分炫酷的jQuery扁平化图标文字阴影特效插件。近几年来,扁平化设计已经成为前端网页开发的一个时髦领域。扁平化设计在各种移动和桌面应用中随处可见。在这款插件中,使用jQuery来模拟扁平化设计的长阴影效果。
HTML结构
使用该扁平化字体图标长阴影插件,首先要在页面中引入 jquery 和jquery.flatshadow.js文件。
HTML
</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
.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
通过下面的语句来调用该扁平化字体图标长阴影插件。
$(".flat-icon").flatshadow({ color: "#3498DB", angle: "SE", fade: false, boxShadow: false // Accept full 6 digit hex color (#000000) });
通过上面的代码,可以制作出DEMO1中的扁平化文字长阴影效果,阴影的方向是东南方向。效果如下图:
颜色参数(color)允许你设置元素背景的颜色,如果你不设置任何颜色,插件将自动从预定义的色板中随机挑取一种颜色。
角度参数(angle)用于定制.flat-icon容器中的元素的阴影方向。方向可设置为"N"(北边)、"S"(南边)、"E"(东边)或"W"(西边),或者是它们的组合,如"SE"(东南)、"NW"(西北)等等。如果你不设置方向,插件将随机给出一个方向。
摄用fade参数,会在元素内部产生一个扁平的阴影效果。你可以将它设置为true来制作一张渐变的效果。例如DEMO4的效果,如下图:
使用boxShadow参数你也可以创建同样的阴影效果,但不是在元素内部,而是在元素的外部容器上。该参数接收6个字符的HEX颜色值。例如:如果你想添加一个黑色的外部阴影效果,可以简单的将上面代码中的"false"该为"#000000"。外部容器将有一个和文字阴影方向相同的阴影效果。
高级定制
如果你需要为每一个元素都自定义一种样式,可以使用下面的html结构:
</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代码来调用它:
$(".flat-icon").flatshadow({ fade: false, boxShadow: false });
这样你就可以将每一个元素都渲染成不同的长阴影效果,背景颜色也不相同。如下图: