JMiur [E]

Esto de tener que usar jQuery para todo, a mi no me convence. Será la nueva moda pero me gusta llevar la contra y buscar alternativas porque las librerías de scripts son cómodas pero, ya se sabe que el sedentarismo no es bueno así que siempre es mejor encontrar variantes o por lo menos, intentarlo.

En este caso se trata de Autogrow search, una forma de crear una etiqueta INPUT que es la que se utiliza en los buscadores para ingresar el texto y que tiene la característica de ampliarse y modificar otros detalles gráficos cuando se activa.

Evidentemente, la animación sin librerías externas es limitada pero, algo es algo y de este modo, no requerimos agregar scripts de ninguna clase ya que todo se hace con CSS.


El HTML es el que va donde se nos ocurra mostrarlo y sería algo así:
<div id="wrap-search">
<div id="search">
  <form class="form-search" method="get" action="/search" target="_blank">
    <input src="URL_IMAGEN" type="image"/>
    <input type="text" name="q" value="buscar" onfocus="this.value='';" onblur="this.value='buscar';" onmouseover="this.value='';" onmouseout="this.value='buscar';" />
    </form>
  </div>
</div>
En un DIV al que identificamos como wrap-search, colocamos otro llamado search; esta duplicación es la que nos permite crear un diseño gráfico diferente ya que hay dos rectángulos que ocupan el mismo espacio y a los que podemos aplicar propiedades distintas.

El contenido es una etiqueta FORM cuyo atributo action nos permite ver los resultados dentro del mismo sitio y el atributo target los abrirá en una nueva pestaña.

En una etiqueta INPUT de tipo IMAGE, colocamos una imagen que será la que funcionará como botón. Al hacer click en ella, se ejecutará el formulario.

En otra etiqueta INPUT de tipo TEXT, es donde se escribe el texto a buscar.

El CSS es la clave de todo y usa la propiedad transition para generar la animación que, por supuesto, no será visible en Internet Explorer así como algunas de las otras propiedades pero, de todas maneras, será totalmente funcional.
<style>
  #wrap-search {
    margin: 0 auto;
    width: 100px;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
  }
  #wrap-search br { display: none; }
  #wrap-search #search {
    background: -moz-linear-gradient(center bottom , #9B9B9B 0%, #A9A9A9 50%, #CACACA 50%, #D3D3D3 2550%);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #9B9B9B),color-stop(0.5, #A9A9A9),color-stop(0.5,  #CACACA),color-stop(25.5, #D3D3D3));
     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9B9B9B', EndColorStr='#CACACA');
    border-radius: 5px;
    padding: 4px;
  }
  #wrap-search:hover { width:200px; }
  .form-search {
    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#EBEBEB), to(#BCBCBC));
    background: -moz-linear-gradient(-90deg, #BCBCBC, #EBEBEB);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EBEBEB', EndColorStr='#BCBCBC');
    border: 1px solid #747474;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px #575555, 0 1px 0 #FFF;
    height: 32px;
    position: relative;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
  }
  .form-search input[type='text'] {
    background: none;
    border: none;
    color:#6E7074;
    height: 34px;
    line-height: 34px;
    padding: 0 27px 0 6px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    text-shadow: 0 1px 0 #FFF;
  }
  #wrap-search:hover input[type='text'] { color:#597C84; }
  #wrap-search:hover .form-search {
    background: -moz-linear-gradient(-90deg, #9CC2CA, #DFECEF);
    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#DFECEF), to(#9CC2CA));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#DFECEF', EndColorStr='#9CC2CA');
    box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;
    color: #25464D;
  }
  .form-search input[type='image'] {
    height: 32px;
    opacity: .5;
    filter:alpha(opacity=50);
    position: absolute;
    right: 0px;
    top: 0px;
    width: 32px;
  }
  .form-search input[type='image']:hover {
    opacity: 1;
    filter:alpha(opacity=100);
  }
</style>

17 comentarios:

Sri Kanha  

Se puede cambiar las caracteristicas del reproductor de YAHOO Media Player.

Otra Pregunta:

Puedes explicar el lightwindow que es muy largo y está dividido en varios apartados:

Puedes decir algo de esto.

Responder
Sri Kanha  

Explica el:

lightwindow de vagabundia y sus apartados.

Se puede cambiar YAHOO MEDIA PLAYER, color dimensiones.

Saludos.
Juan

Responder
ZenXVI  

Hola Jmiur,
Hablando de buscar efectos, perdona si mi duda está un poco desubicada, estoy buscando un código para personalizar los comentarios del autor del blog (en este caso, yo) del resto. Di con varios, entre ellos el tuyo, pero ninguno me "pilla" la parte del nombre, similar a como tu lo tienes y siempre me dejan una separación blanca entre el "ZenXVI dijo..." y el contenido del comentario, aunque he logrado configurar sus colores por separado.

¿Sabes si existe alguno que lo haga, o que parte del CSS tendría que tocar?

Un saludo, y gracias :)

