Figure complexe en css3

Fermé
Messages postés
63
Date d'inscription
samedi 9 septembre 2017
Statut
Membre
Dernière intervention
30 mars 2021
-
Messages postés
4764
Date d'inscription
dimanche 12 juin 2011
Statut
Contributeur
Dernière intervention
5 octobre 2021
-
Bonjour, dans un projet web, j'ai pour objectif de reproduire cette figure, mais en css. Avec le texte bien sûr ^^ j'ai essayé de voir comment faire mais je n'y arrive pas du tout .. merci d'avance !

3 réponses

Messages postés
63
Date d'inscription
samedi 9 septembre 2017
Statut
Membre
Dernière intervention
30 mars 2021

Personne ? :(

Bonjour

Non, personne n'est suffisamment masochiste pour essayer de faire ça en pur CSS. Pour ma part, ça dépasse de très loin mes compétences dans ce domaine.

En jouant sur les mots, tu peux le faire en CSS avec background-image, mais je suppose que tu vas considérer que c'est de la triche.

Le plus raisonnable serait de mettre une image ou un SVG ou encore de dessiner dans un canvas.

Question : pourquoi tiens-tu à le faire en CSS ?
Messages postés
63
Date d'inscription
samedi 9 septembre 2017
Statut
Membre
Dernière intervention
30 mars 2021

Oui je comprends bien que ça risque d'être compliqué.. penses-tu qu'il est possible de trouver un convertisseur Vectorielle vers css3 ?
Messages postés
63
Date d'inscription
samedi 9 septembre 2017
Statut
Membre
Dernière intervention
30 mars 2021

Et je n'ai pas compris ta question
Utilisateur anonyme
Non, je ne pense pas qu'un convertisseur vectoriel vers CSS3 existe, car CSS3 n'a aucun rapport avec le dessin vectoriel.

Quant à ma question, je te demande simplement pourquoi tu sembles tenir, pour faire ce dessin , à utiliser une méthode complètement inappropriée.
Messages postés
63
Date d'inscription
samedi 9 septembre 2017
Statut
Membre
Dernière intervention
30 mars 2021

Car j'aimerai pouvoir avoir une action sur chaque partie de la rosasse :/
Par exemple, quand je passe la souris sur "Joy", j'ai une description qui apparaît.
Utilisateur anonyme
Tu n'as pas besoin de faire le dessin en CSS pour ça.
Si j'avais à le faire, je pense que je créerais une image classique avec <img>, que je découperais en <area> pour gérer le "hover" soit en CSS soit en javascript selon la complexité de l'animation. Mais le dessin lui-même ne serait certainement pas en CSS.
Messages postés
4764
Date d'inscription
dimanche 12 juin 2011
Statut
Contributeur
Dernière intervention
5 octobre 2021
1 306
'lut,
comme dit le père., il n'est pas possible de faire ça avec du HTML et CSS3 sans que ça relève de la follie (c'est pas impossible ceci dit).
Pour faire ton dessin et permettre des zones de clic différents, il faut que tu utilises du SVG que tu incluras directement dans ta source HTML. Comme les éléments SVG sont des éléments du DOM comme les autres, tu peux leur appliquer des effets de style CSS ainsi que réagir aux évènements JavaScript standards, dont
mouseover
et
mouseout
que tu peux utiliser pour afficher et cacher tes descriptions.