28112 sujets

CSS et mise en forme, CSS3

Bonjour à tous et à toutes,

Je souhaiterai créer un arrière-plan composé de cercles/sphères/bulles (appelez-les comme vous voulez Smiley langue ) de couleurs et de taille différentes (voir un exemple ci-dessous), en CSS afin que ce soit léger et surtout responsive ?
upload/1598265863-40463-pointscouleurs2.jpg
Parce que je sais faire un cercle en CSS, mais je ne sais pas comment faire suffisamment pour en tapisser (le mot est un peu fort) un arrière plan et qu'ils soient positionnés aléatoirement.
Sous Photoshop ou Illustrator pas de soucis, mais en CSS... Smiley sweatdrop Smiley ohwell

Pouvez-vous m'aider SVP ?
Modifié par spip93 (24 Aug 2020 - 12:44)
Modérateur
Bonjour,

c'est une question complexe. On peut faire ça avec du svg, piloté par du javascript (ou un language serveur comme du php).

Seulement pour que ça rende bien, il faut un bon algorithme de répartition, sinon tu risques, au lieu d'avoir une répartition régulière comme dans l'exemple, des zones avec de larges «trous» blancs et des zones avec des entassements de points.

Voici un exemple d'algorithme: https://observablehq.com/@mbostock/best-candidate-circles

Sinon le plus simple est de faire le fond avec Illustrator et de l'exporter en svg, ce ne sera sans doute pas trop lourd et s'adaptera à toutes tailles.
Meilleure solution
Bonjour Kustolovic,

Merci pour ta réponse. Smiley merci
Je pense que je vais opter pour ta seconde solution parce que je ne peux/veux pas trop utiliser javascript. Avec ça, je peux faire ça beaucoup plus facilement et rapidement avec Illustrator Smiley murf
Cependant, je ne suis pas fermé à d'autres solutions. Ça me permettra de progresser en CSS Smiley langue