David Garzón

Nuestro amigo Victor de mis-algoritmos.com nos enseña una vez más su habilidad para hacer replicas.

Esta vez toca los buscadores como el de msn, digg o yahoo.

Con un simple código como este:

<form class="msn">
    <label for="q">Buscar</label>
    <input type="text" name="q" value="algoritmos" id="text"/><input type="submit" value="Search" id="search"/>
</form>

Y descargando la hoja de estilos css correspondiente, por ejemplo para el de msn como el de abajo seria este código css.

form.msn *{ margin: 0; padding: 0; }

form.msn{ padding:10px 20px; background-image:url(msn/images/fondo-azul.png); background-repeat:repeat-x; padding:45px 0 0 0; }

form.msn label{ display:none; }

form.msn input{ font-family:MS Shell Dlg; font-size:0.8em; vertical-align:top; }

form.msn input#text{ background-color:#fff; width:320px; height:1.6em; border:1px solid #59990e; padding:4px 4px 2px 10px; }

form.msn > input#text{ margin:1px 0 0 0; }

form.msn input#search{ background-color:#61a11c; background-image:url(msn/images/fondo-boton.png); background-repeat:repeat-x; font-weight:bold; color:#fff; height:2.2em; width:65px; border:1px solid #3f8e00; margin:1px 0 0 6px; padding:0 1px 2px 1px; }

form.msn > input#search{ margin:1px 0 0 6px; padding:-2px 1px 0 1px; }

form.msn input:hover#search{ background-color:#3e8d00; background-image:url(msn/images/fondo-boton-hover.png); }

Noticia original