|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。
破洛洛文章简介：在本文中，我们将利用HTML和CSS创立一个传统手写作风的接洽人表单，示例会用到初中级CSS手艺来创立信纸的表面，然后利用CSS的@font-face属性将数码笔墨转换成手写作风。
在本文中，我们将利用HTML和CSS创立一个传统手写作风的接洽人表单，示例会用到初中级CSS手艺来创立信纸的表面，然后利用CSS的@font-face属性将数码笔墨转换成手写作风。但愿本教程对你有所匡助。
我们创立的表单利用了线条纹理作为背景，投影的奇妙利用使得纸张平面感强，让人印象深入。题目和表单地区的内容仍旧利用数码笔墨，可是，我们用点状线代替经常使用的矩形表单地区，这些地位的笔墨选用草书字体，给人人出现脱手写的手札作风。
用Photoshop制造素材图片
在入手下手写代码之前，利用Photoshop来创作前面所需的素材图片。起首为背景增加正色，数目设为：2%，选择随机和单色。
在画布中心绘制一个红色矩形，在下面画一条1像素的程度线，并用浅蓝色添补，作为信纸的背景纹理。
按住ALT键，同时按住鼠标左键举行复制，然后按住Shift键，挪动复制4次，如许的信纸的纹理就做好了。
在信纸的上面图层绘制一个玄色矩形。这是用来完成信纸的卷曲投影效果的。
为矩形使用高斯含混（GaussianBlur），利用CMD+T（译者注：苹果电脑的键盘才有CMD键，别的键盘可以使用Ctrl+T）对图象举行自在变更，鼠标右击选择歪曲（Distort）埋没矩形底部的角。
破洛洛文章简介：在本文中，我们将利用HTML和CSS创立一个传统手写作风的接洽人表单，示例会用到初中级CSS手艺来创立信纸的表面，然后利用CSS的@font-face属性将数码笔墨转换成手写作风。
下降投影（shadow）的不通明度（opacity）完成信纸的卷曲效果。
利用罕见字体写上信纸的印书体题目等外容。确保一切的文本内容与信纸的蓝色基线对齐。
翻开AdobeIllustrator创立点状线效果。调治Illustrator中描边工具（StrokeTool）的虚线（Dash）和圆端（Roundcap）值，能够很便利地创立一系列的轮回点。
将制造好的点状线粘贴在Photoshop的文档中，并与信纸的蓝色基线网格重合。
表单域的字体款式接纳手写字体，给人人一种传统的纸笔手札的作风。我们会在CSS代码中利用Google字体（GoogleFonts）来完成，因而，如今要在文本中粘贴一些占位符。
用Photoshop笔刷在信纸上绘制一个与传统手写手札作风有关的邮戳作为发送按钮。
PSD做好以后，导出图片，留待HTML/CSS结构中利用。接上去绘制一个选区，创立反复的背景纹理和图案样本。
破洛洛文章简介：在本文中，我们将利用HTML和CSS创立一个传统手写作风的接洽人表单，示例会用到初中级CSS手艺来创立信纸的表面，然后利用CSS的@font-face属性将数码笔墨转换成手写作风。
确保红色空缺地区也被包括在点状图片傍边，当图片反复时，仍然还能保持间距和线高。（译者注：作者制造了单一的点状图，在后文中链进CSS款式表中，多个点状图排成一排就会构成图中所示的输出地区）
导出图片时要注重，一切图片都保留为背景通明的PNG-24，这是为了让图片完善叠加在背景上。
HTML布局
创立一个新的HTML文档，输出HTML5页面的文档范例（Doctype），页面题目，链接到CSS款式表和存储表单的容器div层等基础布局。
起首为页面创立全体格局。全新的HTML5type=“email”属性能够放在第二个表单域，但除此以外，别的的语法仍是基础的HTML言语。确保每一个输出地区的标签（label）与其ID绝对应。
CSS款式
CSS文件入手下手会举行复杂重置，扫除失落一切扫瞄器的默许款式，然后把全部页面的款式增加到body当中。ID为container的div层加上蓝色背景图片（lines.png）就酿成了信纸。然后将投影图片（shadow.png）增加到：before的选择器中，相对定位可以使投影向信纸下居左显现，如许就信纸的投影效果就完成了。
破洛洛文章简介：在本文中，我们将利用HTML和CSS创立一个传统手写作风的接洽人表单，示例会用到初中级CSS手艺来创立信纸的表面，然后利用CSS的@font-face属性将数码笔墨转换成手写作风。
接上去，为数码笔墨举行款式计划。body的声明中已利用了字体（Helvetica字体）和色彩的利用。为共同Photoshop中的图片计划，剩下的事情就是举行字体的巨细设置，和字母间距调治。为包管一切元素与蓝色基准线排在统一直线，调剂顶手下方的边距，labels利用指定的宽度值。如许，他们会在溢出时向右对齐。
输出域的表面利用之前点线状横线（dot.png）取代经常使用的空心矩形，高和宽利用指定的值。图片中的空缺使得输出和文本地区的元素能够扩大恣意巨细。从Google收集字体页面找到ShadowsIntoLight，猎取代码放在CSS款式傍边，它能够讲输出文本转换成手写作风，然后调剂边距，使输出文本的底部与点状线在统一直线。
最初，我们举行发送按钮的CSS款式计划。今朝，输出元素接纳的是通用的CSS输入声明，因而一些属性必要回复。不然主图片会被作为背景图片，全部元素会被挪动到带有边距的地位。
主动扩大文本域
JamesSeymour-Lock在Twitter上倡议，文本地区应当依据用户输出的文本主动扩大，如许能够埋没丑恶的转动条。
这个很酷的功效在jQuery插件的匡助下容易就可以完成。这款名为jQuery.fn.autoResize的插件所供应的效果恰是我们所必要的。把剧本文件增加在HTML文件的招标，启用便可。
最后的效果
至此手写信纸作风的接洽人表单终究半途而废了。蓝色近况背景图片和卷曲投影的组合出现出了实在纸张的效果，而点状线和手写字体款式则再现了实际中填写印制表格的实在效果。
</p>
提高易用性。使用CSS可以结构化HTML，例如：标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 22:59:45
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