现在很常在网路服务或网站上看到渐层背景应用,记得早期都必须使用图片堆叠出来,不过后来已经可以写入CSS样式,只要指定颜色代码和呈现方式即可。虽然知道有这功能,但要立即写出来好像也不是那么容易,还好有网站可以参考,例如Gradient Backgrounds 收录各种渐层背景产生器的一站式工具,简单一点还有ColorSpark、CoolHue这类渐层色组合产生器,可快速建立CSS3语法,复制到网站就能套用。
本文要介绍的「Blend」是一款让使用者建立、自订CSS3渐层背景的线上工具,选择两种颜色,点选Let's Blend!将渐层效果直接预览显示于网站背景。Blend还能控制渐层角度、线性渐层(Linear Gradients)或径向渐层(Radial Gradients),最终产生对应的程式码。
如果你在开发网站或网路服务时正好需要渐层背景,不妨打开Blend 网站试试看,就能很快速很简单地解决背景颜色需求。
使用教学
STEP 1
开启Blend 网站,从左右两边设定一下渐层的颜色,点选中间的Let's Blend! 混合。
STEP 2
混合后直接从Blend 背景预览效果,看看是不是符合自己的期待。
STEP 3
右上角可以切换渐层模式,例如线性渐层或径向渐层,点选线性渐层时还能调整渐层的角度数据,调整时背景预览会即时更新。
STEP 4
最后,点选右上角按钮就能产生对应的CSS 程式码啰!将它加入网站的样式表,就能看到渐层背景效果出现在网页中。