Bonita caja de búsqueda con CSS3

Son miles las maravillas que podemos hacer con CSS3. Se ha creado una bonita caja de búsqueda realizada con CSS3, aplicando degradados con CSS Gradient, creando círculos redondeados con border-radius y aplicando sombra inferior con box-shadow inset.

Ahora vamos a comprobar como se crea cada elemento que forma parte de la caja de búsqueda.

Círculo redondeado

Puedes crear un círculo dando un valor muy alto a la propiedad border-radius, el ejemplo usa 100 px.

Efecto de sombra interior

Especificando el valor inset podemos crear sombra interior en una caja. Esta característica sólo está soportada, por ahora, en Google Chrome 4+ y Firefox 3.5.

Ejemplo de la caja de búsqueda

Unidas las 3 características anteriores, más CSS gradient para realizar un degradado en la parte de fuera de la caja de búsqueda, crearemos un sencillo buscador estilizado con CSS3. Para los navegador que no soporten CSS3, la caja se mostrará con forma cuadrada en todos los elementos que contiene y sin efecto de degradado.

El código HTML sería así:

El código CSS:

Ver el ejemplo de caja de búsqueda en CSS3
Descargar el ejemplo de caja de búsqueda en CSS3

Una lista de 10 hacks para CSS, que nos pueden servir alguna vez.
1) Mejorar el escalado y resampleado de las imágenes en Internet Explorer
En IE 7 la propiedad de escalado por el método bicubic está desactivada y debemos activarla por CSS:

-ms-interpolation-mode sirva para especificar el método de resampleado de imágenes del navegador.

2) Añadir opacidad a Internet Explorer 8
Con IE 8 todavía no sabemos si puede soportar opacity, así que usaremos este hack:

3) Internet Explorer solo soporta 32 hojas de estilo
Hay que tenerlo en cuenta, Internet Explorer solo puede soportar 32 hojas de estilo, ya sea mediante o @import url;, si te pasas, las que añadas no serán procesadas.

4) Cargando en CSS no obstructivo
Podremos especificar una imagen de fondo mientras se están cargando nuestras imágenes, en CSS:

5) Distingir entre Google Chrome y Safari con CSS
Pese a que los dos utilizan el motor renderizado Webkit, podremos saber distinguir cúal de los dos navegadores se están utilizando gracias a este hack en CSS:

6) Resetear las transperencias de los hijos de padres transparentes en Internet Explorer
Si no deseamos que los hijos de un contenedor transparente absorban también la transparencia, deberemos utilizar este hack:

8 ) Emular border-color: transparent en Internet Explorer 6
En Internet Explorer 6 border-color: transparent no está soportada (En IE 7 sí), pero podremos emularlo por este hack:

9) Exótico hack CSS para Internet Explorer
Aviso, este código hace que no se valide el CSS, pero algunas veces no queda más remedio que usarlo:

10) Marca de agua en CSS
Una marca de agua nos añade un texto encima de una imagen, con este hack podremos hacer algo parecido, pero no solucionaría los problemas de copia de contenido, ya que el texto no lo añade a la imagen.

¿Cuántas veces has heredado un proyecto de otra persona, para descubrir que el código es un desastre y no entiendes nada? Cada uno tiene su manera de escribir código, pero esto tiene serios inconvenientes a la hora de compartir proyectos, puesto que aunque nosotros lo entendamos, puede que nuestro código sea ininteligible para los demás.

En esta serie de artículos, te propondremos unas pautas y buenas prácticas de escritura css, que ayudarán a que tu código sea entendido por otros desarrolladores y por ti mismo. De esta manera evitarás incoherencias y redundancias que agilizarán el desarrollo en equipo y evitarán la duplicación de esfuerzos.

Tener una buena organización es la base de una buena CSS. Documentar el código con comentarios te ayudará a ti y a futuros desarrolladores, a comprender y explorar el CSS más rápidamente. En este primer artículo veremos varias maneras de usar los comentarios para organizar mejor tu código.

Comentarios de organización
Antes de empezar a escribir los estilos, es recomendable definir la organización del documento CSS según las diferentes secciones de la página web que estemos desarrollando. Puedes añadir comentarios indicando donde irán los estilos para cada sección, por ejemplo:

En la sección “Estilos globales” pondremos los estilos genéricos, como los de encabezado, párrafos, listas, enlaces, tablas, elementos de formularios etc…

Al mantener estos estilos genéricos en la parte superior de mi archivo CSS, podremos sacar provecho de la cascada.

Aunque pueda parecer excesivo, en sitios web muy grandes, puede resultar útil añadir un segundo nivel de comentarios en cada sección. De esta manera, podríamos subdividir el comentario de estilos globales así:

