Si tuviera 1 dolar por cada blog que hago bien... tendría un dolar.

Dibujar en CSS

Páginas: 1 2 3

CSS Painting

¡Que bonita imagen! ¿A poco no? ¡Pero es MUY sencilla! ¡Cualquiera podría hacerlo usando Fireworks o Photoshop! Bueno; los invito a que la vean otra vez. ¿Qué pasaría si les dijera que ese es un screenshot de una página en HTML y CSS que usa la interesante cantidad de 0 imagenes? Si, CERO imagenes. Es un pequeño dibujo que hice en CSS, a puros divs y spans y uno que otro puntito. ¿Te interesa? ¡Vamos a ver cómo lo hice!

Cabe aclarar que no pienso describir como hice cada elemento, uno por uno. No acabaría. En su lugar, les explicaré brevemente lo que crea conveniente y les pondré el código fuente y el demo; espero sea suficiente.

Por cierto, un agradecimiento especial a Scott Jackson por este grandioso wallpaper que inspiró esta entrada.

Páginas: 1 2 3

28 Comentarios

  1. Esta simplemente genial!
    Yo siempre eh pensado que se podia hacer osea, un dibujo en Css, pero nunca se me ocurrio como : /

    Esta simplemente genial!
    Te felicito y esta, pues para que digo Fantastico!

    Saludos!

  2. simplemente excelente :)

  3. Lo que es no tener nada que hacer y mucha imaginacion, (es broma)

    Esta muy interesante, pero hay que tener mucha paciencia.

  4. [...] Por si queréis pasaros a felicitarle, el autor es metalize, y esta es la dirección del post original. [...]

  5. Para cuándo un canal de cocina.. digo, de diseño/código con Metal, y sus secretos, en la tv? ñ_ñ

  6. Buenísimo!!! Solo queda currarse un js pa ir moviendo las nubes y que aparezca de vez en cuando un pajarillo, jejejeje! ;)

  7. [...] PINTANDO COM CSS 16 de Maio de 2007 Lido 1 Vezes | por Pedro Rogério | blog reactions [...]

  8. hanok: ¡Genial idea! Quiza algún día aprenda suficiente javascript como para hacerlo, pero por ahora estoy re-wey. :( Pero me agradó la idea. :P

  9. pafff... super kabron man.. te kedo lindo xD

  10. Una maravilla, sí señor.

  11. ¡Genial! Estás hecho todo un artista.

  12. [...] Un muestra de la potencia de CSS, pese a no ser un lenguaje con esta orientación, como SVG, es una pasada lo que algunos pocos pueden hacer él. « La WikiNovela va cogiendo un tono erótico… [...]

  13. Simplemente genial... fantastico el poder del css!!!

    Felicitaciones!!!

  14. alucinante

  15. Eres un verdadero mago del css. Mis respetos.

  16. [...] Rammy, el creador de este dibujo, nos lo explica paso a paso, y de manera completa y transparente en su blog, como llego a realizarlo. Atención especial a las muestras del código utilizado. [...]

  17. Hoy al despertarme, amanecí con tu bonito dibujo. Lo tuve que mirar varias veces y usar el puntero del ratón para seleccionar las partes del dibujo y verificar que era texto... Sencillamente IMPRESIONANTE!!!! y muchas gracias por la explicación del proceso, me ayudó a entender mejor algunos parámetros del CSS. ¿Cuanto tiempo te llevo, la idea y el desarrollo?

  18. Poncho: ¡Muchas gracias! Me alegro que te ayudara a entender un poco más del CSS. Enc uanto al tiempo; no fue mucho. Generalmente estas cosas se me ocurren en un pestañeo y desarrollarlas no toma mucho más. No tomé el tiempo, pero no paso de las 3 horas (desde la idea, hacerlo en Fireworks y luego pasarlo a código).

    ... si, no tengo vida. :P

  19. [...] Para hacer el dibujo que se ve arriba no se utilizó ningún editor de imagen, no es un retoque fotográfico, no se usó ni Paint, ni Photoshop, ni Fireworks, ni Gimp, ni nada de eso. Todo este paisaje fue creado usando tan sólo HTML y CSS. El creador de este dibujo, explica paso a paso, en su blog, como llego a realizarlo, dandonos el código de como logro realizarlo, simplemente notable. [...]

  20. Definitivamente estas loco para haber hecho eso....

    pero hay que reconocer que eres un loco con mucha creatividad y talento..

    Saludos.

  21. notable!

  22. Impresionante !!!!!!!!!!!!!!!!!!!!!!!

  23. Tu dibujo quedó mejor que el que te inspiró

  24. [...] Fuente: Metal.ize [...]

  25. eres el picasso del css :D

  26. [...] Rammy es el autor de esta obra semántica. Nos cuenta que empleó únicamente algunos divs, spans y uno que otro punto. [...]

  27. [...] Si el crear dibujos usando solo css y html les parecio una pasada, este tio si que esta enfermo. Fake o no, realmente es algo impresionante, les dejo el video. [...]

  28. Simplemente genial!!!

Dejar un comentario

* Campos requeridos
   El Email no será publicado