Es un método excelente para reflejar imágenes vía javascript sin necesidad de tener que editar de usar imágenes adicionales o editar la imagen en photoshop (o el programa que sea). Es muy simple de aplicar. reflection.js fue desarrollado por Cow”s Blog. En este link está el post de Cow y en este otro, la explicación de cómo funciona y de cómo se aplica (en inglés).

Reflection.js 1.0 allows you to add reflections to images on your webpages. It uses unobtrusive javascript to keep your code clean. It works in all the major browsers – Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it”ll degrade and your visitors won”t notice a thing. Best of all, it”s under 4KB.

Y la verdad es que es muy simple de aplicar, consiste en guardar el archivo reflection.js en tu carpeta de scripts (o donde sea que uno los guarde) y después aplicar a la imagen que se quiera reflejar class="reflect" en el mismo tag de la imagen. También se le pueden especificar color de background. Acá va un ejemplo:

Y acá va el código que usé para que sea vea lo de arriba:

Bookmarkealo

Post publicado en el 2006

El problema:

El cliente querí­a que el menú de su sitio web (por cierto un diseño minimalista bastante bueno, hecho por Gabriel) ocupe la totalidad del ancho de la página. Esto implicaba que debia ajustarse a todas las resoluciones. Y por supuesto, debí­a funcionar bien en todos los browsers. Entonces lo primero que se nos ocurre probar con las listas, el clásico ul. No funcionó. Estuvimos buscando en bocha de lugares, pero no hubo caso. Sólo encontramos soluciones parciales al problema. Cuando lográbamos hacerlo andar en firefox, no andaba en IE y viceversa. Asi que, bueno… tuvimos que pensar en otra solución…

La solución

Es realmente simple: primero hacer un div que englobe los elementos. Cada ítem que lleva el menú no lo haremos usando el tag ul, sino que deberán ser puestos en un div por cada uno. Así debería quedar el HTML:

Se ve fácil, no? Muajajajaja… no, en serio, la parte del CSS es también muy simple: al div que contiene los ítems, al que nosotros llamamos nav, debemos especificarle mediante la propiedad width que ocupe el 100%. Luego debemos definir los divs que están dentro del div nav: debemos aplicar el float:left para que los elementos se alinéen a la izquierda uno al lado del otro y acá viene lo más importante y a la vez la gran falencia de este método: a la propiedad width debemos ponerla en el porcentaje relativo a la cantidad de ítems de la lista, esto hace por ejemplo, que no se pueda usar para generar ítems dinámicamente. Para que se entienda mejor: si tenemos 5 ítems en la lista, entonces el width para cada uno será de 20%. Otra falla que tiene es que si a ese ítem le queremos añadir margin, padding o border, debemos también ajustar el width para que no se nos desacomode.
Énigüei, es algo simple y sirve si ya está definida la cantidad de ítems y sea un sitio estático. Aunque ahora que me pongo a pensar sí se puede hacerlo de manera dinámica! Y ahi una cosita más: como siempre el fáquin IE necesita un poquito de hacks!!! Acá va el código CSS:

Bueno, espero que sirva, si alguien conoce una solución mejor, por favor que me la haga saber.

Bookmarkealo

Post publicado en el 2006

Cameron Olthuis en su blog hace un top 10 de tutoriales CSS. Coincido casi al 100%. Por supuesto, por ahi uno haría algunos cambios de orden o aparecerían otros sitios, pero quería respetar la decisión del autor y dejé la lista tal como está en el post original. Bueno, acá va la lista:

1. Hoverbox Image Gallery: Linda galería de imágenes hechas solamente con CSS.
2. CSS Bar graphic: Si para mostrar los resultados de una encuesta te enredabas con imágenes en distintas proporciones, ahora con un poco de CSS ya lo tenés resuelto muy fácil.
3. CSS Vertical Menus: Una lista con muchos menúes verticales libres para usar.
4. Listamatic: colección de menúes tanto verticales, horizontales o experimentales. Muy recomendable, me ha sacado de apuros en más de una ocasión.
5. Floatutorial: Excelente colección de modos de uso de la propiedad float
6. Rounded Corners:
7. 40 CSS Layouts: como su nombre lo indica, un compendio de 40 layouts.
8. CSS Photo gallery: otro tutorial como el que está en el primer lugar de este top 10, pero un poco más complicado
9. CSS Drop Shadows: sombras tras las imágenes muy bien logrado
10. Style Sheet Switcher: para cambiar el estilo de una página

