Sencilla y elegante caja de búsqueda con CSS para Blogger

  Escrito por Lautarorx            El 5 de octubre de 2012


Buscando alguna nueva opción de búsqueda para mi blog encontré un muy interesante cuadro de búsqueda en Red Team Design que tiene la ventaja de estar optimizado para todos los navegadores.
Una opción fácil de personalizar que soporta CSS3 y es fácil de adaptar a cualquier diseño de plantilla. Ahora vamos al tutorial para configurarlo correctamente:

PASO 1: HTML

Empezaremos por poner el código en donde deseamos que aparezca el formulario de búsqueda, puede ser en la sidebar con un gadget...Podemos editar lo que va a aparecer en el cuadro de búsqueda cambiando el texto que está en placeholder.

<form action='/search' id='cajadebusqueda' method='get'>
    <input id='ingresar' name='q' placeholder='Buscá en este blog' type='text'/>
    <input id='buscar' type='submit' value='Buscar'/>
</form>

PASO 2: CSS

Este es un esquema de las propiedades y a que parte afectan cada una:


Una vez aclarado esto procedemos a configurar cada uno de los sectores, ustedes copien y peguen el código antes de ]]></b:skin> y luego editenlo a su gusto:

#cajadebusqueda
{
 background: #eaf8fc;/* Color de fondo para navegadores que no soportan CSS3 */
 background-image: -moz-linear-gradient(#fff, #d4e8ec);/* Fondo en forma de gradiente en Firefox */
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));/* Fondo en forma de gradiente en Chrome y Safari */
 -moz-border-radius: 35px;/* Borde redondeado en Firefox */
 border-radius: 35px; /* Borde redondeado */
 border-width: 1px;/* Ancho del borde */
 border-style: solid; /* Estilo del borde */
 border-color: #c4d9df #a4c3ca #83afb7; /* Colores del borde */            
 width: 250px; /* Ancho de la caja de búsqueda */
 height: 35px; /* Alto de la caja de búsqueda */
 padding: 10px; 
 margin: 15px  10px; /* Márgenes */
 overflow: hidden; 
}  
#ingresar, #buscar
{
float: left;  /* Acomodar elementos hacia la izquierda */
}
#ingresar
{
padding: 5px 9px; 
height: 23px; /* Altura del cuadro de búsqueda */
width: 150px; /* Ancho del cuadro de búsqueda */
border: 1px solid #AEAEAE; /* Borde */
font: normal 13px 'trebuchet MS', arial, helvetica; 
background: #f1f1f1; /* Fondo del cuadro de búsqueda */
-moz-border-radius: 50px 3px 3px 50px; /* Borde redondeado en Firefox */
border-radius: 50px 3px 3px 50px; /* Borde redondeado */
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); /* Sombra interna en Firefox */
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); /* Sombra interna en Chrome y Safari */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); /* Sombra interna */
}
#buscar
{
background: #0B92E6; /* Color de fondo del botón de busqueda en navegadores que no soportan CSS3 */
background-image: -moz-linear-gradient(#0082E6, #05B6EC); /* Gradiente de fondo en Firefox */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #0082E6),color-stop(1, #05B6EC)); /* Gradeinte de fondo en Chrome y Safari */
-moz-border-radius: 3px 50px 50px 3px; /* Borde redondeado en Firefox */
border-radius: 3px 50px 50px 3px; /* Borde redondeado */
border-width: 1px; /* Ancho del borde */
border-style: solid; /* Estilo del borde */
border-color: #1164E8 #3072DC #0096C4; /* Colores del borde */ 
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; /* Sombra interior en Firefox */
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; /* Sombra interior en Chrome y Safari */
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; /* Sombra interior */
height: 35px; /* Altura del botón */
margin: 0 0 0 10px;
padding: 0; 
width: 70px; /* Ancho del botón */
cursor: pointer;
font: bold 14px Arial, Helvetica; /* Fuente de la letra */
color: #23441e; /* Color del texto */
text-shadow: 0 1px 0 rgba(255,255,255,0.5); /* Sombra del texto */
}
#buscar:hover 
{
background: #4297E6; /* Color al pasar el mouse del botón en navegadores que no soportan CSS3 */
background-image: -moz-linear-gradient(#05B6EC, #0082E6); /* Color del botón al pasar el mouse en Firefox  */ 
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #05B6EC),color-stop(1, #0082E6)); /* Color de fondo al pasar el mouse en Chrome y Safari */
}
#buscar:active
{
background: #60AEF7; /* Color del botón al presionar el mouse */
outline: none;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; /* Sombra del botón al hacer clic en Firefox */
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; /* Sombra del botón al hacer clic en Chrome y Safari */
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; /* Sombra del botón */
}
#buscar::-moz-focus-inner
{
border: 0;  /* Corrección de alineamiento en Firefox */
}
#ingresar::-webkit-input-placeholder {
color: #9c9c9c; /* Color del texto del cuadro de búsqueda en Chrome y Safari */
font-style: italic;
}
#ingresar:-moz-placeholder {
color: #9c9c9c; /* Color del texto del cuadro de búsqueda en Firefox */
font-style: italic;
}
#ingresar:-ms-placeholder {
color: #9c9c9c; /* Color del texto del cuadro de búsqueda en Internet Explorer */
font-style: italic;
}
#ingresar.placeholder {
color: #9c9c9c !important; /* Color del texto del cuadro de búsqueda en navegadores que no soportan este atributo */
font-style: italic;
}