Responder
Retube  

Lo acabo de poner en Retube Videos y el efecto que me hace es el contrario. Empieza espandido y cuando situamos el raton encima se hace mas pequeño.

Otra cosilla que me pasa es que los resultados de busqueda que me da no son correctos ¿ Sabes por que puede ser?

Saludos y Gracias por tu excellente trabajo :)

Responder
JMiur  

Sri Kanha:
Sobre Lightwindow, no puedo agregar más que lo publicado. Si Yahoo Media Player puede ser personalizado, lo desconozco. Esos detalles dependen de las opciones que de Yahoo en si mismo.

ZenXVI:
Tendría que ver tu ejemplo concreto para intentar responderte.

Retube:
El CSS se ejecuta de manera deficiente proque estás colocando una etiqueta STYLE dentro de <b:skin> </b:skin>; Si colocas reglas de estilo en ese lugar, debes quitar el <style> y el </style> porque son inneesarios ya que <b:skin> </b:skin> es equivalente a </style>

En cuanto a los resultados, eso nada tiene que ver con el efecto que es puramente gráfico. Qué cosa busca y qué cosa encuentra, depende del buscador en si mismo y eso es definido por el atributo action de la etiqueta FORM; la forma de mostrarlo o el tipo de botón, etc, etc, sólo son aspectos estéticos que en nada influyen en los resultados obtenidos.

Responder
JMiur  

La misma respuesta auqnue n osé cual es tu ejemplo.

Si está expandido es que no se está aplicando la regla de estilo: #wrap-search {width: 100px;.}

Responder
Retube  

Muchas gracias por tu respuesta.

Voy a hacer pruebas y te digo algo.

Saludos

Responder
Retube  

¿Os funciona bien el buscador? A nosotros no muestra unos resultados rarisimos :S ¿ Hay alguna forma para solucionarlo ?

Responder
JMiur  

Como te dije antes, los resultados que muestra un buscador nada tienen qiue ver con su diseño gráfico sino con el método que está agregado en el atributo action y ese que muestra el ejemplo, es el normal de Blogger que genera una URL de este tipo:

http://nombresitio.blogspot.com/search?q=palabras

que es similar a los resultados mostrados con una URL de este tipo:

http://www.google.com/search?tbm=blg&q=palabras+blogurl:nombresitio.blogspot.com/

Dos ejemplos:
http://vagabundia.blogspot.com/search?q=buscador
http://www.google.com/search?tbm=blg&q=buscador+blogurl:vagabundia.blogspot.com/

Responder
ire1989  

Wow! Que buen buscador! Muchas gracias por el tip ^^!

Responder
Retube  

Me quedo claro que el diseño no tiene nada que ver con que funcione bien. Pero tb sigo sin entender por que no nos muestra los resultados bien :S

Sera cosa de mi tamplate?

Responder
Retube  

¿ Se podria hacer que este buscador abra directamnte otra pagina con los resultados en google como muestras en el segundo ejemplo ? Asi por lo menos el que busque un termino podra acceder todos los resultados :S

Responder
JMiur  

El esquema básico para ese tip ode buscador es este:

<form name="b-search" action="http://search.blogger.com/">
<input type="hidden" name="ie" value="UTF-8" />
<input type="hidden" name="ui" value="blg" />
<input type="hidden" name="bl_url" value="http://nombreblog.blogspot.com/" />
<input type="text" id="b-query" name="as_q" />
<input value="BUSCAR" type="submit"/>
</form>

Responder
Retube  

Gracias por el dato, pero sigo sin conseguir que el buscador expandible me habra una ventana con los resultados de google? ¿ Que tengo que cambiar en el codigo ?

Responder
JMiur  

Cambias la etiqueta FORM:

<form class="form-search" name="b-search" action="http://search.blogger.com/" target="_blank">

Agregas los campos ocultos:

<input type="hidden" name="ie" value="UTF-8" />
<input type="hidden" name="ui" value="blg" />
<input type="hidden" name="bl_url" value="http://nombreblo.blogspot.com/" />

Agregas al INPUT type="text" los atributos que faltan como el ID.

Responder
Retube  

Gracias por la info, en un rato lo pruebo a ver si sale jeje :)

Responder
Retube  

NO se qu hago mal que no me sale :(

Asi lo puse, pero nada :(


Queria pegrte aqui el codigo que intento que vaya pero no me deja :s

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR