Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   Competencias CSS (http://www.forosdelweb.com/f95/)
-   -   Partida Todos juegan? (http://www.forosdelweb.com/f95/partida-todos-juegan-575045/)

Mikmoro 11/04/2008 12:19

Partida Todos juegan? Curiosidades
 
Hola a todos.

¿Os hace una partida entre todos de diseños curiosos, ingeniosos, interesantes?
Podría ser un sitio donde poner cosas curiosas que se nos ocurran con css, de manera que pudiera ser una fuente de ideas para todo el mundo.

Como no soy buen diseñador gráfico, me tengo que agarrar a lo que puedo :-D

Pongo aquí mi primer tiro, que es una simulación de la página del camaleón tal y como se ve con el navegador de texto Lynxs.

Aquí la hoja de estilo.

Y aquí la imagen que he usado.

Animaos a poner vuestras ideas y los demás las valoramos y hacemos comentarios.

Mikel.

P.D.: Moderadores: ¿hay problema por poner este tema aquí? Si hay otro sitio más adecuado lo movéis sin problema.

juaniquillo 11/04/2008 15:58

Re: Partida Todos juegan?
 
ja, que bueno el tiro... Deja que reagrupe el pelotón y hago algo en el fin de semana.

AlvaroG 12/04/2008 20:26

Re: Partida Todos juegan?
 
te quedó muy bien Mikmoro

Falta completarle el resto de KDE :-D


Salú

metacortex 12/04/2008 23:33

Re: Partida Todos juegan?
 
Bueno yo tengo un par observaciones más :-):

- Podría haberse armado la ventana con fondos repetitivos en algún lado, en lugar colocar la imagen completa.

- Un cursor:default para todo lo que no sea el texto de la cónsola hubiese estado mejor :arriba:.

Mikmoro 13/04/2008 08:04

Re: Partida Todos juegan?
 
Cita:

Iniciado por alvlin (Mensaje 2361524)
te quedó muy bien Mikmoro

Falta completarle el resto de KDE :-D


Salú

:-D
El KDE estaba en la imagen original, pero lo quité porque duplicaba la barra inferior de aplicaciones y quedaba un poco sobrecargado :-)

Gracias por vuestros comentarios.

Mikel.

daPhyre 14/04/2008 08:20

Re: Partida Todos juegan?
 
Wow! Excelente. En verdad no se me hubiera ocurrido nada similar! xD

Pues... no tengo má comentarios. Buen trabajo.

Mikmoro 23/04/2008 12:28

Re: Partida Todos juegan?
 
Bueno, en vista de que nadie se anima a poner cosas curiosas, voy a poner otro tiro.

Es este.

Un curioso efecto para mi.

Recomendable verlo con firefox, porque aunque funciona con explorer, tiene alguna cosilla que intentaré mejorar con el tiempo.

No os molestéis en validarlo, que tienes errores pero que no tienen ninguna importancia. Si fuera un caso real, serían de fácil arreglo. Es sólo una curiosidad.

Mikel.

juaniquillo 23/04/2008 12:41

Re: Partida Todos juegan?
 
Muy bueno. Una muy buena alternativa a una navegación hecha con javascript. Perdón que hecho nada pero no he tenido tiempo. Espero tener algo mas de tiempo esta semana. :-D

metacortex 23/04/2008 17:19

Re: Partida Todos juegan?
 
Buenísimo :arriba:. Me gustó mucho.

Mikmoro 23/04/2008 17:31

Re: Partida Todos juegan?
 
Gracias. Me alegro mucho de que os guste (es un honor, viniendo de vosotros).

A ver si se va animando más gente, que pueden salir cosas interesantes.

Por cierto, a ver si me animo algún día a escribir un párrafo de comentario para decir que todo el código que yo pongo es de libre uso y disfrute, y añadirlo a todas mis páginas. Por si alguien lo duda.

Mikel.

nenita05leyla 06/05/2008 09:21

Re: Partida Todos juegan?
 
tan super!! me encanto el de la interfaz tipo consola
y el de desaparecer los link y colocarlos al lado tmbn
muy interesante!!

Mikmoro 07/05/2008 02:22

