Question

I have 5 list items on my page, with the following CSS applied to them:

#content .gallery_work ul li {
    background-color: #FEF5D6 !important;
    border-right: 15px solid blue;
    color: #373C46;
    float: left;
    font-size: 13px;
    height: 250px !important;
    margin: 10px !important;
    text-align: center;
    width: 225px !important;
}

what I’d like to have is 5 possible border colors, and for each li to get one of the colors randomly applied to it.

Does anyone know how this can be done?

Answer 1

Just generate a number in JavaScript or your server side language of choice.

You could do it in JavaScript…

var color = "#" + Math.floor(Math.random() * 0xFFFFFF).toString(16);

…or PHP…

$color = "#" . dechex(rand(0, 0xFFFFFF));

Your comment…

Instead of using completely random colors, is there a way I could declare a number and then have it randomly choose from them?

Yes, for example…

$colors = array("#000", "#fff");

$randomColor = $colors[array_rand($colors)];