Formulario con efecto interesante de Etiquetas sobre los campos de texto

Graphixx · 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 ?

Shell Root · 22 Marzo 2012, 03:49 AM

Fácil,
index.php

Código (html4strict) [Seleccionar]

<!DOCTYPE html>
<html>
    <meta charset=utf-8 />
    <head>
        <title>EfectForm CSS</title>
        <link rel="stylesheet" href="efectForm.css" />
    </head>
<body> 
    <div id="comentarios">
        <div id="responder">
            <form>
                <p class="pNombre">
                    <label for="author">Nombre</label>
                    <span class="requerido">*</span>
                    <input id="author" name="author" type="text" value="" size="30" aria-required="true">
                </p>
            </form>
        </div>
    </div>
</body>
</html>

efectForm.css

Código (css) [Seleccionar]

body{ font-family:"Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif; }

#comentarios{ clear:both; padding:10px }
#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; }
#comentarios #responder .pNombre{ position:relative; }
#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); }
#comentarios #responder .pNombre .requerido{ color:#bd3500; font-size:22px; font-weight:bold; left:75%; position:absolute; top:45px; z-index:1; }
#comentarios #responder p{ margin:10px 0; }
#comentarios #responder label{ line-height:2.2em; }
#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); }
#comentarios #responder input[type="text"]{ display:block; height:24px; width:75%; }
#comentarios #responder input[type="text"]:focus{ text-indent:0; z-index:1; }
#comentarios #responder p{ font-size:12px; }

Test Foro de elhacker.net SMF 2.1

Formulario con efecto interesante de Etiquetas sobre los campos de texto

Graphixx

Shell Root