Google: efecto celeste en cuadro de busqueda

Virtualforos · #1 (**permalink**) 01/03/2012, 11:50

¿Cómo hace Google para poner el borde del cuadro de busqueda en celeste cuando uno escribe?
Por ejemplo
http://translate.google.com.ar/
http://maps.google.com.ar/
http://news.google.com.ar/

emprear · #2 (**permalink**) 01/03/2012, 12:05

No sé como lo hace google, pero lo podés hacer asi

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
 
<style type="text/css">
/*<![CDATA[*/
 
input {
border: solid 1px #828282;
}
 
input:focus{
border: solid 1px red;
outline: none;
}
 
/*]]>*/
</style>
</head>
 
<body>
<form action="#">
    <p>
    <input type="text" size="20" />
</p>
</form>
</body>
</html>

Saludos

Virtualforos · #3 (**permalink**) 02/03/2012, 16:52

Dos palabras, mag nifico!

trylogy_3000 · #4 (**permalink**) 02/03/2012, 18:14

hay una forma mas facil :

yo uso html5 y css3 y le da un efecto mas realista.

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#buscador{
border: solid 1px blue;
}
#buscador:focus{
border: solid 1px blue;
-webkit-box-shadow:0px 0px 10px blue; //-webkit- para chrome
-o-box-shadow:0px 0px 10px blue; //-o- para opera
-moz-box-shadow:0px 0px 10px blue; //-moz- para mozilla
box-shadow:0px 0px 10px blue; //para los que soportan css3
}
</style>
</head>
<body>
<form action="">
<input type="text" id="buscador" name="buscador">
</form>
</body>
</html>

si quieres que brille mas solo cambia el 10px por un numero mayor y si quieres que brille menos cambialo por un numero menor.
y si quieres que el brillo aparesca hacia abajo o hacia arriba cambia los 0px 0px.

emprear · #5 (**permalink**) 02/03/2012, 18:37

Cita:

Iniciado por trylogy_3000

hay una forma mas facil :

yo uso html5 y css3 y le da un efecto mas realista.

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#buscador{
border: solid 1px blue;
}
#buscador:focus{
border: solid 1px blue;
-webkit-box-shadow:0px 0px 10px blue; //-webkit- para chrome
-o-box-shadow:0px 0px 10px blue; //-o- para opera
-moz-box-shadow:0px 0px 10px blue; //-moz- para mozilla
box-shadow:0px 0px 10px blue; //para los que soportan css3
}
</style>
</head>
<body>
<form action="">
<input type="text" id="buscador" name="buscador">
</form>
</body>
</html>

si quieres que brille mas solo cambia el 10px por un numero mayor y si quieres que brille menos cambialo por un numero menor.
y si quieres que el brillo aparesca hacia abajo o hacia arriba cambia los 0px 0px.

Desde cuando css3 es exclusivo de html5 ?
Lindo ejemplo. pero no se atiene a lo preguntado por @Virtualforos
Sería interesante verlo funcionar en IE, Opera y Firefox, ya que solo lo hace en Chrome y Safari

Te sugiero probar tu código antes de presentarlo

trylogy_3000 · #6 (**permalink**) 02/03/2012, 18:49

lo siento es que soy nuevo en el foro y solo queria ayudar pero nunca dije que css3 fuera exclusivo de html5.
y si es compatible con mozilla es que me confundi al escribir el codigo, solo se escribe esto en vez del otro moz y listo -moz-box-shadow: inset 5em 1em gold;

emprear · #7 (**permalink**) 02/03/2012, 19:02

Cita:

Iniciado por trylogy_3000

lo siento es que soy nuevo en el foro y solo queria ayudar pero nunca dije que css3 fuera exclusivo de html5.
y si es compatible con mozilla es que me confundi al escribir el codigo, solo se escribe esto en vez del otro moz y listo -moz-box-shadow: inset 5em 1em gold;

Correcto, te hago algunas aclaraciones igualmente.
Si comienzas tu mensaje con

Cita:

yo uso html5 y css3

eso puede generar confusiones, podrías usar html4 + css3 y sería lo mismo, y si bien tu cambio en la sintáxis soluciona el error, el haberlo probado antes, evita una pérdida de tiempo al interesado (que para colmo de males,por ahi está usando Chrome, y dice "genial !!!", pero eso de poco serviría, ya que sus clientes pueden estar usando IE, o FF).
El primer objetivo de tus respuestas debe ser siempre el planteo original, y después hacer agregados si lo crees conveniente.
Estas prácticas mejorarán el funcionamiento del foro.

Un saludo

Virtualforos · #8 (**permalink**) 04/03/2012, 15:30

Cita:

Iniciado por trylogy_3000

hay una forma mas facil :

yo uso html5 y css3 y le da un efecto mas realista.

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#buscador{
border: solid 1px blue;
}
#buscador:focus{
border: solid 1px blue;
-webkit-box-shadow:0px 0px 10px blue; //-webkit- para chrome
-o-box-shadow:0px 0px 10px blue; //-o- para opera
-moz-box-shadow:0px 0px 10px blue; //-moz- para mozilla
box-shadow:0px 0px 10px blue; //para los que soportan css3
}
</style>
</head>
<body>
<form action="">
<input type="text" id="buscador" name="buscador">
</form>
</body>
</html>

si quieres que brille mas solo cambia el 10px por un numero mayor y si quieres que brille menos cambialo por un numero menor.
y si quieres que el brillo aparesca hacia abajo o hacia arriba cambia los 0px 0px.

Muchas gracias, yo valoro mucho la intención y la buena onda. Gracias.