El formato utilizado para estos comentarios depende de ti. La clave consiste en definir el formato que prefieras de manera coherente, para que cualquiera pueda usarlo.

Comentarios de Comunicación
Hemos echado un vistazo a los comentarios usados para la organización de la css, pero también se pueden utilizar para comunicar información importante sobre el proyecto a tus compañeros o incluso para a ti mismo, por ejemplo:

La información del título es útil cuando se trabaja con varias hojas de estilo. La información sobre el autor permite a todos los miembros del equipo para saber a quién acudir si tiene alguna pregunta sobre el CSS original, mientras que la información actualizada permite saber cuándo se produjo la última actualización y quien lo hizo. Recuerda que aunque los navegadores no renderizan los comentarios, su contenido se envía junto con el resto de estilos, por lo que no se debe incluir ninguna información sensible o confidencial.

Comentarios de desarrollo y depuración
Hay ocasiones en que te asignan un trabajo que ha empezado un compañero y te preguntas, ¿porqué lo ha hecho de esta manera?, o ¿dónde esta la clase que necesito?. Los comentarios también pueden ayudar en estas situaciones.

En un comentario puedes indicar que un bloque css no está terminado o que te has trabado y no sabes como terminarlo. De esta manera ahorrarás tiempo y dolores de cabeza a tus compañeros, por ejemplo:

Ten en cuenta, que una vez que hayas terminado con el desarrollo, estos comentarios pierden su utilidad y sólo aumentarán el tamaño de tu archivo. Por lo tanto una vez terminado tu proyecto es recomendable eliminarlos.

Clave de color
También podremos utilizar los comentarios para crear una clave de color donde definiremos la paleta de colores para el sitio web. Esto es particularmente útil durante la fase de desarrollo, ahorrando así tiempo de muestreo de colores. ¿Necesitas saber el valor hexadecimal de enlaces azules de nuestra web?, míralo en la clave, solo tendrás que copiar y pegar. Puedes agrupar la clave en una sola línea, o dividirlas en varias líneas. De nuevo, el objetivo es encontrar el formato que mejor se adapte a nuestras necesidades y ser coherente una vez lo hayamos definido:

Una de las cosas más frustrantes de heredar un proyecto de otra persona, es cuando las convenciones de nomenclatura para clases e identificadores no tienen ningún sentido. Esto puede dificultar una actualización o un rediseño y puede hacernos perder mucho tiempo. En este artículo te daremos algunos consejos sobre cómo nombrar a las clases e identificadores de tus proyectos, de manera que sean fácilmente entendibles por otros desarrolladores.

Algunos ejemplo
Imagínate que te encuentras con el siguiente código:

Si nos encontramos con un código como este, seguramente perderemos mucho tiempo tratando de localizar estas clases e intentando averiguar cual es su función. Cuando nos enfrentemos a un rediseño, es muy posible que un elemento como class=”izquierda” termine arriba, abajo o a la derecha y por tanto ese nombre de clase no tenga ninguna relación con el nuevo diseño.

Por lo tanto si por class=”izquierda” nos referimos a un menú situado a la izquierda, usemos mejor class=”menu-navegacion”. En cuanto a la clase f18, no tenemos ni la más remota idea de a que hace referencia, por lo que es mejor que el desarrollador nombre a esa clase según la función que cumpla. De este modo esta nomenclatura sería mucho más inteligible:

Pero más allá del contexto, las convenciones de nomenclatura semántica son útiles para ahorrar tiempo. Por ejemplo, si asigno la clase “Caja-azul” a un cuadro de ayuda en un sitio cuyo color corporativo es azul y la empresa cambia su color corporativo a rojo. Caja-azul no significará nada en este nuevo contexto.

En ese caso no sólo tendrás que actualizar el valor hexadecimal de ese estilo, sino que tendrás que cambiar todas las referencias a ese color. Si hubieras usado en su lugar la clase “llamada” (o algo igualmente significativo), te podrías haber ahorrado mucho trabajo.

Consejos para mejorar la nomenclatura de nuestros css
• El nombre de nuestras clases e identificadores no debe describir una característica visual, como color, tamaño o posición. Tampoco debe describir una función o comportamiento.
• El nombre debe ser específico y claro, para que otras personas puedan entender su significado.
• Si después de todo, crees que es imprescindible definir una clase única y exclusivamente para alinear una imagen o un párrafo y llamarla con esa acción, documéntalo apropiadamente, para que los otros desarrolladores tengan problemas en el futuro.
• Separa las palabras mediante guiones o mayúsculas. Por ejemplo menu-superior o menuSuperior.
• En todo caso, es mejor no hacer uso excesivo de clases, porque a menudo es más sencillo utilizar selectores contextuales o una combinación de selectores que no alteren el HTML.

