web-dev-qa-db-fra.com

Générer une couleur aléatoire avec du CSS pur (pas de javascript)?

Est-il possible de générer des couleurs aléatoires avec du CSS pur et sans utiliser javascript? C'est probablement impossible mais je suis toujours curieux.

csscss3randomcolors
26
Arch1tect

J'ai trouvé quelque chose pour vous ici , mais il utilise PHP. Je pense que c'est impossible avec du CSS simple.

5
Iwo Kucharski

Ce n'est pas vraiment possible en CSS pur.

Cependant, l'utilisation d'un pré-processeur tel que SASS ( exemple ) ou LESS ( exemple ) peut générer des couleurs aléatoires pour vous car elles sont construites à l'aide de langages de script.

Une note secondaire qui pourrait aider les lecteurs à l'avenir est la possibilité d'utiliser variables CSS . On peut déclarer une variable CSS en disant

element {
  --main-bg-color: brown;
}

et l'utiliser comme ça:

element {
  background-color: var(--main-bg-color);
}

Maintenant, nous pouvons le changer en utilisant JS:

// From http://stackoverflow.com/a/5365036/2065702
var randomColor = "#"+((1<<24)*Math.random()|0).toString(16); 

document.documentElement.style.setProperty('main-bg-color', randomColor);

Ou vous pouvez utiliser une manière complètement différente de sélectionner une couleur aléatoire (comme la saisie utilisateur). Cela permet des possibilités comme le thème. Une chose que vous devez considérer est support du navigateur parce que ce n'est pas génial en ce moment.

6
Zach Saucier
<body style='background-color:<?php printf( "#%06X\n", mt_Rand( 0, 0x222222 )); ?>'>

Utiliser PHP

4
Jono

Pas vraiment. Le dynamisme ne peut être implémenté qu'avec le support des scripts.

3
Bosco Mabutao

selon ce site, http://blog.codepen.io/2013/08/26/random-function-in-sass/ c'est possible mais pas avec du css pur

3
Spycomb

Pas exactement au hasard mais avec CSS:

Étape 1 - Sélectionnez les arrière-plans interrogés, triez-les en séquence et ajustez la fréquence

    @keyframes bgrandom {
    0% { background: linear-gradient(90deg, rgba(255,255,255,0.98) 50%, rgba(255,255,255,0.96) 0%); }
    50% { background: linear-gradient(90deg, rgba(255,255,255,0.98) 50%, rgba(255,255,255,0.96) 0%); }

    55% { background: linear-gradient(90deg,  rgba(255,255,255,0.96) 50%, rgba(255,255,255,0.98) 0%); }
    80% { background: linear-gradient(90deg, rgba(255,255,255,0.96)  50%, rgba(255,255,255,0.98) 0%); }

    85% { background: linear-gradient(90deg, rgba(255,255,255,0.96) 50%, rgba(255,255,255,0.94) 0%); }
    100% { background: linear-gradient(90deg, rgba(255,255,255,0.96) 50%, rgba(255,255,255,0.94) 0%); }
    }

Étape 2 - Lancez l'animation (longueur animationName repeatMode)

    #element{  animation: 1.2s bgrandom infinite; }

Facile à utiliser, à personnaliser et fonctionne très bien. Une technique similaire peut être utilisée pour les curseurs, les filateurs, etc.

2
DIGmetrics