Re: Partida Todos juegan?
 
Gracias. Me alegro de que te gusten.

Anímate a intentar diseñar algo diferente y curioso, que pueda que resulte útil para otra gente.

Mikel.

Mikmoro 12/05/2008 09:44

Re: Partida Todos juegan?
 
Ala, pues ahí va otra gracia de las mias.

Siguendo la idea del dibujante de Homer Simpson con css (que me dejó alucinado), he hecho una caja con las esquinas redondeadas sin ninguna imagen, sólo con css.

A ver si os gusta. Esta idea se puede usar para todo tipo de decoraciones en las cajas.

Mikel.

daPhyre 12/05/2008 10:02

Re: Partida Todos juegan?
 
No había visto el anterior hasta ahora, y debo admitir que es una curiosidad muy interesante.

Y este último que has hecho ¡Impresionante! Creo que has revolucionado por completo la forma de hacer marcos redondeados =P... Solo esperemos que alguien no quiera robarse la idea y hacerla suya, pues está genial!

Muy buenas cosas las que has hecho aquí. Lástima que a nadie más se le ha ocurrido nada para hacer su aporte. No tengo idea para hacer algo del estilo, pero si un día me estrello con la puerta del armario al abrirla, y me llega una fantástica idea milagrosamente, la pondré aquí tan rápido como la tenga =P.

¡Excelente trabajo Mikel! Sigue así =P

Mikmoro 12/05/2008 10:11

Re: Partida Todos juegan?
 
Bah, puedes darte tú mismo un cabezazo contra la pared; eso me pasó a mi de niño, y mira lo que pasa :risa:

Y por lo robar... que lo roben. A mi me da igual, yo lo pongo a disposición de todo el mundo. ¿se nota que uso Linux y software libre siempre que puedo? :-D

Mikel.

daPhyre 12/05/2008 10:41

Re: Partida Todos juegan?
 
Buen punto... Desafortunadamente (Para bien o para mal, mejor dicho), los mios me llevaron hacia otros rumbos de creatividad, por eso necesito que casualidad y golpe se junten en el momento preciso, o alucinaré todo menos CSS XP'

Y por otro lado, que no es lo mismo que roben a que lo usen para sus fines, que por el segundo no tengo problema tampoco, pero realmente me cae mal la gente que dice "Miren lo que he logrado", cuando en verdad lo descargaron de la primer página web que se encontraron, y no son capaces de hacer lo básico de algo similar :molesto:

¿No opinas similar? X)

Claro, que ha sido excelente lo que has logrado, y de gran alegría para todos es que lo hayas compartido con nosotros, pues has ayudado al mundo con una excelente aportación para el futuro de la web. ¡Gracias Mikel!

Mikmoro 12/05/2008 11:31

Re: Partida Todos juegan?
 
Una de la cosas buenas de la licencia GPL es que no sólo hace algo libre, sino que impide que otros se apropien y hagan que deje de serlo, o incluso impide no liberar las versiones derivadas, pero en fin, sé que debería licenciar las cosas por esa razón pero me da pereza. Al fin ya al cabo, a mi nadie me va impedir usarlo nunca.

No recuerdo quién, decía que el tiempo que alguien ocupe en copiar tu trabajo, tu lo ocuparás en crear cosas nuevas, así que siempre irás un paso por delante. Es un poco exagerado pero es bonito :-)

Por último, para mi no tiene mucha importancia el hecho de hacer un código que cualquier otro podría hacer con un poco de paciencia. Me resulta suficiente recompensa que haya quien lo lea, le guste, le saque partido y se sienta agradecido. Alimento para el alma. :-)

Mikel.

P.D.: y creo que a ti el golpe en la cabeza te llevó más hacia el php ¿no? Pues un día me harás falta y abusaré de tu confianza :-D

Shiryu_Libra 12/05/2008 13:03

Re: Partida Todos juegan?
 
Mikmoro, que interesante la consola que haz creado :aplauso:

dejando fluir la imaginacion reprimida o sera mucho tiempo frente al PC :pensando:???

buenos trabajos :arriba:

juaniquillo 12/05/2008 13:53

Re: Partida Todos juegan?
 