[b]En conclusión
Las clases e identificadores deberían llamarse según la función o contenido que describen y de manera independiente respecto a factores de presentación[b]. De este modo, cuando actualicemos un sitio, no tendremos que preocuparemos en cambiar todos los nombres cada vez que modifiquemos el diseño, sino simplemente cambiar las propiedades que nos hagan falta.

Los links del tipo "ancla" <a> muestran por defecto una línea punteada cuando están activos o "en foco". En Firefox la línea toma el color del texto mientras que en otros navegadores o versiones directamente se muestra en color gris.

Esto no es una locura, por cuestiones de accesibilidad se muestra qué link está activo (piensa en personas que no puedan acceder a un sitio con una computadora con mouse. Presionando "tab" se desplazarán por los enlaces. Pero si te molesta ver esa línea en tu sitio por cuestión de estética o diseño, puedes seguir leyendo para enterarte cómo eliminarla.

Aquí puedes ver un ejemplo de cómo se ve la línea punteada de la que te hablo.

Prueba hacer clic en un enlace cualquiera, aquí mismo, pero deja el botón del mouse presionado unos segundos. Podrás ver la línea "en vivo y en directo".

Quitarla por medio de CSS es muy sencillo:

Pero no te olvides de la accesibilidad. Deberías crear un estilo para reemplazar esa línea molesta. Yo suelo usar el mismo que en "hover".

Por ejemplo:

¡Anímate a personalizar tu blog!

¿Tienes curiosidad por aprender a realizar logotipos en CSS como el de Internet Explorer u Opera, entre otros? En este post explicaré como crear un logotipo con CSS, teniendo como fuente de inspiración el logotipo que asocio a la entrada. Se resumen en varios pasos, bastante sencillos, que dan como resultado un logotipo muy interesante realizado en CSS.

Código HTML
Empezaremos con esta estructura:

Ver ejemplo.

Estilos generales
Los estilos generales son muy sencillos:

Hemos definido el tipo y el tamaño de la fuente del logotipo además del color del texto y el color del fondo.

Ver el ejemplo.

Posicionamientos y dimensiones
Ahora indicaremos la posición y dimensiones de los elementos:

Ver ejemplo.

Para posicionar el elemento hijo del encabezado h1, usaremos la propiedad float. La altura de este encabezado equivale a la altura de la imagen de fondo que vamos a insertar. El hijo del encabezado h1 (span) tendrá la misma altura que su padre.

Insertando la imagen de fondo
La imagen de fondo se incluirá de esta forma:

Ver ejemplo.

Las dimensiones de el elemento #img equivalen a las dimensiones de la imagen de fondo.

Definiendo el tamaño de la fuente y el color
Ahora podremos escribir el tamaño y el color del elemento hijo del encabezado h1.

Ver el ejemplo.

Hemos usado píxeles para tener un control más preciso sobre el tamaño. En estos tamaños podemos usar píxeles mejor en vez de ems.

El subtítulo
El subtítulo (elemento h2) tiene el siguiente estilo:

Ver el ejemplo.

Como la imagen de fondo debe cubrir únicamente el área de texto y no todo el bloque contenedor, convertiremos el elemento a un elemento en línea. Después crearemos un espacio vertical usando la propiedad position con un desplazamiento vertical de 10 px.

Finalmente alinearemos verticalmente el texto del elemento h1 con la línea de la imagen de fondo. Para ello deberemos insertar lo siguiente:

Ver el ejemplo final

Hemos usado la posición relativa pero ahora con un desplazamiento vertical de 15 píxeles. Puede ser interesante también que veas estos dos ejemplos: Ejemplo 1. Ejemplo 2.

El famoso hack clearfix, o "hack de limpieza fácil", es un método útil para quitar floats. Si bien el hack original funciona bien, los navegadores a los que apunta son obsoletos o ya se han quedado en el camino.

Es por eso que en esta nota le decimos adiós al clearfix original y les traemos un nuevo método clearfix mejorado. ¿Están preparados?
El hack Clearfix original luce así:

Si, es feo, pero funciona muy bien a la hora de permitirle a los diseñadores quitar floats sin ocultar el desbordamiento y establecer un ancho.
La lógica detrás de este método funciona de esta manera:

• Obtiene los navegadores compatibles con el primer bloque de declaraciones (si todos los navegadores fueran compatibles de forma estándar, esto sería lo único que se necesitaría) y crea un bloque de limpieza oculto después del contenido del elemento objetivo.
• La segunda declaración aplica una propiedad de mostrar inline-table, exclusivamente para el beneficio de IE/Mac.
• En este punto, utilizamos el hack comment-backslash para esconder el recordatorio de las reglas de IE/Mac. Esto nos permite hacer lo siguiente:
• Aplicar una altura de 1% sólo a IE6 para activar hasLayout (que se requiere para que el hack funcione)
• Re-aplicar display:block a todo excepto a IE/Mac

Como pueden ver, esto es demasiado alboroto para un explorador que ha estado muerto por lo menos durante los últimos tres o cuatro años. Ya nadie usa el IE /Mac, así que es momento de bajarse del clearfix hack. El resultado es un CSS mucho más limpio y más eficiente:

Tengan en cuenta que hemos mejorado la clearfix hack añadiendo soporte para IE7. Ni IE6 ni IE7 soportan la pseudo-clase :after utilizada en la primera declaración, así que necesitamos un método alternativo para la aplicación de clearfix. Afortunadamente, aplicando zoom: 1 a cualquiera de los navegadores activa el mecanismo hasLayout propietario de IE, que funciona muy bien para borrar el float. Esto lo logramos con un par de selectores válidos específicos de estos navegadores, pero deben tener en cuenta que los “comentarios condicionales” son el método recomendado para hacer esto.

Afortunadamente, IE8 soporta la pseudo-clase :after, por lo que este nuevo método se volverá todavía más simple, eventualmente, cuando IE6 y 7 desaparezcan.

En resumen, el nuevo método clearfix aplica reglas de limpieza para los navegadores compatibles utilizando la pseudo-classe :after. Para IE6 e IE7, el nuevo método clearfix activa hasLayout con algo de CSS. Por lo que, el nuevo método Clearfix elimina de forma efectiva floats en todos los navegadores más comúnmente usados sin la necesidad de utilizar hacks.

Este es un ejemplo de como realizar búsquedas de palabras dentro de cajas de texto haciendo uso de Expresiones Regulares de Actionscript 3.

Lo primero que haremos es crear un patrón con los caracteres de texto que queremos seleccionar. En este caso le indicaremos la palabra desde un TextInput

Este patrón nos encontrará la primera cadena de texto que coincida con los caracteres introducidos en el campo de texto. Si al patrón le añadimos el indicador g (global) hará que nos encuentre no solo la primera coincidencia sino todas las que haya en el texto. También le añadiremos el indicador i (ignoreCase) para que no haga distinción entre mayúsculas y minúsculas.

Ahora tendremos que solucionar el detalle de que nos encuentre palabras y no caracteres dentro de otras palabras. Es decir, si buscamos la palabra "mi" no queremos que nos la seleccione dentro de "camino". Para ello utilizaremos grupos de búsqueda. Indicaremos que solo nos interesa cuando despues de la coincidencia haya un espacio, un punto o una coma. Y por el otro lado indicaremos que haya un espacio o que sea inicio de párrafo.

Utilizando este patrón dentro del método match() de la clase String podremos recuperar todas la concordancias que haya en el texto.

Ahora haremos que las palabras encontradas queden resaltadas en negrita, color rojo y subrayado. Para ello empezaremos escribiendo un estilo CSS, y asignándolo al campo de texto.

Con el método replace() de la clase String sustituiremos el contenido del patrón por un String que nos añadirá el tag que asignará el estilo CSS a la palabra. Como en el patrón hemos indicado que nos seleccione la palabra junto a los espacios en blanco o los puntos y comas, deberemos utilizar otro patrón que solo seleccione los caracteres de texto introducidos en el TextInput. Este segundo patrón lo colocaremos dentro de una función recursiva.

Ý listo, ya tenemos el ejemplo montado (hay colocar una palabra en el TextInput y darle al botón):

Este es el código completo:

Y aquí el archivo .FLA para descargar. (archivo CS4)

Es posible que en algún momento te hayas encontrado con la necesidad de aplicar múltiples bordes a un mismo elemento. Una de los métodos con los que puedes lograr ésto es utilizando CSS.

El truco que describiremos a continuación te permitirá generar este efecto, incluso sin utilizar ninguna imagen, explotando el poder de los seudo elementos :before y :after.

El elemento que portará los múltiples bordes, en primer lugar debe contar con su propio borde y position:relative.

Ahora podemos proceder a añadirle un segundo borde, para el cual utilizaremos la seudo clase :before. Se debe configurar con position: absolute y generando un recuadro, para lo que asignaremos valores a todos los lados (usando top, left, bottom y right). Esto a su vez tendrá un borde y se mantendrá entre el content (preservando, por ejemplo, la posibilidad de seleccionar el texto y de cliquear los enlaces) al darle un valor negativo a z-index.

¿Colocamos un tercer borde? Puedes hacerlo utilizando el seudo elemento :after.

Para terminar, y a modo de nota extra, tengan en cuenta que Firefox 3 no soporta correctamente :after ni :before, ya que no le permite estar posicionado en forma absoluta (es decir, utilizando position:absolute). Esto fue corregido en posteriores versiones del navegador.