397 meneos

Lata de Coca-cola 100% CSS

www.romancortes.com/blog/pure-css-coke-can/ 
por --148759-- el 26-01-2010 16:36 UTC publicado el 26-01-2010 20:20 UTC

Tras crear mi anterior efecto (post anterior a este), describí que con una combinación de las propiedades CSS1 background-attachment y background-position, se pueden crear mapas de desplazamiento y, mediante barras de scroll, estos mapas pueden moverse y aplicarse a diferentes partes de una textura (una imagen de fondo).

etiquetas: lata, coca, cola, css, roman, cortes
negativos: 0   usuarios: 206   anónimos: 191  
compartir:  twitter  facebook  tuenti  
40 comentarios tecnología, software karma: 623
  1. #1   BUENÍSIMO!!! :-D
    80  votos: 6   link
    el 26-01-2010 16:49 UTC por Gestapo Gestapo
  2. #2   Este tio es un genio, como ya demostró con las meninas de Velazquez en CSS :-)
    82  votos: 6   link
    el 26-01-2010 16:54 UTC por Raul_B Raul_B
  3. #3   sí... cuando leí que era el mismo tío también lo pensé :-) un puto crack
    29  votos: 1   link
    el 26-01-2010 17:00 UTC por Gestapo Gestapo
  4. #4   #2 Pongo el link para la gente que no lo haya visto: www.meneame.net/story/impresionante-efecto-3d-imagenes-usando-solo-css

    Y más creaciones suyas aparecidas por Menéame www.meneame.net/search.php?q=romancortes+css
    69  votos: 6   link
    el 26-01-2010 17:34 UTC por BLT BLT
  5. #5   Impresionante, como siempre, y el código es sencillísimo...
    14  votos: 1   link
    el 26-01-2010 17:34 UTC por nanoSpawn nanoSpawn
  6. #6   Que raro... el efecto no me va en Firefox 3.6 y si en cambio en IE8 y Opera 10 :-O
    7  votos: 0   link
    el 26-01-2010 17:43 UTC por Pakipalla Pakipalla
  7. #7   #6 Pues a mi con Firefox 3.6 me va perfecto.
    86  votos: 7   link
    el 26-01-2010 17:52 UTC por BLT BLT
  8. #8   IMPRESIONANTE!
    20  votos: 1   link
    el 26-01-2010 18:03 UTC por --108753-- --108753--
  9. #9   #6 Pues en Internet Explorer se ve así: www.geekologie.com/2009/09/24/new-coke-cans.jpg
    117  votos: 13   link
    el 26-01-2010 18:10 UTC por r.rr r.rr
  10. #10   #6 A mí me va perfecto con Iceweasel 3.0.6 (que supongo que es más antiguo que Firefox 3.6).
    6  votos: 0   link
    el 26-01-2010 18:26 UTC por takamura takamura
  12. #12   #9 Pues en el Chrome se ve así:

    boozeitup.files.wordpress.com/2009/01/cuba-libre.jpg
    51  votos: 5   link
    el 26-01-2010 18:52 UTC por sao sao
  13. #13   #10 Iceweasel 3.0.6 = Firefox 3.0.6
    11  votos: 0   link
    el 26-01-2010 18:57 UTC por bufalo_1973 bufalo_1973
  15. #15   #13 Gracias por la info.

    #14 Fue por un problema de licencias con los logos de Firefox y el uso del nombre Firefox, no por ningún estándar: es.wikipedia.org/wiki/IceWeasel#Or.C3.ADgenes_de_la_bifurcaci.C3.B3n
    34  votos: 3   link
    el 26-01-2010 20:07 UTC por takamura takamura
  16. #16   Sitio kaput

    Efecto menéame
    17  votos: 1   link
    el 26-01-2010 20:28 UTC por miguelpedregosa miguelpedregosa
  17. #17   Efecto Menéame...
    23  votos: 1   link
    el 26-01-2010 20:30 UTC por edmont edmont
  18. #18   #16 #17 Así es, y pasa continuamente. Es penoso ver cuán de bajo es el nivel de la gran mayoría de los servicios de hosting.
    10  votos: 0   link
    el 26-01-2010 20:33 UTC por vic101 vic101
  19. #19   A ver si este enlace sirve: www.romancortes.com/ficheros/css-coke.html
    13  votos: 0   link
    el 26-01-2010 20:35 UTC por edmont edmont
  20. #20   La lata gira al revés, nadie se ha dado cuenta?
    28  votos: 2   link
    el 26-01-2010 20:37 UTC por OkaZ OkaZ
  21. #21   #17 Sí, me pregunto si algún día pasará al contrario, que se caiga menéame por haber meneado una comunidad mayor. Espero no tener que vivir ese día...
    14  votos: 1   link
    el 26-01-2010 20:43 UTC por merilet merilet
  22. #22   #20 No... cómo es eso de que gira al revés?
    17  votos: 1   link
    el 26-01-2010 20:57 UTC por crises crises
  23. #23   #20 blog.pharmalive.com/wp-content/uploads/2008/06/o_rly.jpg

    PS: Perdón, perdón, pero es que me encanta el bicho este.
    44  votos: 4   link
    el 26-01-2010 21:16 UTC por sao sao
  24. #24   Me siento mal por decirlo... pero la zona superior donde se estrecha la lata no cuadra bien la imagen. Quero decir, que gira y todo eso, pero no del modo en que debería por la inclinación, sino como si la lata no se estrechase allí. Aun así esta muy currado conseguir eso con CSS
    7  votos: 0   link
    el 26-01-2010 21:35 UTC por mikelx mikelx
  25. #25   #18 quizás debería mejorar su blog en cuanto a cacheado de páginas y la configuración de su hosting, contratar uno mejor o pasarse a la nube...

    Edit: los picos de tráfico de este hombre son brutales, pocos hostings lo aguantan: www.alexa.com/siteinfo/romancortes.com
    18  votos: 1   link
    el 26-01-2010 21:41 UTC por Ferran Ferran
  26. #26   cache de google por si no va la web 74.125.155.132/search?hl=en&q=cache%3Ahttp%3A%2F%2Fwww.romancortes
    10  votos: 0   link
    el 26-01-2010 21:45 UTC por Defunkid Defunkid
  28. #28   Efecto meneame, la web esta caida y en el cache de google parece que no carga justo la composicion en css xD .
    Alguna screenshot o gif o algo ?
    6  votos: 0   link
    el 26-01-2010 22:17 UTC por BlaiD BlaiD
  29. #29   #28 ¿O será la combinación de Google caché + Chrome? :-O
    7  votos: 0   link
    el 26-01-2010 22:46 UTC por UsuarioBorrado UsuarioBorrado
  30. #30   ¡Ningún link funciona!
    ¡¡¡EL EFECTO MENEAME LO HAN MATADO!!!
    10  votos: 0   link
    el 26-01-2010 23:03 UTC por zaladquiel zaladquiel
  31. #31   #27 El problema no es de Debian sino de los programadores de libpng, y en última instancia del comité que creó PNG, que considera que APNG es una chapuza y es mejor un formato que no sea una extensión de PNG, por ejemplo su formato MNG, aunque es menos usado.

    bugs.debian.org/cgi-bin/bugreport.cgi?bug=486209

    bugs.debian.org/cgi-bin/bugreport.cgi?bug=487556#10

    en.wikipedia.org/wiki/APNG

    En definitiva, no quieren APNG porque es un coñazo implementar y mantener un formato tan malo.
    17  votos: 1   link
    el 26-01-2010 23:17 UTC por takamura takamura
  33. #33   #32 ¿Acaso no sabes escribir acaso? :-D
    30  votos: 3   link
    el 27-01-2010 00:00 UTC por gerardolm gerardolm
  34. #34   #20 Eso es por que ves la lata tumbada. Si piensas que está de pie no queda tan extraño el desplazamiento
    28  votos: 2   link
    el 27-01-2010 00:20 UTC por mutantboy mutantboy
  36. #36   #30 y #25:

    No, no ha sido Menéame sólo quien me ha tumbado el server. La cosa ha aparecido en Reddit (en programming), en la portada de Delicious, estoy recibiendo muchísimas visitas de Twitter, y a saber de dónde más...

    Aún no tengo todos los datos y no puedo hacer un análisis completo, así que intentaré escribir un post sobre ello mañana o pasado.

    Desde que tengo mi caché instalada (a mediados de 2008 creo), el día que recibí más visitas fueron 115 mil usuarios (y más o menos el doble de pageviews) y la caché lo soportó perfectamente.

    Con lo de las Meninas el mes pasado, un día tuvo 60 mil visitas, y esta vez los ficheros eran bastante más pesados (unos 400 kb de descarga entre efecto y website) y también lo soportó sin problema alguno.

    Esta vez creo que, de las visitas que mi server ha podido contar mientras ha estado funcional, probablemente lleve unas 150 mil en 12 horas... y parece ser que tanto no soporta.

    En fin, a ver si puedo hacer un artículito, que supongo que puede estar interesante. Lo que sí que he podido ver es que últimamente el efecto Twitter se está volviendo tan fuerte o más que el efecto Slashdot, y a medida que crece y crece Twitter, cada vez va a más.

    Luego respecto a qué hacer para que no se me vaya abajo más... no puedo hacer mucho. Ya tengo un servidor dedicado, y de las páginas hospedadas, la mia personal se lleva el 99% del tiempo de CPU gastado y del ancho de banda.

    Podría contratar uno más potente, pero para mi página, que es personal como digo, y por una vez al año como mucho que se pueda caer no me parece razonable pagar 400 o 500 euros más al año.

    Lo único que he hecho ahora que ha vuelto a la vida es cambiar la caché, he pasado de generación de página cada 20 pageviews a cada 200 pageviews... no se si será de mucha ayuda, pero por probar...

    En fin, ¡deseadme suerte para que no se vuelva a caer! Gracias :-P
    66  votos: 7   link
    el 27-01-2010 02:01 UTC por --7418-- --7418--
  37. #37   A este tipo de ocurrencias se le llama "pensamiento lateral"... oye, qué apropiado. :-D
    9  votos: 0   link
    el 27-01-2010 06:30 UTC por macl macl
  38. #38   #32 No sé mucho de APNG ni de MNG, simplemente he copiado lo que he visto por ahí, así que no te puedo decir por qué APNG es peor. En todo caso, en el artículo de Wikipedia sobre MNG tienes algunos programas que lo implementan: GIMP, Imagemagick, Konqueror, Mozilla, ... y una biblioteca libmng.
    29  votos: 2   link
    el 27-01-2010 07:48 UTC por takamura takamura
  40. #40   #36 Te doy la razón, eso pensé cuando vi el gráfico de Alexa.

    ¡Aprovecho para felicitarte por tu trabajo! Espero que te vuelvan a tirar el server, eso significará que lo has vuelto a bordar :-)
    27  votos: 2   link
    el 27-01-2010 14:55 UTC por Ferran Ferran
comentarios cerrados

menéame