Muy bueno el último ejemplo... :aplauso: Veo que usas divs. para crear los bordes. Este efecto lo he visto que lo crean con elementos <b> pero nunca como tu lo has hecho. Tengo que examinar bien el CSS pero lo que veo es que estas creando los bordes con puntos, no? Muy ingenioso... :)

Mikmoro 12/05/2008 14:48

Re: Partida Todos juegan?
 
Cita:

Iniciado por Shiryu_Libra (Mensaje 2400993)
Mikmoro, que interesante la consola que haz creado :aplauso:
dejando fluir la imaginacion reprimida o sera mucho tiempo frente al PC :pensando:???

Las dos cosas :-)

Cita:

Iniciado por juaniquillo (Mensaje 2401058)
Tengo que examinar bien el CSS pero lo que veo es que estas creando los bordes con puntos, no? Muy ingenioso... :)

Sí, con puntos (&bull;) a un tamaño de 60px.

Voy a poner aquí el código, que no es muy extenso, para que se pueda ver sin molestarse en mirarlo en la página:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xml:lang="es" xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Esquinas redondeadas con css</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {margin: 0px; padding: 0px;}
#caja { margin: 20px auto;
background-color: #43758c;
width: 200px;
height: 200px;
position: relative;
}
.esquina { background-color: #fff;
position: absolute;
line-height: 20px;
width: 10px;
height: 10px;
overflow: hidden;
}
.lt {left: 0px;top: 0px;}
.rt {right: 0px;top: 0px;}
.lb {left: 0px;bottom: 0px;}
.rb {right: 0px;bottom: 0px;}

.punto { font-weight: bold;
color: #43758c;
position: absolute;
font-size: 60px;
background-color: transparent;
}
.plt{top: -3px;left: -2px;}
.prt{top: -3px;right: -2px;}
.plb{bottom: -1px;left: -2px;}
.prb{bottom: -1px;right: -2px;}

#texto {color: #fff;padding: 8px;}
</style>
</head>
<body>
<div id="caja">
<div class="esquina lt">
<div class="punto plt">&bull;</div>
</div>
<div class="esquina rt">
<div class="punto prt">&bull;</div>
</div>
<div class="esquina lb">
<div class="punto plb">&bull;</div>
</div>
<div class="esquina rb">
<div class="punto prb">&bull;</div>
</div>
<div id="texto">Esta caja tiene las esquinas redondeadas usando únicamente css. Puede ser un buen truco para hacer todo tipo de decoraciones a las cajas.</div>
</div>
</body>
</html>

casf79 16/05/2008 01:52

Respuesta: Partida Todos juegan?
 
Realmente son muy buenos los efectos.

Lástima que yo no tengo ni idea de css, algún sitio interesante donde pueda pillar info para empezar a hacer pinito?

daPhyre 16/05/2008 08:47

Respuesta: Partida Todos juegan?
 
Cita:

Iniciado por casf79 (Mensaje 2407191)
Realmente son muy buenos los efectos.

Lástima que yo no tengo ni idea de css, algún sitio interesante donde pueda pillar info para empezar a hacer pinito?

Ve en los FAQ de CSS, ahi hay muchos sitios interesantes.

Por cierto Mikel, ya he logrado comprender como haces los marcos (O eso creo al menos) Practicamente son los bullets agigantados, movidos, recortados, del color del box y con el fondo en blanco, ¿cierto? Muy buena técnica, pero esto no podría funcionar con fondos degradados al igual que las imagenes con el efecto similar, por lo que no es un gran progreso desde esta perspectiva.

Por otro lado, ya le encontré otra función interesante, que además de ahorrarnos hacer cuatro imagenes de cuartos de círculo, además se puede implementar de forma muy rápida en CSS que cambien dinámicamente, cambiandole solo el color a estos. Ya estoy viendo el universo de posibilidades que has creado con esta idea...

Ahora, intentaba hacer algo similar, pero con un triangulo hacia abajo que simule una flecha hacia abajo, sin embargo, no encuentro un símbolo indicado para esto. Mi mejor idea hasta ahora es modificar un poco la "v", pero no estoy seguro que le de el efeco que deseo precisamente... ¿Alguna otra idea que pueda usar? =P

