| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
jopen
10年前发布

一秒提高格调!帮你快速生成网页毛玻璃背景的酷站(附CSS代码)

一秒提高格调!帮你快速生成网页毛玻璃背景的酷站(附CSS代码)

近年网站设计多半直接用 CSS 来设定颜色,有些则会使用模糊 背景 效果,我猜这可能从 Windows Vista 之后的毛玻璃特效(Windows Aero)有关,无论如何,现在你可以使用今天这个在线工具轻松做出模糊 背景 效果,然后加到你的网站项目中。

Unique Gradient Generator 是一个独特的渐变 背景 产生器,跟一般 CSS 渐层背景语法功能不同,透过这项服务可以从网站提供的免费图库来挑照片,或是自己上传,选择要模糊显示范围。因为是放大显示,仅会提取图片上非常小的区域,将它扩展到 100% 大小,利用浏览器图片平滑算法来产生最佳效果。

另一大特色是:Unique Gradient Generator 不会产生冗长的 CSS 程序代码!网站生成的原始码非常精简,使用 base64 编码,只有几 bytes 大小。如果你是网站开发者,想要一个简单又不会过于单调的背景图,这是不可多得的好工具。

Unique Gradient Generator

STEP 1

开启 Unique Gradient Generator 网站后,网站背景就是使用这项服务产生,应该能了解它能产生什么样式的背景图,其实还蛮好看的,简简单单。

一秒提高格调!帮你快速生成网页毛玻璃背景的酷站(附CSS代码)

STEP 2

点选下方的「Browse Image」来浏览网站提供的图库,点选即可选择使用,或者你也可以自己上传图片。要记住的是 Unique Gradient Generator 只会选择图片里的小范围,然后放大显示,重要的是找到你所需的背景「色系」而不是图案。

一秒提高格调!帮你快速生成网页毛玻璃背景的酷站(附CSS代码)

STEP 3

主要设定工具在右上角「Controls」,可调整要取用的图片范围、区域大小。如果你没有特别想要那个范围,可以点选「Randomize」随机显示,看看是不是喜欢的背景图案。

你还能使用键盘上的「箭头键」来移动背景范围,「R」键可随机产生。

一秒提高格调!帮你快速生成网页毛玻璃背景的酷站(附CSS代码)

STEP 4

最后,点选底下的「Generate CSS」来产生对应的 CSS 原始码。

如前面所述,Unique Gradient Generator 产生的 CSS 代码会利用 base64 编码,只有使用到两种 CSS 属性,在套用上非常简单!效果也很不错!

一秒提高格调!帮你快速生成网页毛玻璃背景的酷站(附CSS代码)

 

原文地址: free.com.tw

 

来自: http://www.uisdc.com/unique-gradient-generator