Hola amigos.
Hoy les traigo un codigo Fabuloso que Seguro lo usaran en sus Web's.
El codigo que les traigo, es un Buscador de Usuarios de PWG, tambien les cuento que la Base del Codigo, fue creado por Luupa y editado por mi . Les cuento que lo pase de Css en css hasta que mas o menos quedo algo
VER VISTA PREVIA
Comenzemos.
Antes que nada, vamos a pegar el HTML
Cita: <div align="center"><!-- SG -->
<form id="formular" method="get" action="http://www.paginawebgratis.es/profile.php?" target="_blank" name="formular">
<input type="text" id="sbi" maxlength="155" size="35" name="of" /> <input type="submit" id="sbb" name="sbb" value="Buscar" />
</form>
</div>
donde queramos que aparezca el Buscador.
* No debemos Cambiar Nada de hay, solo lo que esta marcado en ROJO
Y Ahora pegaremos el Css
Cita: #formular
{
background: #eaf8fc;
background-image: -moz-linear-gradient(#fff, #d4e8ec);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
-moz-border-radius: 35px;
border-radius: 35px;
border-width: 1px;
border-style: solid;
border-color: #c4d9df #a4c3ca #83afb7;
width: 350px;
height: 35px;
padding: 10px;
margin: 100px auto 50px;
overflow: hidden;
}
#search, #submit
{
float: left;
}
#sbi
{
padding: 5px 9px;
height: 23px;
width: 200px;
border: 1px solid #a4c3ca;
font: normal 13px 'trebuchet MS', arial, helvetica;
background: #f1f1f1;
-moz-border-radius: 50px 3px 3px 50px;
border-radius: 50px 3px 3px 50px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
/* SBB */
#sbb
{
background: #6cbb6b;
background-image: -moz-linear-gradient(#95d788, #6cbb6b);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));
-moz-border-radius: 3px 50px 50px 3px;
border-radius: 3px 50px 50px 3px;
border-width: 1px;
border-style: solid;
border-color: #7eba7c #578e57 #447d43;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
height: 35px;
margin: 0 0 0 10px;
padding: 0;
width: 90px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #23441e;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
en Code css sin Stylo. Oh entre las Etiquetas
Cita: <style type="text/css">
AQUI EL CODIGO
</style>
Si lo deceamos pegar Por ensima de la Pagina o en el Editor Html
Y el resultado es
Saludos
BRIANPWG
Ultima edición por brianpwg el Mie Nov 21, 2012 4:45 pm; editado 2 veces
|