Mikmoro 16/05/2008 14:50

Respuesta: Partida Todos juegan?
 
Cita:

Iniciado por daPhyre (Mensaje 2407536)
Ve en los FAQ de CSS, ahi hay muchos sitios interesantes.

Por cierto Mikel, ya he logrado comprender como haces los marcos (O eso creo al menos) Practicamente son los bullets agigantados, movidos, recortados, del color del box y con el fondo en blanco, ¿cierto? Muy buena técnica, pero esto no podría funcionar con fondos degradados al igual que las imagenes con el efecto similar, por lo que no es un gran progreso desde esta perspectiva.

No, efectivamente no funcionaría en un fondo degradado, pero bueno, tampoco es una aplicación real. Si fuera un caso real de una web, dame un degradado y te lo hago :-D

Cita:

Iniciado por daPhyre (Mensaje 2407536)
Por otro lado, ya le encontré otra función interesante, que además de ahorrarnos hacer cuatro imagenes de cuartos de círculo, además se puede implementar de forma muy rápida en CSS que cambien dinámicamente, cambiandole solo el color a estos. Ya estoy viendo el universo de posibilidades que has creado con esta idea...

Ah, pues está muy bien. Ya mostrarás cuando lo tengas hecho. Me alegro de que te inspire algo nuevo.

Cita:

Iniciado por daPhyre (Mensaje 2407536)
Ahora, intentaba hacer algo similar, pero con un triangulo hacia abajo que simule una flecha hacia abajo, sin embargo, no encuentro un símbolo indicado para esto. Mi mejor idea hasta ahora es modificar un poco la "v", pero no estoy seguro que le de el efeco que deseo precisamente... ¿Alguna otra idea que pueda usar? =P

Bueno, yo ya he hecho algunas otras ideas más, pero cuando haga una que me guste la pondré por aquí.

Mikel.

Mikmoro 17/05/2008 05:31

Respuesta: Partida Todos juegan?
 
daPhyre:

Aquí está con fondo degradado :-D :-D :-D

Esquinas redondeadas con fondo degradado

Mikel.

daPhyre 19/05/2008 11:09

Respuesta: Partida Todos juegan?
 
Cita:

Iniciado por Mikmoro (Mensaje 2408653)
daPhyre:

Aquí está con fondo degradado :-D :-D :-D

Esquinas redondeadas con fondo degradado

Lo he hecho sólo para Firefox, pero ya entenderás que si lo necesitara de verdad para IE lo haría :-)

Mikel.

¡Excelente trabajo! En verdad me sorprendió tu respuesta.

Afortunadamente IE me ayudó a ver como estaba diseñado por el pequeño error, antes que tuviera que analizar por laargos minutos el código =P... (Excelente, IE ha servido para algo XP)

Muy buena estrategia el como lo has diseñado. Un poco menos óptimo que el del fondo estático, pero una buena solución en los casos antes mencionados. Excelente trabajo una vez más Mikel... :arriba:

Mikmoro 22/05/2008 04:55

Respuesta: Partida Todos juegan?
 
Añado otro más, en este caso debido a alguna consulta de usuarios.

Aquí he puesto un ejemplo mucho más simple de tabs con css, que seguramente será mucho más fácil de entender y aplicar que el otro en el que los enlaces cambian de posición según se van visitando.

Lo que más me gusta es que no necesita comentarios condicionales ni hacks para Explorer. Afinando bien he conseguido hacerlo compatible a FF, IE6 e IE7 sin filigranas.

Por si alguien no entiende algo del código, tengo previsto en breve escribir una exahustiva explicación del cómo y el por qué de todo el código.

Mikel.

daPhyre 22/05/2008 08:48

Respuesta: Partida Todos juegan?
 
Seré yo, o ya había visto este ejemplo antes?

Pero bueno, fue buena idea ponerlo aquí. Muy buen trabajo =P

Mikmoro 28/05/2008 17:07

Respuesta: Partida Todos juegan?
 
Cita:

Iniciado por daPhyre (Mensaje 2415007)
Seré yo, o ya había visto este ejemplo antes?

