En estos días he estado trabajando en algunos diseños y en uno tuve la idea de aplicar estilos aleatorios en los comentarios. Es decir, que los comentarios tengan un color de fondo random entre unos preestablecidos y que no sigan ningún orden en particular. Para poder hacer esto recurrí a la propiedad rand de PHP.

Los comentarios eran de un theme para Wordpress así que aproveché el loop para que esto se vaya aplicando una y otra vez a cada comentario, y por ejemplo si se recarga la página tomará nuevos colores aleatorios. Pasemos al código:

<ul>
<li class="bgcolor<?php echo rand(1,5) ?>">
Contenido del comentario.</li>
</ul>

Con esto al consultar la página, se generará la clase aleatoria entre el 1 y el 5, es decir, cada elemento de la lista podrá tener la clase bgcolor1, bgcolor2, bgcolor3, bgcolor4 o bgcolor5. Podremos añadir más modificando el 5 por la cantidad que necesitemos. Luego sólo basta aplicar los estilos en el CSS para cada clase, por ejemplo:

.bgcolor1 {
background: #FCFC98;
}
 
.bgcolor2 {
background: #9ED8FC;
}
 
.bgcolor3 {
background: #99FF99;
}
 
.bgcolor4 {
background: #EBEBEB;
}
 
.bgcolor5 {
background: #FFC1FF;
}

Pueden ver un ejemplo de como funciona el resultado en esta página. Al recargarla podrán ver como los colores se van alternando aleatoriamente entre cualquiera de los 5. Además podemos añadir más clases a los elementos, para poder realizar más combinaciones aleatorias, por ejemplo con los estilos de texto. En el HTML hacemos lo siguiente:

<ul>
<li class="bgcolor<?php echo rand(1,5) ?>fontstyle<?php echo rand(1,3) ?>">
Contenido del comentario.</li>
</ul>

Luego en el CSS aplicamos estilos de texto diferentes para fontstyle1, fontstyle2 y fontstyle3, generando así la posibilidad de combinar colores y tipos de fuente aleatorias, lo cual abre más las posibilidades de combinación. Pueden ver un ejemplo en esta página.

Otra opción es aplicar las propiedades directamente en el HTML, en caso de ser estas numéricas, como por ejemplo márgenes, espaciado, tamaños de fuentes, etc. En este ejemplo pueden ver como al actualizar la página el elemento va cambiado de ubicación, aplicando lo siguiente:

<span class="mensaje" style="position:absolute;top:<?php echo rand(1,90) ?>%; left:<?php echo rand(1,90) ?>%">Hola!</span>

También podemos hacer que se impriman propiedades que no sean numéricas, esto podemos hacerlo generando un array de la siguiente manera:

<?php $align = array(
1 => "left",
2 => "right",
3 => "center",
4 => "justify", ); ?>

Con esto, asignamos a cada propiedad un número de los que van a imprimirse al azar, ahora en el HTML aplicamos lo siguiente:

<ul>
<li style="text-align:<?php echo $align[rand(1,4)] ?>">
Contenido.</li>
</ul>

Es decir, que así aplicará un alineación aleatoria entre las que se encuentran en el array que generamos para cada elemento. Pueden ver un ejemplo funcionando en esta página.

Como verán las posibilidades son muchas y las combinaciones interminables, es una buena manera de darle un poco de vida a nuestro sitio sin tener que usar AJAX, aunque sus usos son muy diferentes. Ahora, antes de cerrar se me ocurre que otra posibilidad puede ser tener varias hojas de estilo diferentes e ir cargando aleatoriamente cada una de ellas, lo cual sería algo bastante extraño, pero sobre gustos…

• Lunes 22 de Octubre de 2007 a las 0:32 ~ Translate to english
• Categorías ~ Diseño
• 6 comentarios realizados ~ Enlaces a esta entrada
• Digg ~ Menéame ~ del.icio.us ~ Fresqui ~ Mister Wong
• Enlazar este post ~
• Enlace corto ~
• ← Lo que un diseñador web debe saber
• Opciones para el loop de Wordpress →