próximo »

[Thor]

Este post no es un tutorial, pero si es algo que involucra al diseño de paginas web en general al manejar el concepto de las clases, y si importancia a la hora de enfrentar un proyecto de diseño y programación web, por eso lo he posteado acá, si no encaja pues los moderadores lo moveran.

A quien no le gustaría que su web cambiara totalmente y al azar cada vez que un visitante entra en ella?, como hacerlo?, pues teniendo varios archivos .css, y un script que cambie dichos .css al azar.

Como saben se pueden manejar todos los elementos de cada pagina con los .Css, desde el fondo, los headers, colores de texto, en fin, todo es todo.

Pues aquí os dejo el script que hace esto, ademas de que se puede configurar para manejar muchas cosas mas, solo es cuestión de experimentar con la linea document.write, la cuestión radica en conocer el manejo de los archivos .css, ademas de que el script depende del numero de archivos .css a utilizar, por lo tanto se debe configurar el script, este esta hecho para 6 archivos de clases .Css, ubicados en la carpeta raiz:

Código:

<script>
//Se define la variable clase que sera un numero al azar entre 1 y 6 (Depende del numero de CSS)
var Clase=Math.round(6*Math.random())
//aqui se define la variable con el nombre del archivo al azar que se usara lineas mas abajo
if (Clase<=1)
RdClase="Clase1.css"
else if (Clase<=2)
RdClase="Clase2.css"
else if (Clase<=3)
RdClase="Clase3.css"
else if (Clase<=4)
RdClase="Clase4.css"
else if (Clase<=5)
RdClase="Clase5.css"
else
RdClase="Clase6.css"
//Se escribe la linea que define el archivo CSS a usar
document.write('<link href="'+RdClase+'" rel= "'+' stylesheet" type="text/css">')
</script>

Les dejo el ejemplo para que lograr algo como esto:









Cada vez que se actualiza la pagina, se cambia de diseño en general, ya es cuestión de experimentar con los elementos de la web (como siempre digo  Wink).

Me he inspirado en la web Css Zen Garden para darle vida a este miniproyecto y os dejo todos los recursos usados para que lo modifiquéis a vuestro antojo, y es para que vean que a la hora de diseñar una pagina, no hay limites (como en todo, solo nuestra mente nos detiene).

http://rapidshare.com/files/147472281/CSS_RAndom_Sample.rar.html

PD. Son dos post fundidos en uno.
Después dejo mi diseño para el Css Zen Garden!

[Roxas]

:O esta genial el tuto por ke no decirlo asi XD !! aunke por el momento no konosco mucho css  se ve interesante el script y su funcion !!
salud3z

[PyXOLo]

Gracias por el aporte Thor ... por cierto creo que te he visto por foros de programación

[dsjose]

Hola,

Ecelente idea, nunca se me habia ocurrido algo asi, peor no creen que sería mejor esto con PHP que JAVASCRIPT... dino no? para que haya menos código.

Un abrazo.

[.CrystalDream [Staff]]

Ya me dara ideas para rotar el estilo y color de mi blog, thnx

[P5]

no esta mal la explicacion xD auk yo no se mucho de eso creo k ebtendi como era eso 

[Carlos]

Hola,

Ecelente idea, nunca se me habia ocurrido algo asi, peor no creen que sería mejor esto con PHP que JAVASCRIPT... dino no? para que haya menos código.

Un abrazo.

No es que haya mas codigo o no, sino que con un lenguaje lado servidor(como PHP) se imprime el <link> y se empieza a cargar el archivo css justo despues de cargar la web. Javascript se ejecuta despues de que cargue la web y hasta ese entonces se empieza a cargar el archivo css. Por (muy)poco tiempo te va a cargar el contenido sin estilo/css.

[Zoom]

excelente idea man

[Leo Zero]

No habia visto esto (que perdido) muy bueno y todo pero yo lo haria asi:

Código:

<script>
//Se define la variable clase que sera un numero al azar entre 1 y 6 (Depende del numero de CSS)
var Clase=Math.round(6*Math.random())
RdClase = "class"+Clase+".css";
//Se escribe la linea que define el archivo CSS a usar
document.write('<link href="'+RdClase+'" rel= "'+' stylesheet" type="text/css">')
</script>

No hay necesidad del condicional "if" ya que lo unico que cambia es el numero y este lo genera el random...

[bit390]

 Haber, esto suena interesante y abra que hacer pruebas, me interesa mas que nada para que las firmas que tengo las pueda usar y se muestren aleatoriamente...saludos


[ offtopic]
 Con todo respeto, pero el usuario anterior a mí[ Ariannna ], suena como un bot. [/offtopic]

[ANGELiiTOO✔]

Muy bueno, muy buen aporte!

[deivid]

Buena aportación lo tender en cuenta para los próximos diseño web moderado por spam
gracias por compartir