Foro de elhacker.net

Programación => PHP => Mensaje iniciado por: Graphixx en 21 Marzo 2012, 23:02 pm


Título: Formulario con efecto interesante de Etiquetas sobre los campos de texto
Publicado por: Graphixx en 21 Marzo 2012, 23:02 pm
Navegando por la web, di con esta pagina:
http://www.codigogratis.com.ar/codigo-de-generador-de-grid-grilla-en-php-con-xsl-y-xml/

si observan al final donde dice, deja un comentario, el formulario presenta un efecto bastante interesante al situar las etiquetas justo encima de los campos de texto, alguien sabe como lograr ese efecto ?

Título: Re: Formulario con efecto interesante de Etiquetas sobre los campos de texto
Publicado por: Shell Root en 22 Marzo 2012, 03:49 am
Fácil,
index.php
Código
  1. <!DOCTYPE html>
  3.     <meta charset=utf-8 />
  4.     <head>
  5.         <title>EfectForm CSS</title>
  6.         <link rel="stylesheet" href="efectForm.css" />
  7.     </head>
  8. <body> 
  9.     <div id="comentarios">
  10.         <div id="responder">
  11.             <form>
  12.                 <p class="pNombre">
  13.                     <label for="author">Nombre</label>
  14.                     <span class="requerido">*</span>
  15.                     <input id="author" name="author" type="text" value="" size="30" aria-required="true">
  16.                 </p>
  17.             </form>
  18.         </div>
  19.     </div>
  20. </body>
  21. </html>

efectForm.css
Código
  1. body{ font-family:"Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif; }
  2.  
  3. #comentarios{ clear:both; padding:10px }
  4. #comentarios #responder{ background:#ddd; border:1px solid #d3d3d3; -moz-border-radius:3px; border-radius:3px; clear:both; color:#444; padding:10px; position:relative; width:478px; }
  5. #comentarios #responder .pNombre{ position:relative; }
  6. #comentarios #responder .pNombre label{ background:#eee; color:#555; display:inline-block; font-size:13px; left:4px; min-width:60px; padding:4px 10px; position:relative; top:40px; z-index:1; -webkit-box-shadow:1px 2px 2px rgba(204,204,204,0.8); -moz-box-shadow:1px 2px 2px rgba(204,204,204,0.8); box-shadow:1px 2px 2px rgba(204,204,204,0.8); }
  7. #comentarios #responder .pNombre .requerido{ color:#bd3500; font-size:22px; font-weight:bold; left:75%; position:absolute; top:45px; z-index:1; }
  8. #comentarios #responder p{ margin:10px 0; }
  9. #comentarios #responder label{ line-height:2.2em; }
  10. #comentarios #responder input[type="text"]{ background:#fff; border:4px solid #eee; position:relative; padding:10px; text-indent:80px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:inset 0 1px 3px rgba(204,204,204,0.95); -moz-box-shadow:inset 0 1px 3px rgba(204,204,204,0.95); box-shadow:inset 0 1px 3px rgba(204,204,204,0.95); }
  11. #comentarios #responder input[type="text"]{ display:block; height:24px; width:75%; }
  12. #comentarios #responder input[type="text"]:focus{ text-indent:0; z-index:1; }
  13. #comentarios #responder p{ font-size:12px; }


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines