京Cd௫京 MURAL 2009 Juego

[pao01]

Pero si hasta movimiento tiene

Costó mucho ese css?

[kseso?]

Más tarde te lo cuento.

[Triby]

wow!!! Excelentes trabajos, cuando sea grande quiero tener al menos el 10% del talento de ustedes.

kseso?, genial el CSS.

[kseso?]

Gracias Triby, pero no me otorgues méritos que no son míos.
Como decía, "más luego" los créditos a quien corresponde.
Sería bueno que si alguien no ve la película nos diga con qué navegador falla.

Un saludo

[Aresillo]

En ninguno se ve como en FF:
- En IE6 la imagen va superlenta
- En opera 9.62 se despliegan hacia abajo todas las imágenes y si lo pones encima se quedan juntas pero va lento
- En Chrome 2.0.172.30 se ve en su sitio pero casi ni se mueve
- En safari igual que en el chrome

Saludos!

Pero de todas maneras muy buen trabajo Kseso me ha gustado mucho!!

[Rafael]

¡Bieen! Aunque hayas privado a la gente de mis fotos de gran parecido con mi gemelo Pitt.

Interesante la interacción, ¿usaste la opción onMouseMueve?

[Rafael]

Triby, Gracias por el cumplido a todos, pero por qué mojor no te animas a escojer un cuadrito, es más inaugura la siguiente fila o columna, ¿no?

[algoparapensar]

Iniciado por Aresillo

En ninguno se ve como en FF

Hablando en serio, Elias, te pasaste... buenisima la animacion esa.!!

[kseso?]

Gracias a todos. Pero como deje a Triby, el mérito es ajeno. La idea y el código base lo saqué de www.csplay.co.uk me limité a ampliar el nº de imágenes a mostrar. Las 20 pic salieron de un jpg de http://www.musee-orsay.fr/es/ Sólo tuve que ampliar y recortar.

Iniciado por Aresillo

En ninguno se ve como en FF:
- En opera 9.62 se despliegan hacia abajo todas las imágenes y si lo pones encima se quedan juntas pero va lento

Gracias Aresillo.
Pues en Opera 9.64 sólo se ve la primera y sin animación.

Iniciado por Rafael

¡Bieen! Aunque hayas privado a la gente de mis fotos de gran parecido con mi gemelo Pitt.
Interesante la interacción, ¿usaste la opción onMouseMueve?

No están olvidadas, seguro que algun uso perverso le sabré encontrar .
Nada de roedores. Puro xhtml + css. Pero con tiempo quiero ver si se puede lograr lo mismo con un "sprite" en vez de utilizar 20 imágenes distintas.

Iniciado por algoparapensar

Hablando en serio...

¡No me lo puedo creer! ¿Acabaste el lúpulo?

Bueno, ahora el reto es para algún habitante de la cueva de los códigos (js o similares) que se atreva.
La casilla sobre la mía os está esperando. La nube se la paso o la modifico para que no lo mortifique en demasía.
O ¿se esconderán todos detrás de un "while"?

Un saludo

[Rafael]

A ver, me voy a animar en poner un poco más de desorden. Voy a hacer algo junto a la de AlgoPp, junto a Mr. FunkyTrip.

Ya con 2 ejemplos pongo el reto oficialmente en los otros foros.
Nada de curvitas... quizá.

Pregunta, ¿Si agregamos esta columna no se descuchurunfa tu código Css?

descuchurunfar: del español descuajaringar, (hacer mermelada el resultado de un código css).

[kseso?]

Si me descuajeringas el diseño añado un "overflow:hidden" a tu cuadrícula.
hieden del castellano (con la h "jaspirá", que ya la dejó recogida Gabriel y Galán)

No, ahora en serio, que antes quería meter un par de palabras al hilo de la tuya
Sería mejor una fila nueva, pero si es por lo que me imagino, podré apañármelas (creo) por añadir una "celda" al fondo de la "columna". Y en última instancia un "hoygan mkmoro, ksk urgnt pa ya"