Sí, se lo puse al usuario para el que lo hice, al que le resultaba interesante pero muy complicado adaptar la idea de los tabs que cambiaban de sitio al ser visitados.

Mikel.

jam1138 28/05/2008 17:36

Respuesta: Partida Todos juegan?
 
Cita:

Iniciado por Mikmoro (Mensaje 2408653)
daPhyre:

Aquí está con fondo degradado :-D :-D :-D

Esquinas redondeadas con fondo degradado

Mikel.

No sé si sea así, pero yo no veo las esquinas muy redondeadas que digamos.

Así se ve en FireFox 2.0.0.14:
http://img504.imageshack.us/img504/1...concoj1.th.png


Y así en Konqueror 3.5.8 (casi, pero no igual):
http://img402.imageshack.us/img402/7...conclr2.th.png


:adios:

Mikmoro 29/05/2008 00:50

Respuesta: Partida Todos juegan?
 
¿Lo ves así directamente del enlace?

No sé qué puede pasar, porque yo lo estoy viendo bien con el mismo FF. Igual ocurre algo no previsto con la resolución, que no he tenido en cuenta. ¿Qué estás usando exactamente? Es para ver si lo veo y lo puedo corregir.

Mikel.

Mikmoro 29/05/2008 03:34

Respuesta: Partida Todos juegan? Curiosidades
 
Sí, ahora veo que hay problemas en algunos navegadores con el posicionamiento absoluto. Pue es una pena. Miraré si lo puedo arreglar, aunque no tiene buena pinta.
Gracias por el aviso.

Mikel.

jam1138 29/05/2008 12:08

Respuesta: Partida Todos juegan?
 
Cita:

Iniciado por Mikmoro (Mensaje 2424893)
¿Lo ves así directamente del enlace?

No sé qué puede pasar, porque yo lo estoy viendo bien con el mismo FF. Igual ocurre algo no previsto con la resolución, que no he tenido en cuenta. ¿Qué estás usando exactamente? Es para ver si lo veo y lo puedo corregir.

Mikel.

SO Kubuntu 7.10. Resolución 1280x800

:adios:

Mikmoro 29/05/2008 12:19

Respuesta: Partida Todos juegan?
 
He comprobado que el problema no es de resolución sino de estilos de letra, que aunque encuentre uno compatible interpretan los espacios de alrededor de forma diferente.

De momento no se me ocurre una solución :'(

Mikel.

Mikmoro 30/07/2008 12:19

Respuesta: Partida Todos juegan?
 
Aquí pongo otra de esas curiosidades que me gusta hacer.

En este caso se trata de la simulación de un escritorio. Está hecho exlusivamente para Firefox, porque utiliza pseudo-clases que no todos los navegadores entienden bien.

Es más curioso verlo a pantalla completa.

El tiro es este.

Lo más interesante es que al pulsar los iconos aparece el contenido como ventanas, que en esta ocasión tienen el texto seleccionable y los enlaces pulsables, y que he incorporado una chicheta para fijar cada ventana en el escritorio, que desaparece una vez pulsada. Tiene su miga, así que igual a alguien le puede resultar interesante para analizar.

El acceso a la hoja de estilo y el código html está en la propia página.

Raulmmmm 30/07/2008 13:58

Respuesta: Partida Todos juegan?
 
Yo he encontrado un "bug" o como se le quiera llamar en Firefox 3. Pasad en esta página el ratón por encima de lo morado y veréis un curioso efecto TV.

Mikmoro 30/07/2008 14:58

Respuesta: Partida Todos juegan?
 
¿A qué bug te refieres? ¿O es que no querías poner este mensaje aquí?

De paso, eso que dices ocurre por una cosa muy simple: al pasar el ratón pones un margen superior de 50px, luego se desplaza hacia abajo. De esa manera, cuando se desplaza ya queda fuera del ratón, de manera que deja de hacer el hover, por lo que vuelve a su posición, que se encuentra con el ratón y vuelve a bajar. Y eso hace un bucle infinito.

No tengo ni idea de por qué has puesto este mensaje aquí, Raulmmmm :-)

Raulmmmm 31/07/2008 01:24

Respuesta: Partida Todos juegan?
 
