Sistema de comentarios con CSS3 y HTML5

h1{ color:#F90; margin-left:20px; font-size:26px; text-shadow:0 0 10px #F96; -moz-text-shadow:0 0 10px #F96; -ms-text-shadow:0 0 10px #F96; -o-text-shadow:0 0 10px #F96; -webkit-text-shadow:0 0 10px #F96; } fieldset{ border:solid 1px #DEDEDE; width:600px; padding:10px; background:-moz-linear-gradient(#fff 0%,#DEDEDE 100%); background:-webkit-linear-gradient(#fff 0%,#DEDEDE 100%); background:-ms-linear-gradient(#fff 0%,#DEDEDE 100%); background:-o-linear-gradient(#fff 0%,#DEDEDE 100%); } legend{ font-size:18px; color:#0066CC; } #nombre{ text-align:right; max-width:230px; } label{ color:#06C; float:right; font-size:16px; } #text{ padding:10px; margin-top:5px; border:solid 1px #DADADA; width:150px; color:#999; border-radius:5px ; transition-duration:2s; -moz-transition-duration:2s; -ms-transition-duration:2s; -webkit-transition-duration:2s; -o-transition-duration:2s; } #text:focus{ border:solid 1px #09F; box-shadow:0 0 15px #0C9; -moz-box-shadow:0 0 15px #0C9; -ms-box-shadow:0 0 15px #0C9; -o-box-shadow:0 0 15px #0C9; -webkit-box-shadow:0 0 15px #0C9; } textarea{ resize:none; color:#999; padding:10px; border-radius:5px; border:solid 1px #DADADA; transition-duration:1s; -moz-transition-duration:1s; -ms-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; } textarea:focus{ border:solid 1px #999; box-shadow: 0 0 15px #DEDEDE; padding:20px; } #textarea{ margin-top:5px; width:500px; margin-left:30px; } #codigo{ background:#000; color:#fff; }

Formulario con CSS3 y HTML 5

Hola amigos aquí les traigo un formulario para implementar en cualquier web solo le falta ponerlo a funcionar con PHP. Espero y les sirva el código funciona tal cual aparece más abajo.

Deja tu comentario

Nombre:
E-Mail:

Este es todo el codigo HTML y CSS solo tienen que copiarlo a un documento html y listo tendras su formulario con este mismo estilo.

<!DOCTYPE html>
<html lang=’es’>
<head>
<meta charset=”utf-8″ />
<title>Sistema de comentario con CSS 3</title>
<style>
h1{
color:#F90;
margin-left:20px;
font-size:26px;
text-shadow:0 0 10px #F96;
-moz-text-shadow:0 0 10px #F96;
-ms-text-shadow:0 0 10px #F96;
-o-text-shadow:0 0 10px #F96;
-webkit-text-shadow:0 0 10px #F96;
}
fieldset{
border:solid 1px #F1F1F1;
width:600px;  
}
legend{
font-size:18px;
color:#0066CC;
}
#nombre{
text-align:right;
max-width:230px;
}
label{
color:#06C;
float:right;
font-size:16px;  
}
#text{
margin-top:5px;
border:solid 1px #DADADA;
width:150px;
color:#999;
height:25px;
border-radius:5px ;
transition:box-shadow 2s;
-moz-transition:box-shadow 2s;
-ms-transition:box-shadow 2s;
-o-transition:box-shadow 2s;
-webkit-transition:box-shadow 2s; 
}
#text:focus{
border:solid 1px #09F;
box-shadow:0 0 15px #0C9;
-moz-box-shadow:0 0 15px #0C9;
-ms-box-shadow:0 0 15px #0C9;
-o-box-shadow:0 0 15px #0C9;
-webkit-box-shadow:0 0 15px #0C9;
}
textarea{
color:#999;
padding:10px;
border-radius:3px;
border:solid 1px #DADADA;
transition:box-shadow 3s;
-moz-transition:box-shadow 3s;
-ms-transition:box-shadow 3s;
-o-transition:box-shadow 3s;
-webkit-transition:box-shadow 3s;
}
textarea:focus{
border:solid 1px #09F;
box-shadow: 0 0 15px #0C9;
}
#textarea{
margin-top:5px;
width:500px;
margin-left:30px;

</style></head>
<body>
<h1>Formulario con HTML 5 y CSS 3 </h1>
    <fieldset>
        <legend>Deja tu comentario</legend>
        <form action=”confi.php” method=”post”><div id=”nombre”>
        <div>Nombre:<input placeholder=”Tu nombre” type=”text” name=”nombre” id=”text”/></div>
        <div>Correo:<input placeholder=”Correo electronico” type=”email” name=”mail” id=”text” /></div></div>
        <div id=”textarea”><textarea placeholder=”Deja tu comentario..” rows=”2″ cols=”50″></textarea></div>
        </form>
    </fieldset>
</body>
</html>

comocrearmiweb.com