如何使用jQurey打造动态渐变效果(2)
http://www.itjxue.com 2015-08-06 23:07 来源:未知 点击次数:
Step1 - Photoshop
1. 新建文件
按钮的尺寸是100px X 80px，但由于我们需要创建一个有两种状态的CSS sprite背景图，所以我们在Photoshop中创建（Ctrl+N）一个长宽为200px X 160px的图片文件，如下图：
2. 创建参考线
为了使绘制按钮更容易，我们创建参考线，从标尺中拉出参考线，如果你找不到标尺，可以按Ctrl+R显示，如下图：
3. 绘制形状
选择工具面板中的矩形工具，设置圆角半径为10px，在画布上绘制形状，如下图：
4. 设置形状样式
接上图最后一步，双击层，打开图层样式窗口，设置形状的样式，首先选择渐变叠加，设置渐变颜色从#3d3d3d到#8b8b8b，如下图：
然后，选择“内发光”，设置混合模式为“正常”，不透明度为100%，颜色设置为#ffffff，图素大小设置为3像素，如下图：
之后，再选择“描边”，设置大小为1像素，位置为“内部”，颜色为黑色#000000，如下图：
