Caray, que he andado desaparecido... me disculpo mi gente, he tenido MUCHO trabajo (del cual he sacado varias entradas, pero no he tenido tiempo de escribirlas) y el viernes cumplí años y pues bueno... todo ha sido desmadre en mi vida... pero hoy me he hecho de un tiempo para poder escribirles.
Hace ya algún tiempo que quería crear una galería de imagenes en puro CSS. Hice varios prototipos y jugué con muchas ideas, y al final, esta fue la que más me gustó. Se trata de una galería de imagenes a puro CSS con la cual vamos a mostrar los thumbnails por medio del efecto :hover. También hice una pequeña paginación hasta abajo, igualmente a puro CSS. Como ejemplo he creado un demo mostrando wallpapers. Cuenta con 4 páginas y un total de 35 imagenes (aunque sólo he subido 10 imagenes y las he repetido en cada página, por cuestiones de ancho de banda). Echenle un ojo y si les parece interesante, leanse el resto de la entrada. 
Y bueno, para empezar, quiero decir que este experimento puede ampliarse mucho más. Pienso en algo de AJAX para mostrar las imagenes en grande (algo como lightbox), PHP para automatizar el listado de las imagenes, otros fondos, colores, etc. Les dejo algo muy básico que espero alguien pueda usar en un futuro.
La idea
Ultimamente he visto muchas galerías de imagenes, y me ha parecido increible que, de todas ellas, no he visto UNA que me llame la atención usar. ¿Por qué? Pues si no usaban flash, si pesaban MUCHO o se veian bastante mal (o sumamente amontonadas). Me dispuse a crear una galería más sencilla, más flexible, más intuitiva y, por sobretodo, más semantica.
Te ha quedado muy guapo tío!
Menudo trabajo!! Y todo muy bien explicao, felicidades!
Como sugerencia únicamente cambiar los # de los enlaces por algo estilo javascript:void(0); para que cuando pulses en uno no te lleve el scroll hasta arriba...
hanok: ¡Muchas gracias! Lo de los enlaces, bueno, como es sólo un demo, ni siquiera enlaza a las imagenes. He puesto # para que ustedes piensen que poner. Como les digo, pienso que un lightbox se vería bien.
Algo muy útil y te ha quedado estupendo, muy buen trabajo MeTaL, sigue así.
Muy bueno!
MeTaL_oRgY, eres un maestro, definitivamente; todos los diseños en CSS que has hecho son increíbles.
Ahora te pediré un humilde favor
Estoy leyendo en www.librosweb.es un tutorial muy completo de CSS, pero después, no sé con qué seguir; ¿tienes alguna web para recomendar? ¿o tal vez algún consejo?
Te lo agradezco mucho, un saludo
Z01X, te recomiendo que entres en www.cristalab.com , es una web muy completa y es donde yo aprendí la base del CSS y ampliaciones del mismo
Muy recomendable.
Z01X: La verdad yo no recomiendo un libro o una web puesto que yo nunca usé uno de ellos. Aprendí a la brava, con amigos que me influenciaron a orientarme al CSS y experimentos como el que ves arriba. Cada día aprendo más y cada día me doy cuenta de lo poco explotado que está. Si usas un libro o un tutorial, tu creatividad e imaginación se limitan a lo que aprendes (o al menos en mi caso así es); prefiero yo mismo ver hasta donde puede llegar.
¡Mucha suerte!
Bien, gracias por las dos respuestas; creo que entonces aprenderé los conceptos básicos y luego empezaré a jugar con el CSS
You did it again! xD Al fin una alternativa interesante para las galerías en flash.
PD: Deviantart sin duda la mejor fuente de wallpapers xD
Pfff!!!! Que bien ha quedado, muchas gracias bro, por cierto te debo un meme xP pero no tengo cámara u_U
Saludos
holas¡
todo lo demás funciona muy bien. felicidades¡
mencionas que al darle click cambia la pagina, pues a mi en Safari para Mac no lo hace.
la verdad que esta muy buena, y merece su reconocimiento, has hecho un trabajo notable, la verdad que me gusta mucho y me gustaria implementarla en algun proyecto... la verdad que esta GROSA!!!
nos vemos,
Lucas.
Caray, sos un monstruo pal css :S, de donde estudiaste?
Felicidades.
Jajajaja, Interensate, yo estaba de Cumpleaños el Domingo 1 de Julio xP
Y Otra cosa, yo tambien hice mi galeria en PHP y Css, pero es novato, solo tiene 12 Lineas de PHP y tiene todo lo visual xP
Bueno, use mas bien logica, pero bueno xP, PAra mi todo un logro!
Y Tu galeria, para que hablar, esta maravillosa!
Esta padrisimo, como dirian por esos lados, no ? :O
Saludos, Muchas gracias de nuevo por dar a publico una de tus grandes ideas, con un fantastico Tutorial, esta genial!
felicidades canijo por lo menos si te cirvieron las horas sillas , quedo padrisimo tu galeria muy padre
Mmmm,no me anda en el IE 6 ,lo modifique un poco,osea le cambie algunos valores para hacerlo mas grande y no me anda
Infected-FX: No te apures bro, pero a ver si lo pones pronto, que tengo curiosidad.
dago: Cierto. Si lo menciono, pero olvidé actualizar el .html para mencionarlo ahí también. En fin, sigo intentando buscar una solución.
Angelfire: ¡Gracias tío! Y la verdad todo lo que ves en mi blog es el fruto de mi ocio y de años de jugar y aprender. Jamás me han gustado los tutoriales (mira mi comentario más arriba, ahí digo por qué) y me gusta ver hasta donde puedo llegar. Creo que la forma más fácil de explicarlo es 'no pienso "Con CSS puedo hacer esto"; pienso "Quiero hacer esto. Usaré CSS'... Simplemente hay que extender hasta donde puedas tu imaginación. Si lo puedes imaginar, es practicamente innegable que lo puedes hacer en la computadora.
Chicoblog: Jajaja, me ha dado gracia lo de "está padrísimo"... aunque usamos más "está poca madre" o "está bien chingón".
nachopunk: Si me das un poco más de información, o mejor aún, un demo online, podría ayudarte hermano.
¡¡Gracias a todos por sus comentarios!!
:0 esta re-cool enserio :3
yo apenas ando aprendiendo,,
weno, viva la vida loca el sexo y el rock'n roll =3
Suerte y a seguir aprendiendo \m/_
Gracias por responder MeTaL_oRgY, aunque a decir verdad y me disculparas, he visto los css de tus themes y pues creeme que eso no sale de nada, alguillo tuviste que haber leido, yo si me he medio leido algunos manualcillos, muy por encima como para empaparme, incluso asi hay algunas partes de tu css que ni entiendo.
Pero bueno, todo es practica y persistencia, espero algún día inspirarme y hacer algo bueno
en pocas palabras... esta excelent
hola ps dejo solo mi msn rubenpunk_stone@...
...y nad a mas solo busco amistades
hola, primera vez que visito esta pagina y en verdad esta muy buena y lo mejor es que esta en español, vine referenciado por la página de Infected-FX (otra pagina de lo mejor) y quede sorprendido por lo que css puede hacer...
Como dicen te rankiaste!!!
esa gente ps agregemme ps ok esa gente punk afuera lso posser
esa gnte punk carambas pa todos un beso agregemme soy una ams hjaja y abajo los posseer
eres un astro ..... como tu se ven pocos muy buenos aportes ....
Definitivamente, hace algunas semanas, tu me comentaste esta idea: "Quiero hacer una galería en CSS". Sencillamente lo hiciste y te felicito por eso. Realmente te propones metas, luchas por ellas y aprendes. Tienes toda la razón no sirve aprender por manuales y tutoriales, pero si sirven para darnos cuenta de muchas cosas, aunque con la experiencia también lo haces.
Hi. Great article, I love your CSS based gallery. I was wondering where the images used in your gallery come from? They look fantastic.
Djenryte: Hello there! Thanks for the comments.
The images are part of my personal wallpaper collection, but I believe most of them came from deviantart.com.
pero no he visto muchos aportes en cuanto a la pregunta:
¿cuál es el mejor script o sistema para instalar una galeria de imagnes bonita simple y funcional dentro de una pagina web?
espero respuestas gracias
el buscador de videos: Sinceramente, no creo que exista una panacea universal para nada en la web. No existe una solución para todo. Si quieres el mejor resultado, lo mejor es que tu mismo desarrolles tu sistema en base a las necesidades que tengas. Una galería de imagenes, dependiendo de muchos factores, puede usar ajax, flash, html, php, asp, etc. etc. Existen miles de herramientas y formas de hacer algo. Lo mejor es que tu mismo lo desarrolles a partir de herramientas que encuentres en internet.
Pero si necesitas algo rápido, puedo recomendarte PHP Image Gallery o Zen Photo. ¡Suerte!
el buscador de videos: te recomiendo plogger
http://www.plogger.org
me encanto esto es muy bueno ahora estoy aprendiendo un poco mas me gusto esto y chau
me encanto esto es muy bueno ahora estoy aprendiendo un poco mas me gusto esto y chau
[...] Css’nin güzelliğini bir kez daha anlamamı sağlayan bu resim galerisine bakmanızı tavsiye ederim. Siyah ve gri tonlardan oluşan bu galerinin kişisel web sitelerinizde çok hoş duracağını temin edebilirim. Ayrıyetten resimlere açıklamalar ekleyebilmeniz için bir bölümde var. Kısacası bir galeride bulunması gereken her türlü özelliği içinde barındıran bu galeri size çok yardımcı olacaktır. Galeriye ait derse bağlanmak için buraya , galerinin demosunu görmek için buraya tıklayın. [...]
Hola, esta excelente la galeria - pero no me funciona en IE 6 - cómo puedo solucionarlo??
Hola amigo, estuve observando tu web, y está exageradamente buena, en fin... la encontre en el buscador de google, quiero armar algo como galeria de imagenes, pero nose que ponér donde dice "thumb"; sería bueno que alguien me ayude, estaré pendiente en esta web, gracias
Mira que tienes muy buen gusto y la galeria esta muy buena, la puse en practica y funciona muy bien pero solo con IE 7, de resto no funciona con IE 6, no se que pueda estar pasando, podrias echarme una mano gracias.
Un AÑO....................
Si, un año buscando y tu me das la solución GRACIAS. veras la galería modificada en tamaños y colores en mi URL que en el futuro será www.q-faes.com
[...] Image Gallery 09 Eki 2007 tarihinde CSS kategorisine yazılmış ve 2 Yorum almış Etiketler : CSS, gallery Css’nin güzelliğini bir kez daha anlamamı sağlayan buresim galerisine bakmanızı tavsiye ederim. Siyah ve gri tonlardan oluşan bu galerinin kişisel web sitelerinizde çok hoş duracağını temin edebilirim. Ayrıyetten resimlere açıklamalar ekleyebilmeniz için bir bölümde var. Kısacası bir galeride bulunması gereken her türlü özelliği içinde barındıran bu galeri size çok yardımcı olacaktır. Galeriye ait derse bağlanmak için buraya , galerinin demosunu görmek için buraya tıklayın. 23 Ekim 2007 | 16:35 Gerçekten de css, javascript ve dom birleşince böyle güzel şeyler oraya çıkıyor. Bu tekniği özellikle haber siteleri kullanıyor. 24 Ekim 2007 | 15:23 Mükemmel. [...]
Gerçekten CSS lerin bu güzelligini keşfettikten sonra hayranı oldum arama motoru dosyu hızlı görsel !
Benim vazgeçilmezlerimden artık
Sinceramente, me quede maravillado con el trabajo que te mandaste. Con suerte, voy a lograr meterlo en el blog.. se puede ¿no?
Excelente trabajo con CSS, realemente 10 puntos.
Lo acabo de probar en el opera 9.5, y se ve bien el cambio de imagenes pero no me cambia bien al resto de las paginas. si puedo, este fin de semana investigare al respecto. Saludos
Muy bueno e interesante su carruse de imagenes, es precisamente el que quiero para poner en mi pagina que estoy creando.... pero me hubiera gustado que incluyera el archivo css, pues soy principiante y no alcanzo a comprender todo lo que nos quieres transmitir.
agradezco el esfuerzo que hace por nosotros y DIOS lo bendiga a usted
Que calaberada...no habia visto el otro archivo css.... mil disculpas.....
ljlfjdkfjakld
Woa! Queda muy bien el efecto~ haber si lo uso para una galaría de dibujos, porque las de deviantArt y SheezyArt simplemente no cargan con mi internet *se deprime*.
La paginación es sublime, mi parte favorita... en la vida se me hubiera ocurrido hacer algo así.. ¡Muchas gracias!