Creación de un buscador atractivo

**Hectorsito20** · 25-dic-2011

Saludos para todos y Feliz Navidad, en esta ocación les muestro como hacer un buscador atractivamente visual lindo.. como también las tecnicas básicas de como crear el mismo si se fijan y van a los complementos de mozilla verán algo similar, ese bsucador de Mozilla siempre ahnelé hacerlo, pero en ese entonce no podía por eso hoy dia lo comparto con ustedes también, espero y les guste y que le sea de utilidad..

Código html
<body>
<div id="search">
<h2>Buscador Intercambiosos</h2>
<form action="">
<input type="text" class="campo" placeholder="busqueda en Intercambiosos..."/>
<input type="submit" class="btn" value="" />
</form>
<p>Creado por <a href="#">Hectorsito20</a></p>
</div>
</body>

Estilos css
<style type="text/css">
#search form{
width:330px;
height:32px;
padding: 5px 7px 7px;
background: #1B5898;
background-image: -webkit-gradient(linear,left bottom,left top,from( #2e89ca),to( #1b5898));
background-image: linear-gradient( #2e89ca, #1b5898);
background-image: -moz-linear-gradient( #2e89ca, #1b5898);
background-image: -webkit-linear-gradient( #2e89ca, #1b5898);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0 -2px 0 rgba(0,0,0,.5) inset,0 2px 0 rgba(0,0,0,.1);
-moz-box-shadow: 0 -2px 0 rgba(0,0,0,.5) inset,0 2px 0 rgba(0,0,0,.1);
-webkit-box-shadow: 0 -2px 0 rgba(0,0,0,.5) inset,0 2px 0 rgba(0,0,0,.1);
padding: 5px 7px 7px;
}
#search form .campo{
width:238px;
float:left;
/*height:24px;*/
padding: 6px 6px 6px 32px;
background-image:url(img/search.png);
background-repeat:no-repeat;
background-position: 7px 50%;
/*outline:none;*/
border-radius:4px;
border: solid 1px #fff;
box-shadow: 0 0 2px rgba(0,0,0,.4) inset;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.4) inset;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.4) inset;
}
#search form .btn{
background: #84C63C url(img/flecha.png) center no-repeat;
background-image: url(img/flecha.png),-moz-linear-gradient( #84c63c, #489615);
background-image: url(img/flecha.png),-webkit-linear-gradient( #84c63c, #489615);
border: 0;
float: right;
cursor: pointer;
width: 44px;
padding: 6px 10px 7px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
box-shadow: 0 1px rgba(0,0,0,.1),0 -2px rgba(0,0,0,.1) inset;
-moz-box-shadow: 0 1px rgba(0,0,0,.1),0 -2px rgba(0,0,0,.1) inset;
-webkit-box-shadow: 0 1px rgba(0,0,0,.1),0 -2px rgba(0,0,0,.1) inset;
border-image: initial;
}
h2{
font-family:tahoma;
font-weight:bold;
font-size:20px;
color:darkred;
}
p{
font-family:Tahoma;
}
p a{
text-decoration:none;
text-align:left;
font-family:Tahoma;
font-size:15px;
color:red;
}
</style>

Resultado final!...

**Hunted** · 25-dic-2011

**Eloy58** · 25-dic-2011

**Hectorsito20** · 25-dic-2011

Saludos Eloy Feliz Navidad...

**Eloy58** · 25-dic-2011

Iniciado por Hectorsito20

Saludos Eloy Feliz Navidad...

Igualmente amigo Hector

**Orpheus96** · 25-dic-2011

Muy Bueno !!

y Feliz Navidad para ti támbien jojo =P

Saludos!!

**Hectorsito20** · 25-dic-2011

Orfeo Feliz navidad Igual que Dios le bendiga compañero...

**cramercaba** · 26-dic-2011

**VJEVans** · 26-dic-2011

Exelente .. Gracias Hector

**Hectorsito20** · 26-dic-2011

DE nada VJEvans y Feliz Navidad brother....

25-dic-2011	#3
Eloy58 VIP ZONE Ingreso: abril-2009 Ubicación: Madrid (España) Mensajes: 18.695 Sexo: País: Signo: Agradecido: +48.486	Aprende lo que puedas y enseña lo que sepas, el conocimiento es patrimonio de TODOS

Temas Similares
Tema	Autor	Foro	Respuestas	Último mensaje
Creación y Uso de Copia de Sistema en Windows 7	Felina05	Tutoriales & Videos Tutoriales	14	03-jun-2011 00:07
Video Tutorial de Creacion de un servidor ftp	juanraton	Peticiones	4	01-jun-2009 11:46
El archivo HOSTS y creación de filtrado casero de website en nuestro Windows	cbyte	Seguridad	1	24-may-2009 12:33

25-dic-2011	#1
Hectorsito20 Desarrollador HTML5 & CSS3 Ingreso: octubre-2011 Ubicación: Republica Dominicana, Punta Cana Bávaro Mensajes: 157 Sexo: País: Signo: Agradecido: +445	Creación de un buscador atractivo Saludos para todos y Feliz Navidad, en esta ocación les muestro como hacer un buscador atractivamente visual lindo.. como también las tecnicas básicas de como crear el mismo si se fijan y van a los complementos de mozilla verán algo similar, ese bsucador de Mozilla siempre ahnelé hacerlo, pero en ese entonce no podía por eso hoy dia lo comparto con ustedes también, espero y les guste y que le sea de utilidad.. Código html <body> <div id="search"> <h2>Buscador Intercambiosos</h2> <form action=""> <input type="text" class="campo" placeholder="busqueda en Intercambiosos..."/> <input type="submit" class="btn" value="" /> </form> <p>Creado por <a href="#">Hectorsito20</a></p> </div> </body> Estilos css <style type="text/css"> #search form{ width:330px; height:32px; padding: 5px 7px 7px; background: #1B5898; background-image: -webkit-gradient(linear,left bottom,left top,from( #2e89ca),to( #1b5898)); background-image: linear-gradient( #2e89ca, #1b5898); background-image: -moz-linear-gradient( #2e89ca, #1b5898); background-image: -webkit-linear-gradient( #2e89ca, #1b5898); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; box-shadow: 0 -2px 0 rgba(0,0,0,.5) inset,0 2px 0 rgba(0,0,0,.1); -moz-box-shadow: 0 -2px 0 rgba(0,0,0,.5) inset,0 2px 0 rgba(0,0,0,.1); -webkit-box-shadow: 0 -2px 0 rgba(0,0,0,.5) inset,0 2px 0 rgba(0,0,0,.1); padding: 5px 7px 7px; } #search form .campo{ width:238px; float:left; /height:24px;/ padding: 6px 6px 6px 32px; background-image:url(img/search.png); background-repeat:no-repeat; background-position: 7px 50%; /outline:none;/ border-radius:4px; border: solid 1px #fff; box-shadow: 0 0 2px rgba(0,0,0,.4) inset; -moz-box-shadow: 0 0 2px rgba(0,0,0,.4) inset; -webkit-box-shadow: 0 0 2px rgba(0,0,0,.4) inset; } #search form .btn{ background: #84C63C url(img/flecha.png) center no-repeat; background-image: url(img/flecha.png),-moz-linear-gradient( #84c63c, #489615); background-image: url(img/flecha.png),-webkit-linear-gradient( #84c63c, #489615); border: 0; float: right; cursor: pointer; width: 44px; padding: 6px 10px 7px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; box-shadow: 0 1px rgba(0,0,0,.1),0 -2px rgba(0,0,0,.1) inset; -moz-box-shadow: 0 1px rgba(0,0,0,.1),0 -2px rgba(0,0,0,.1) inset; -webkit-box-shadow: 0 1px rgba(0,0,0,.1),0 -2px rgba(0,0,0,.1) inset; border-image: initial; } h2{ font-family:tahoma; font-weight:bold; font-size:20px; color:darkred; } p{ font-family:Tahoma; } p a{ text-decoration:none; text-align:left; font-family:Tahoma; font-size:15px; color:red; } </style> Resultado final!...

Los siguientes 6 usuarios agradecen a Hectorsito20 por este mensaje:
baduser (26-dic-2011), Cat (26-dic-2011), cramercaba (26-dic-2011), GenuiWorld (26-dic-2011), Hunted (25-dic-2011), Orpheus96 (25-dic-2011)

25-dic-2011	#2
Hunted Erudito Ingreso: junio-2009 Ubicación: S.A. Mensajes: 2.952 Sexo: País: Signo: Agradecido: +6.875	Gracias!!! Conocimiento: Máximo Poder

Los siguientes 5 usuarios agradecen a Hunted por este mensaje:
baduser (26-dic-2011), cramercaba (26-dic-2011), GenuiWorld (26-dic-2011), Hectorsito20 (25-dic-2011), Orpheus96 (25-dic-2011)

Los siguientes 3 usuarios agradecen a Eloy58 por este mensaje:
cramercaba (26-dic-2011), Hectorsito20 (25-dic-2011), Orpheus96 (25-dic-2011)

Los siguientes 2 usuarios agradecen a Hectorsito20 por este mensaje:
cramercaba (26-dic-2011), Orpheus96 (25-dic-2011)

25-dic-2011	#6
Orpheus96 VIP ZONE Ingreso: enero-2010 Mensajes: 2.767 Sexo: País: Signo: Agradecido: +10.483	Muy Bueno !! y Feliz Navidad para ti támbien jojo =P Saludos!!

Usuarios que han agradecido este mensaje de Hectorsito20
cramercaba (26-dic-2011)

26-dic-2011	#8
cramercaba Erudito Ingreso: noviembre-2009 Mensajes: 9.213 Sexo: País: Agradecido: +11.824	La vida es lo que pasa mientras se instalan las actualizaciones de Windows

26-dic-2011	#9
VJEVans Erudito Ingreso: mayo-2010 Ubicación: Arequipa (Peru) Mensajes: 6.935 Sexo: País: Signo: Agradecido: +10.323	Exelente .. Gracias Hector