[Rafael]

Si es mucho problema pues igual y no. Ese putno se me hizo einteresante porque se puede integrar divs de colores sólidos naranjas y negros, que se adapten bien al diseño contiguo. Y puede servir como un ejemplo (creo y espero) interesante de armar algo muy visual con puro css y html.

Ahora, no sé si estas aportaciones puedan estar mejor en un Iframe, para que por ejemplo de la misma manera se actualice alguna modificación sin tener que tocar el armado del mural, además de que el posicionamiento no sería un problema. El Iframe se mete en el div de la retícula y ya, ¿como ves?

[kseso?]

nada, Rafael, dale con fuerza a esa idea al lado de APP
Que voy a ver quien me acepta la invitación para el -1A y continuamos con el -1B y así sucesivamente.

No olvides que estamos en un foro de diseño, así que el código que se someta al artista

[Triby]

Solicitaria algun recuadro en -1, pero quedo demasiado cerca del que ya hice, espero nueva fila o columna para venir a descuajeringar el mural.

[Rafael]

Puf... Por acá está mi pedazo 3-a...

3-a

Kseso? ¿Cómo ves si entonces usamos el Iframe, para poderlo modificar?

Para el ocioso que lo quiera revisar...

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
 
<html> 
<head> 
    <title>Mural-03 por Rafael</title> 
</head> 
 
<body style="margin: 0px; padding: 0px;"> 
<!-- Mural 3-a --> 
<div style="width: 650px; height: 450px; background-color: #060606; overflow: hidden;"> 
 
 
<div style="background-color: #F16625; width: 632px; height: 14px; position: relative; left: 018px; top: 056px; font-size: 1px;">&nbsp;</div> 
<div style="background-color: #F16625; width: 528px; height: 18px; position: relative; left: 122px; top: 087px; font-size: 1px;">&nbsp;</div> 
<div style="background-color: #F16625; width: 222px; height: 17px; position: relative; left: 428px; top: 108px; font-size: 1px;">&nbsp;</div> 
<div style="background-color: #F16625; width: 173px; height: 17px; position: relative; left: 477px; top: 121px; font-size: 1px;">&nbsp;</div> 
<div style="background-color: #F16625; width: 132px; height: 29px; position: relative; left: 518px; top: 134px; font-size: 1px;">&nbsp;</div> 
<div style="background-color: #F16625; width: 092px; height: 40px; position: relative; left: 558px; top: 148px; font-size: 1px;">&nbsp;</div> 
<div style="background-color: #F16625; width: 052px; height: 52px; position: relative; left: 598px; top: 164px; font-size: 1px;">&nbsp;</div> 
 
 
<div style="background-color: #DA8131; width: 400px; height: 50px; position: relative; left: 0px; top: 113px; font-size: 1px;">&nbsp;</div> 
<div style="background-color: #E45916; width: 400px; height: 50px; position: relative; left: 0px; top: 113px; font-size: 1px;">&nbsp;</div> 
<div style="background-color: #CF1B0C; width: 400px; height: 50px; position: relative; left: 0px; top: 113px; font-size: 1px;">&nbsp;</div> 
 
 
<div style="background-color: #DA8131; width: 30px; height: 50px; position: relative; left: 420px; top: -37px; font-size: 1px;">&nbsp;</div> 
<div style="background-color: #E45916; width: 30px; height: 50px; position: relative; left: 420px; top: -37px; font-size: 1px;">&nbsp;</div> 
<div style="background-color: #CF1B0C; width: 30px; height: 50px; position: relative; left: 420px; top: -37px; font-size: 1px;">&nbsp;</div> 
 
 
<div style="background-color: #DA8131; width: 10px; height: 50px; position: relative; left: 467px; top: -187px; font-size: 1px;">&nbsp;</div> 
<div style="background-color: #E45916; width: 10px; height: 50px; position: relative; left: 467px; top: -187px; font-size: 1px;">&nbsp;</div> 
<div style="background-color: #CF1B0C; width: 10px; height: 50px; position: relative; left: 467px; top: -187px; font-size: 1px;">&nbsp;</div> 
 
 
<div style="background-color: #FC0; width: 500px; height: 56px; position: relative; left: 100px; top: -637px; font-size: 1px;">&nbsp;</div> 
 
 
<div style="background-color: #F90; color: black; width: 300px; height: 49px; position: relative; left: 0px; top: -623px; font-size: 40px; padding-left: 50px; font-family: monospace; font-weight: bold;">get ready</div> 
 
