体验零代码搭建

创建手写书信风格联系人表单的详细教程

网友投稿  ·  2023-05-11 18:05  ·  所有内容  ·  阅读 772


var cid = "246122".toString(); var czPay = localStorage.getItem('czpay'); if(czPay != null){ if(czPay.indexOf(cid)!=-1){ var pids = czPay.split(',') for(let i=0;i (CHINAZ.com)4月16日编译:在本文中,我们将使用HTML和CS

创建手写书信风格联系人表单的详细教程

创建手写书信风格联系人表单的详细教程

var cid = "246122".toString(); var czPay = localStorage.getItem('czpay'); if(czPay != null){ if(czPay.indexOf(cid)!=-1){ var pids = czPay.split(',') for(let i=0;i

(CHINAZ.com)4月16日编译:在本文中,我们将使用HTML和CSS创建一个传统手写风格的联系人表单,示例会用到初中级CSS技术来创建信纸的外观,然后使用CSS的@font-face属性将数码文字转换成手写风格。希望本教程对你有所帮助。

我们创建的表单使用了线条纹理作为背景,投影的巧妙使用使得纸张立体感强,让人印象深刻。标题和表单区域的内容依旧使用数码文字,但是,我们用点状线取代常用的矩形表单区域,这些位置的文字选用草书字体,给大家呈现出手写的书信风格。

用Photoshop制作素材图片

在开始写代码之前,使用Photoshop来创作后面所需的素材图片。首先为背景添加杂色,数量设为:2%,选择随机和单色。

在画布中央绘制一个白色矩形,在上面画一条1像素的水平线,并用浅蓝色填充,作为信纸的背景纹理。

按住ALT键,同时按住鼠标左键进行复制,然后按住Shift键,移动复制4次,这样的信纸的纹理就做好了。

在信纸的下面图层绘制一个黑色矩形。这是用来实现信纸的卷曲投影效果的。

为矩形应用高斯模糊(Gaussian Blur),使用CMD+T(译者注:苹果电脑的键盘才有CMD键,其它键盘可使用Ctrl+T)对图像进行自由变换,鼠标右击选择扭曲(Distort)隐藏矩形底部的角。

1234下一页


移动应用表单设计秘籍 << 上一篇
2023-05-11 18:05
20款优秀免费的Wordpress留言表单插件
2023-05-11 19:05
下一篇 >>

相关推荐