按照这一步一步的教程创建一个手写的联系方式页面。我们将使用一个基本的和中间的CSS techinques组合给一个字母的外观形式,然后使用@font-face的 CSS属性的笔迹转换成数字文本。

 

字母样式的联系方式演示

我们正在创建的形式风格与内衬的背景纹理和一个微妙的阴影,给了一个纸的印象。标题和表单字段将作为数字文本样式,但与草书字体的手写字母的外观,而不是使用矩形的表单域,我们将创建虚线。

Photoshop的概念

开始我想创建一个Photoshop的概念,以获得最初的想法是如何设计将外观与任何编码之前。开始发出微妙的背景与设定的2%的统一,单色噪声叠加。

在画布的中心画一个白色矩形,然后填写与淡蓝色的颜色复制内衬纸垫发现模式1px的水平线。

按住Alt键,并按下光标键重复的,然后按住Shift和移动重复的行的4倍(40px),内衬纸张,以创建一个整版。

填补了下方的主网页上一层黑色的矩形。这将是我们的微妙页卷曲的影子基地。

给矩形的高斯模糊,然后按Cmd的+ T来变换形状。右击并选择歪曲为了隐藏背后的主要页面的底部角落。

减少阴影的不透明度来完成页面卷曲效果。

使用典型的字体样式,创建信印刷部分。确保每个文字项目是一致的基线网格由内衬模式创建。

切换到Adobe Illustrator中,以创建一个虚线效果。Illustrator的描边工具,通过调整短跑和圆帽设置很容易地创建了一系列的循环点。

线粘贴到Photoshop文档,将它们对齐根据基线网格。

将创建一个手写的字体,给传统的笔和纸基信的外观形式领域内的字体造型。我们将使用 Google的字体做在CSS,所以现在在一些占位符文本粘贴。

使用一套邮资标记的Photoshop笔刷的样式与传统的手写信件主题发送按钮。

一旦PSD的概念是完整的图像图形可以导出使用的HTML / CSS版本。绘制选择创建重复的纹理和图案背景色板。

确保空白区域,以保持间距和行的高度重复文件时的虚线图形图像。

出口任何图形,需要透明背景的PNG-24图像,使他们可以覆盖没有问题的背景。

HTML的结构

<!DOCTYPE HTML> <HTML> <HEAD> <meta charset="utf-8" /> <TITLE>钢笔和纸张形式</ TITLE>
 <link href="style.css" rel="stylesheet"
 </ HEAD> <BODY>
 <div id="container">
 </ DIV>
 </ BODY> </ HTML>

创建一个新的HTML文件,然后输入一个HTML5页面的基本结构,包括DOCTYPE,页面标题,链接的CSS样式表和一个简单的容器div来容纳我们的形式。

<H1>寄一封信</ H1>
 <form action="" method="post"> <fieldset> <label f​​or="name">名称:</标签> <input type="text" id="name" name="name" />
 <label f​​or="email">电子邮件:</标签> <input type="email" id="email" name="email" />
 <label f​​or="message">消息:</标签> <textarea id="message" name="message"> </ TEXTAREA>
 <input type="submit" id="send" value="Send" />
 </的fieldset> </ FORM>

键入的元素,创造出整体的形式。新的HTML5 类型=“电子邮件”属性,可以使用第二种形式的领域,但另有语法是基本的HTML。确保您的标签对应每个输入额外的易用性和可用性点的ID。

CSS样式

身体,DIV,H1,形式的fieldset,输入,textarea的{ 保证金:0:0;边界:0;概要:无; }
 BODY { 背景:#abb5cb URL(蓝bg.png); 字体家庭:黑体,无衬线;颜色:#525c73; 线高度:40px;文本转换:大写字母; }
 #集装箱{ 宽度:560px;保证金:100px的自动填充:51px 0 0 0; 背景:URL(lines.png);位置:相对; } #集装箱:前{ 内容:“宽度:19px;高度:365px;位置:绝对;左:19px;顶:0; 背景:URL(shadow.png)的; }

用一个简单的复位,以消除任何浏览器的默认样式的CSS文件开始,然后整个页面风格可以添加到全身。# 容器div转化成纸页与内衬背景图像的帮助,然后添加阴影的帮助选择绝对定位是用来转移主页左侧的阴影,所以正确对齐。

H1 { 字体大小:30像素; 文本对齐:中心;字母间距:5PX; 保证金:0 44px 0; }
 标签{ 宽度为150px;显示:块; 文本对齐:权利;浮动:左; 字体大小:18px;字母间距:3px; 保证金:0 10px 0 40px;明确:左; }

接下来是在CSS中的印刷或数字文本的样式。Helvetica字体家族和颜色被指定在身体声明回来,所以剩下的就是设置字体大小和添加一些字母间距匹配的Photoshop概念。调整下的头,以保持所有的基线对齐和标签上使用特定的宽度,所以,他们都对齐冲洗权的保证金。

输入{ 宽度:300像素,高度:40px;浮动:左;保证金:14px 0 0 0; 背景:URL(dots.png)的; 字体家庭:成光的“阴影”,草书; 字体大小:24px;颜色:#18326d;字母间距:3px; }
 textarea的{ 宽度:300像素,高度:200像素;浮动:左;保证金:14px 0 40px 0; 背景:URL(dots.png)的; 字体家庭:成光的“阴影”,草书; 字体大小:24px;颜色:#18326d;字母间距:3px; }

输入字段的样式开始与特定的宽度和高度正常,但我们的田野,而不是一个概述矩形转换成虚线,虚线背景图片的帮助。包含在映像中的空白,将允许输入和texarea元素扩大到任何尺寸。@ font-face的代码从Google网页字体页成光的阴影,并把它添加到的CSS转换成手写输入文字,然后调整边距对齐虚线以上的文字。

输入#发送{ 宽度:202px;高度:84px;浮动:权利; 保证金:0 70px 36px 0;填充:0 0 0 77px; 背景:URL(后mark.png); 字体:30像素加粗黑体,无衬线;文本转换:大写;颜色:#525c73; 光标:指针; }

CSS样式的最后一部分了发送按钮。currenly此输入元素正在由通用输入CSS声明样式,所以一些属性需要被还原。否则的主要图形添加背景图像和整个元素的与利润率地方的动议。

更新!自动扩大textarea的

詹姆斯·西摩锁在Twitter上的伟大textarea的建议应该扩大用户类型,为了遮丑的滚动条。为什么我没有想到呢?!

$(文件)。就绪(函数(){ $(“#textarea的消息)AUTORESIZE(); });

这个很酷的功能,可以很容易地添加一个现成的jQuery插件的帮助。jQuery.fn.autoResize提供了确切的疗效,我们需要的。脚本文件添加到HTML文件的头部和激活的jQuery插件。

最终的HTML / CSS表格

字母样式的联系方式演示

这使得我们手写的信启发的形式完整的造型。内衬背景图像和页面卷曲的影子,给一张纸的实际外观,而虚线和手写字体样式复制印刷形式如何在现实生活中充满。

 


更多



分类: 前端设计

评论