<div style="color: #EB0; height: 80px; font-size: 60px; position: relative; left: 200px; top: -635px; font-family: Arial, Helvetica; font-weight: bold;">for</div> 
<div style="color: #CCC; height: 200px; font-size: 180px; position: relative; left: 300px; top: -800px; font-family: Arial, Helvetica; font-weight: bold; 
 filter: alpha(opacity=70); -moz-opacity:0.7;">a</div> 
 
<div style="color: #999; height: 150px; font-size: 100px; position: relative; left: 50px; top: -850px; font-family: Times, serif; font-weight: bold; filter: alpha(opacity=50); -moz-opacity:0.5;">dimensional</div> 
<div style="color: #FFF; height: 150px; font-size: 80px; position: relative; left: 85px; top: -985px; font-family: Arial, Helvetica; font-weight: bold; 
filter: alpha(opacity=80); -moz-opacity:0.8;">dimensional</div> 
<div style="color: #0F0; height: 150px; font-size: 80px; position: relative; left: 250px; top: -1070px; font-family: monospace; font-weight: bold;">journey</div> 
 
<div style="width: 18px; height: 98px; position: relative; left: 625px; top: -1117px; background-image: url('MuralRafael-03Pedazo.jpg')">&nbsp;</div> 
 
  
</div> 
<!--Fin Mural 3-a --> 
</body> 
</html>  
   

A ver si después... mucho después agrego unos hover.

[Aresillo]

Te ha faltado alguna conexion por abajo rafael pero es muy buena idea? porque lo has hecho para la 3A y no has hecho otra fila o algo? haz el 4a y abrimos fila!!

[Rafael]

Yo y mi desorden, ¿verdad?
Le comentaba a Kseso que esa casilla estaba buena para hacer otro experimento con css, por los colores sólidos y eso.

Creo que ya va a abrir la columna -A. .

Me encantaría más participación de la gente. Este formato de filas y columnas se presta a estar trabajando en varios frentes, ciertamente se puede continuar con la columna -A y la fila 4a, o arriba o a la derecha.

Alucinando podría haber 4 o más personas trabajando un cuadrito al mismo tiempo. Al que le toque cerrar los espacios tendrá triple reto

No sé. Que Kseso? decida

