Crear un formulario de contacto con Css3
Si estas creando un sitio web, una de las páginas mas importantes que necesitaras es la del formulario de contacto, la interacción con su potencial cliente o objetivo es vital para el exito de su sitio web, entonces es muy importante y natural que quiera un formulario que sea funcional y a la vez elegante, aquí aprenderá a crear un formulario limpio y simple con solo CSS3 , sin imagenes.
El Código HTML
El código html es realmente simple.
<form class="css3Form">
<h1>Contact me</h1>
<ul>
<li><input type="text" value="Your Name"/></li>
<li><input type="text" value="Email Address"/></li>
<li><textarea rows="5"> Comments </textarea></li>
</ul>
<input type="button" class="button" value="Send" />
</form>
El Código CSS
Se comienza con el CSS del formulario, note que CSS3 será muy usado, esta apariencia no funciona en IE8, o navegadores mas viejos.
.css3Form ul li
{
margin:10px 0;
box-shadow: 1px 1px 0 0 #949494;
-moz-box-shadow: 1px 1px 0 0 #949494;
-webkit-box-shadow: 1px 1px 0 0 #949494;
border-radius: 18px 18px;
-moz-border-radius: 18px 18px;
-webkit-border-radius: 18px 18px;
float:left;
clear:both
}
.css3Form input, .css3Form textarea
{
margin:0;
width:300px;
padding: 8px 10px;
font-size:16px;
color:#b3b3b3;
border:solid 1px #585858;
text-shadow: 1px 1px 0 #4b4b4b;
border-radius: 18px 18px;
-moz-border-radius: 18px 18px;
-webkit-border-radius: 18px 18px;
box-shadow: inset 1px 1px 3px 0 #000;
-moz-box-shadow: inset 1px 1px 3px 0 #000;
-webkit-box-shadow: inset 1px 1px 3px 0 #000;
background:-moz-linear-gradient(0% 100% 90deg,#7e7e7e, #5e5e5e);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#5e5e5e), to(#7e7e7e));
}
.css3Form .button
{
width:150px;
border:solid 1px #bababa;
color:#363636;
font-weight:bold;
font-size:18px;
border-bottom-color:#363636;
background:-moz-linear-gradient(0% 100% 90deg,#5f5f5f, #9e9e9e);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#9e9e9e), to(#5f5f5f));
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
text-shadow: 1px 1px 0 #9d9d9d;
}
Y listo ahí lo tienes un formulario simple con solo usar Css.
Comentarios