Y bueno, no pude dejar de caer en la tentación de poner algunos a los que yo considero que deben estar en el top 10:

• BBMD Nice Forms
• Text Tricks
• CSS Image Maps
• CSS Play (acá siempre están experimentando)

Bookmarkealo

Post publicado hace muuuucho

Mi admirado Vitaly Friedman, que ya dio un inmensísimo aporte a la comunidad de los webdevelopers con su manual para el derrollador web y sus bookmarks esenciales para el desarrollador web, escribió un artículo bastante interesante sobre cuáles son las reglas a tener en cuenta para desarrollar una web exitosa. Ojo, esto no significa que sea algo absoluto y único que si no lo cumplís te puede causar el mismo efecto que comer una sandía y tomar vino y esas cosas, pero es una muy buena guía para tener en cuenta. Como pequeño aporte que hago, traduzco los tí­tulos de estas reglas… a la explicación de cada uno se la van a tener que bancar en el idioma de Shakespeare, que está aquí. La lista es la siguiente (y la traducción no es del todo literal, pero ayuda):

1. Respetá a tus visitantes. No les obligues a leer determinado contenido, dejá que naveguen libremente.
2. La mala publicidad (es decir mal diseñada o fuera de lugar) es pésima. Capaz que con un banner chillón captás la atención, pero después te van a odiar por eso.
3. Informá y enseñá a tus visitantes. Compartí tus ideas, experiencias, etc. de esa manera vas a obtener a la larga que mucha gente se entere de quién sos y qué ofrecés
4. Desarrollá tu propio estilo. Desarrollá tus propias ideas. Navegá mucho, inspirate, pero no copies, porque eso es una bosta!

\r\n

5. Respetá los estándares. Pensá en la gente que visita tu sitio.
6. Sé claro (aka no compliqués las cosas al pedo). Si es ambiguo lo que decís/mostrás va a ser muy dificil que te tengan en cuenta.
7. Odiá al Internet Explorer si querés, pero no ignorés a la gente que lo usa. Sí, el Internet Explorer es un invento de satán, pero lamentablemente mucha gente lo usa (muchisima). Y lo mejor que se puede hacer es que el sitio sea accesible para todos sin importar el browser que use.
8. Preocupate por el contenido de tu sitio.
9. No te preocupes por los web-crawlers ni por la SEO. Ni tampoco te preocupes por el PageRank o cosas por estilo… si tu sitio esta bien hecho, esas cosas vienen solas.
10. Hacé contactos, publicitá tu sitio, pero no llegues a hacer spam. El spam es una mierda, que seguro se vuelve en tu contra).
11. Escribí, publicá, sentite libre de preguntar. Participá en todo lo que puedas, una cosa maravillosa que tienen los blogs es la posibilidad de hacer comentarios y opinar y preguntar y funciona!!!
12. Respondé tus e-mails immediatamente!!! (algo que debo aprender, no puedo ser tan fáquin colgado)
13. Usá las ventajas de la Semántica Web.
14. Conectáte con tus colegas, sean bloggers, galerías CSS… lo que sea.
15. Pensá en términos globales.
16. Nunca compromentas tus principios. Eso quiere decir que no dejes llevar por las pelotudeces que diga alguien (sea cliente, jefe, etc), si está equivocado, corregilo. no le digas si a todo
17. Está siempre actualizado. Siempre es bueno saber qué está pasando en la red.
18. Aprendé a manejarte en el bloque creativo. Buscá info en foros, blogs para poder llevar tus ideas a cabo.
19. Hacé más linda la Web. Con tu aporte podés hacer que la internet sea un poco más agradable.
20. Conocé el Poder de la Web. Tenés la palabra! podés ayudar a mucha gente.

Bueno, espero que sirva… sé que mi traducción no es la mejor, pero ayuda como guía, el texto original en inglés tiene su link arriba, pero lo repito por las dudas: http://www.alvit.de/blog/article/20-rules-of-…

Y repito, estas reglas no van a traer el éxito si no creés en lo que estás haciendo ni explorás tu creatividad. cada idea puede ser la idea.

Bookmarkealo