Por lo pronto ya está mi pedazo, a ver si el chanclazo (como siempre ¿verdad') vale.

Editado. Si me falta el pedazo de la camisa... por el momento me voy a ver purista y dejar puro texto. Al ratito le meto la camisa al Mr.

Editado 2: Ya le puse un pedacito de la camisa. Es la única imagen.

[Aresillo]

La verdad es que si que se podía liar... pero entonces habría que hablar con la gente de la competencias CSS específicamente y ahora es mal momento... estamos en plenos examenes.. yo incluido!

[kseso?]

EL MURAL AQUÍ

"guapo, guapo y guapo, te ha quedao ni que pintao"
Muy bueno Rafael.

No veas qué trabajo me ha dado! ¡casi, casi una micra del tuyo!

Ya está en su lugar. Cuando tengas la camisa remendada no la enlaces al local jeje.

Lo que planteáis, de 2 cuadrículas simultáneamente no veo problema, símplemente una sobre la de Rafael y otro sobre la televisión. La cuestión es, ¿quien sigue? ¿Los de la cueva de js no se atreven?

Podemos facilitárselo, se le crea una imagen que case con el borde de la aledaña y sobre ella como lienzo que nos sorprendan.

¿"remecemos el avispero"? ¿Voy "pallá" y les dejo una "invitación"?

Iniciado por Triby

Solicitaria algun recuadro en -1, pero quedo demasiado cerca del que ya hice, espero nueva fila o columna para venir a descuajeringar el mural.

¡quieto parao, Triby!
¡Tú ya no te escapas!
¿Leiste más arriba? Pues te acabas de ganar para ti solito la que está sobre la Tv.
Ya puede ir empezando con ella.
<offcourse> si necesitas algo para la nube...</offcourse>

[Aresillo]

sois unos máquinas!!

[pao01]

Fantástico Rafael, te quedó muy pero muy bueno

[Rafael]

¡Aresillo, Suerte con los exámenes! g r a c i a s _ p o r _ lo _ d e _ m ' a q u i n a s.

Kseso (nota, voy a comenzar a omitir el signo de interrogación ) Espero no te haya dado mucha lata empujar todo, ya que veo que usaste posicionamientos absolutos en el tuyo.

El pedacito de la camisa ya está, la tendrás que subir a tu servidor. ¡Buen trabajo!


Triby, esperamos tu imagen... las nubes son lo de menos... esa película que puso Anya es la que te va a dar trabajo se extá extendiendo como un virus, ya hasta hélice de ARN parece.

Gracias Pao... Evité las curvas... no me quedaba de otra, habrá que esperarse unos años a la implementación del css3 o 4.

[kseso?]

Hecho! Rafael. Ahora a cursar invitación (y a quien la rechace unos puntitos de negro de parte de todos
¿Se atreverá Mikmoro? Con la casilla sobre la tuya.

¿Me preguntabas por el porqué de no usar ciertas fotos, Rafael?
Mira lo que ocurre cuando sales por televisión (ff, por favor)

Un saludo
Kseso?

[pao01]

¿Eso ocurrirá por las curvas?


Si hay que hacer alguna especie de plantilla o base, me ofrezco a los efectos de que Mikmoro se atreva

[Rafael]

Despues de ver el post de "me tunean una foto" seré más cautelos de a quién le envío la foto del vecino... Kseso?

Pao, ¡a bueno!, si le ayudas a Mikmoro, voy a poner que como regla debe de haber a fuerzas una curva como requisito

[pao01]

Iniciado por Rafael

Pao, ¡a bueno!, si le ayudas a Mikmoro, voy a poner que como regla debe de haber a fuerzas una curva como requisito

Ningún problema, luego de todo lo que Mikel me ayuda en css, lo hacemos con curvas o con lo que venga

[Rafael]

Pues ya aventé la pelota al foro de CSS, a ver si se animan a hacer sus tiros

Si quieren ir de paleros por allá estaría bien

El post en Css

[kseso?]

Está bueno ese disparo por allá.
Creo que deberíamos extender la invitación/reto a otras áreas del foro, y mejo aún si alguno de los amadísimos y respetadísimos fuera el que lo impulsase por allá. Ampliando a cualquier lenguaje de programación. Por el servidor no hay problema con php, y otras cosas distintas sería cuestión de verificar (no se muy bien por lo que pago, jeje.)

Y si lo "internacionliforamos" ... ¿pedir poner un enlace en alguna parte destacada del foro para que más usuarios se enteren?
¿Qué opináis?

Un saludo

[Rafael]

Pues of course! Incluso Stiky por aquí, stiky por allá, sticky por delante, y s... en fin.

Edito:
creo que me tengo que pasear más por el foro Css, ya ví que hay una sección competencias
Creo que voy a solicitar servicio de mudanza...

[paolamurias]

Rafael muy buen trabajo!!!!