Lo he puesto aquí porque esto es sobre cosas curiosas con CSS. Además, el efecto no va en IE7, por eso digo que es un "bug".

Perdona si no iba aquí.

Mikmoro 31/07/2008 01:33

Respuesta: Partida Todos juegan?
 
Ah, vaya, no lo había entendido. Pensaba que era una respuesta a alguna otra cosa y que te habías equicovado de hilo al escribirla :risa:

Pero no, creo que no es un bug, sino como digo, un comportamiento natural, aunque no pase en IE7; creo que hace lo que debería hacer. De hecho, si estando encima del cuadro vas bajando el ratón poco a poco, hay un momento en el que deja de parpadear.

Kravitz 23/10/2008 21:20

Respuesta: Re: Partida Todos juegan?
 
Cita:

Iniciado por Mikmoro (Mensaje 2401157)
Las dos cosas :-)



Sí, con puntos (&bull;) a un tamaño de 60px.

Voy a poner aquí el código, que no es muy extenso, para que se pueda ver sin molestarse en mirarlo en la página:

oye no lo habia visto me acabo de meter y por lo visto no usas imagenes de las esquinas verdad? esta buenisimo excelente. he estado googlendo y no encontraba exactamente esto

Mikmoro 24/10/2008 01:20

Respuesta: Partida Todos juegan?
 
Hola, Kravitz. Me alegro de que te guste.

Aquí lo tienes más clarito, porque está sólo eso.

http://www.araudi.net/ejemplos/esqui...in_imagen.html

Y aquí tienes unos cuantos recursos más de cosillas que he ido haciendo:

http://www.araudi.net/

A ver si hay algo que te interese.

Saludos.

David 06/11/2008 12:21

Respuesta: Partida Todos juegan?
 
<mode troll>Voy a reportar el mensaje por autopromoción</mode troll>. :risa:.

Interesantes los efectos, aunque no has colocado más nada en los últimos meses :borracho:.

Mikmoro 06/11/2008 12:27

Respuesta: Partida Todos juegan?
 
Cita:

Iniciado por David el Grande (Mensaje 2651115)
<mode troll>Voy a reportar el mensaje por autopromoción</mode troll>. :risa:.

Bah, aunque me baneen como ya salgo en google ya me vale :risa:

Cita:

Iniciado por David el Grande (Mensaje 2651115)
Interesantes los efectos, aunque no has colocado más nada en los últimos meses :borracho:.

Es que a veces también trabajo :borracho:

Shiryu_Libra 06/11/2008 13:52

Respuesta: Partida Todos juegan?
 
Cita:

Iniciado por Mikmoro (Mensaje 2651127)
Es que a veces también trabajo :borracho:

lo mismo respondo.... :-D cuando no hago nada

:risa: :risa:

juaniquillo 09/11/2008 19:17

Respuesta: Partida Todos juegan?
 
Cita:

Iniciado por Mikmoro (Mensaje 2651127)
Es que a veces también trabajo :borracho:

¿qué? si yo creía que FDW te pasaba un sueldo... :-D

talmente 13/11/2008 12:08

Respuesta: Partida Todos juegan?
 
Dejo mi tiro de cosas curiosas:

http://www.jaimesimo.net/pruebas/circulo.html

Mikmoro 13/11/2008 12:17

Respuesta: Partida Todos juegan?
 
Pue sí, es cursioso; trabajoso pero curioso.

Cita:

Iniciado por juaniquillo (Mensaje 2655291)
¿qué? si yo creía que FDW te pasaba un sueldo... :-D

Sssssss! que no te oiga nadie (no sería malo, no)

talmente 13/11/2008 12:25

Respuesta: Partida Todos juegan?
 
Bueno, no es trabajoso por que en realidad cunto con freehand, hago una caja de texto redonda que me da el largo de las lineas de texto y la cantida de ellas, lo demas es copiar y pegar dentro de las etiquetas <p></p>. L que no se si será util.

Mikmoro 13/11/2008 12:27

Respuesta: Partida Todos juegan?
 
Bueno, como efecto visual a alguien le puede resultar útil.


La zona horaria es GMT -6. Ahora son las 09:09.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.