Figure complexe en css3

Fermé
fareohh Messages postés 63 Date d'inscription samedi 9 septembre 2017 Statut Membre Dernière intervention 30 mars 2021 - 11 juin 2018 à 21:29
ElementW Messages postés 4764 Date d'inscription dimanche 12 juin 2011 Statut Contributeur Dernière intervention 5 octobre 2021 - 13 juin 2018 à 08:17
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

fareohh Messages postés 63 Date d'inscription samedi 9 septembre 2017 Statut Membre Dernière intervention 30 mars 2021
12 juin 2018 à 13:16
Personne ? :(
0
Utilisateur anonyme
Modifié le 12 juin 2018 à 14:14
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 ?
0
fareohh Messages postés 63 Date d'inscription samedi 9 septembre 2017 Statut Membre Dernière intervention 30 mars 2021
12 juin 2018 à 14:16
Oui je comprends bien que ça risque d'être compliqué.. penses-tu qu'il est possible de trouver un convertisseur Vectorielle vers css3 ?
0
fareohh Messages postés 63 Date d'inscription samedi 9 septembre 2017 Statut Membre Dernière intervention 30 mars 2021
12 juin 2018 à 14:16
Et je n'ai pas compris ta question
0
Utilisateur anonyme
12 juin 2018 à 14:26
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.
0
fareohh Messages postés 63 Date d'inscription samedi 9 septembre 2017 Statut Membre Dernière intervention 30 mars 2021
12 juin 2018 à 14:34
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.
0
Utilisateur anonyme
12 juin 2018 à 15:09
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.
0
ElementW Messages postés 4764 Date d'inscription dimanche 12 juin 2011 Statut Contributeur Dernière intervention 5 octobre 2021 1 292
13 juin 2018 à 08:17
'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.
0