Cualquiera que utilizó a Flickr alguna vez debe conocer la opción para agregar notas dentro de una imagen (Add Note), esta opción muchas veces es ideal para señalar o comentar dentro de la foto. Con un poco de CSS se puede lograr algo similar, funcional en Internet Explorer, Firefox y Opera. Ejemplo: http://www.leandrodonofrio.com/ejemplos/flickr/
#5 yo pensé lo mismo, pero la técnica es diferente, además fíjate que el ejemplo de css mastery solo funciona en Firefox, esta tecnica funciona en IE, FF y Opera.
La idea es buena, pero no creo que anidar DIVs aporte mucho a la claridad estructural del documento, la idea es crean un contenido con HTML y dejar el diseño a CSS.
Pero le veo un problema al ejemplo, solo funciona cuando la imagen esta en las coordenadas 0,0. ¿no? En lugar de los parametros left, top para ubicar los rectangulos, o yo hubiese utilizado margin-left, y margin-top negativos. De esa manera daría igual donde estuviese ubicada la imagen...
Esto está calcado de un libro de Andy Budd, "CSS MASTERY".
Al menos podría citar la fuente.
P.D. A todo aquel que quiera aprender CSS y técnicas geniales como esta expuesta en esta noticia, os recomiendo que leáis este libro de Andy Budd (está en inglés) "CSS MASTERY" de friendsof.
Tengo varios libros de esta editorial y son geniales , a parte de CSS MASTERY también recomiendo DOM SCRIPTING y WEB STANDARD SOLUTIONS...
Comentarios
#5 yo pensé lo mismo, pero la técnica es diferente, además fíjate que el ejemplo de css mastery solo funciona en Firefox, esta tecnica funciona en IE, FF y Opera.
Sólo le falta que indique que hay notas al ponerte encima, y que explique cómo crearlas
Pues si, pero fijate que dice "similar" y no "igual" a Flickr
La idea es buena, pero no creo que anidar DIVs aporte mucho a la claridad estructural del documento, la idea es crean un contenido con HTML y dejar el diseño a CSS.
Muy útil, si señor.
Pero le veo un problema al ejemplo, solo funciona cuando la imagen esta en las coordenadas 0,0. ¿no? En lugar de los parametros left, top para ubicar los rectangulos, o yo hubiese utilizado margin-left, y margin-top negativos. De esa manera daría igual donde estuviese ubicada la imagen...
Esto está calcado de un libro de Andy Budd, "CSS MASTERY".
Al menos podría citar la fuente.
P.D. A todo aquel que quiera aprender CSS y técnicas geniales como esta expuesta en esta noticia, os recomiendo que leáis este libro de Andy Budd (está en inglés) "CSS MASTERY" de friendsof.
Tengo varios libros de esta editorial y son geniales , a parte de CSS MASTERY también recomiendo DOM SCRIPTING y WEB STANDARD SOLUTIONS...