近年网站设计多半直接用 CSS 来设定颜色,有些则会使用模糊背景效果,我猜这可能从 Windows Vista 之后的毛玻璃特效(Windows Aero)有关,无论如何,现在你可以使用今天这个在线工具轻松做出模糊背景效果,然后加到你的网站项目中。
Unique Gradient Generator 是一个独特的渐变背景产生器,跟一般 CSS 渐层背景语法功能不同,透过这项服务可以从网站提供的免费图库来挑照片,或是自己上传,选择要模糊显示范围。因为是放大显示,仅会提取图片上非常小的区域,将它扩展到 100% 大小,利用浏览器图片平滑算法来产生最佳效果。
另一大特色是:Unique Gradient Generator 不会产生冗长的 CSS 程序代码!网站生成的原始码非常精简,使用 base64 编码,只有几 bytes 大小。如果你是网站开发者,想要一个简单又不会过于单调的背景图,这是不可多得的好工具。
STEP 1
开启 Unique Gradient Generator 网站后,网站背景就是使用这项服务产生,应该能了解它能产生什么样式的背景图,其实还蛮好看的,简简单单。
STEP 2
点选下方的「Browse Image」来浏览网站提供的图库,点选即可选择使用,或者你也可以自己上传图片。要记住的是 Unique Gradient Generator 只会选择图片里的小范围,然后放大显示,重要的是找到你所需的背景「色系」而不是图案。
STEP 3
主要设定工具在右上角「Controls」,可调整要取用的图片范围、区域大小。如果你没有特别想要那个范围,可以点选「Randomize」随机显示,看看是不是喜欢的背景图案。
你还能使用键盘上的「箭头键」来移动背景范围,「R」键可随机产生。
STEP 4
最后,点选底下的「Generate CSS」来产生对应的 CSS 原始码。
如前面所述,Unique Gradient Generator 产生的 CSS 代码会利用 base64 编码,只有使用到两种 CSS 属性,在套用上非常简单!效果也很不错!
【巅云酷站22连发!】
原文地址:free.com.tw
【网页设计 原创文章 投稿邮箱:2650232288@qq.com】
================关于网页设计================
“网页设计uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://www.yinxi.net//book/。
设计微博:拥有粉丝量104万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://www.yinxi.net/