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:
<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.htmlPD. Son dos post fundidos en uno.
Después dejo mi diseño para el Css Zen Garden!
