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

Comments

  1. By Anonymous

  2. By Anónimo

  3. By Anónimo

  4. By Anónimo

  5. By Anónimo

  6. By Anónimo

  7. By Anónimo

  8. By Anónimo

  9. By Anónimo

  10. By Anónimo

  11. By Anónimo

Deja un comentario

Tu dirección de correo electrónico no será publicada.