Partida Todos juegan?

[Mikmoro]

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

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]

ja, que bueno el tiro... Deja que reagrupe el pelotón y hago algo en el fin de semana.

[AlvaroG]

te quedó muy bien Mikmoro

Falta completarle el resto de KDE


Salú

[metacortex]

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 .

[Mikmoro]

Iniciado por alvlin

te quedó muy bien Mikmoro

Falta completarle el resto de KDE


Salú

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]

Wow! Excelente. En verdad no se me hubiera ocurrido nada similar! xD

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

[Mikmoro]

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]

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.

[metacortex]

Buenísimo . Me gustó mucho.

[Mikmoro]

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]

tan super!! me encanto el de la interfaz tipo consola
y el de desaparecer los link y colocarlos al lado tmbn
muy interesante!!

[Mikmoro]

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]

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]

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]

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

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?

Mikel.

[daPhyre]

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

¿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]

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

[Shiryu_Libra]

Mikmoro, que interesante la consola que haz creado

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

buenos trabajos

[juaniquillo]

Muy bueno el último ejemplo... 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]

Iniciado por Shiryu_Libra

Mikmoro, que interesante la consola que haz creado
dejando fluir la imaginacion reprimida o sera mucho tiempo frente al PC ???

Las dos cosas

Iniciado por juaniquillo

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:

<!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]

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]

Iniciado por casf79

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]

Iniciado por daPhyre

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

Iniciado por daPhyre

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.

Iniciado por daPhyre

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]

daPhyre:

Aquí está con fondo degradado

Esquinas redondeadas con fondo degradado

Mikel.

[daPhyre]

Iniciado por Mikmoro

daPhyre:

Aquí está con fondo degradado

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...

[Mikmoro]

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]

Seré yo, o ya había visto este ejemplo antes?

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

[Mikmoro]

Iniciado por daPhyre

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]

Iniciado por Mikmoro

daPhyre:

Aquí está con fondo degradado

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:


Y así en Konqueror 3.5.8 (casi, pero no igual):

[Mikmoro]

¿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.