PASO 3: MODERNIZR

Modernizr es una librería de Javascript para que los navegadores que no soportan CSS3 lo hagan mediantes scripts. Peguen el siguiente código justo después de <head>.
<script src='http://www.lautarorx.tk/modernizr.custom.18271.js' type='text/javascript'/>
También pueden descargar este archivo tal como está y simplemente subirlo a su cuenta de Dropbox si no quieren tener problemas con el script en el futuro...

PASO 4: JAVASCRIPT

Ahora usaremos la librería anterior para ejecutar el código que permitirá soportar el placeholder aún en aquellos navegadores antiguos u obsoletos como nuestro querido Internet Explorer. Hay que pegar esto justo antes de </head>.
<script>

$(document).ready(function() {          
    if (!Modernizr.input.placeholder)
    {       
        var placeholderText = $(&#39;#search&#39;).attr(&#39;placeholder&#39;);
       
        $(&#39;#ingresar&#39;).attr(&#39;value&#39;,placeholderText);
        $(&#39;#ingresar&#39;).addClass(&#39;placeholder&#39;);
       
        $(&#39;#ingresar&#39;).focus(function() {               
            if( ($(&#39;#ingresar&#39;).val() == placeholderText) )
            {
                $(&#39;#ingresar&#39;).attr(&#39;value&#39;,&#39;&#39;);
                $(&#39;#ingresar&#39;).removeClass(&#39;placeholder&#39;);
            }
        });
       
        $(&#39;#ingresar&#39;).blur(function() {               
            if ( ($(&#39;#search&#39;).val() == placeholderText) || (($(&#39;#search&#39;).val() == &#39;&#39;)) )                     
            {   
                $(&#39;#ingresar&#39;).addClass(&#39;placeholder&#39;);                     
                $(&#39;#ingresar&#39;).attr(&#39;value&#39;,placeholderText);
            }
        });
    }               
});

</script>
Fuente | How to create a cool and usable CSS3 search box


El contendio de esta entrada esta protegido bajo Derechos de Autor y leyes de Copyright. Su reproducción PARCIAL O TOTAL sin mencionar la fuente esta penada por la Ley 11.723 y la DMCA vigente en EE.UU. Todo el contenido está bajo licencia de Creative Commons.

Related Posts Plugin for WordPress, Blogger...


New Games + Hacks | Diseñado por Lautaro Rodríguez Xavier

© Informatics 2011-2012 | Se recomienda el uso de Mozilla Firefox