Menu

Figure complexe en css3

Messages postés
60
Date d'inscription
samedi 9 septembre 2017
Dernière intervention
17 janvier 2019
- - Dernière réponse : ElementW
Messages postés
4814
Date d'inscription
dimanche 12 juin 2011
Statut
Contributeur
Dernière intervention
21 janvier 2019
- 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 !
Afficher la suite 

Votre réponse

3 réponses

Messages postés
60
Date d'inscription
samedi 9 septembre 2017
Dernière intervention
17 janvier 2019
0
Merci
Personne ? :(
Commenter la réponse de fareohh
Messages postés
6290
Date d'inscription
mardi 15 mai 2012
Dernière intervention
16 janvier 2019
968
0
Merci
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 ?
le père.
Messages postés
6290
Date d'inscription
mardi 15 mai 2012
Dernière intervention
16 janvier 2019
968 -
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.
fareohh
Messages postés
60
Date d'inscription
samedi 9 septembre 2017
Dernière intervention
17 janvier 2019
-
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.
le père.
Messages postés
6290
Date d'inscription
mardi 15 mai 2012
Dernière intervention
16 janvier 2019
968 -
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.
fareohh
Messages postés
60
Date d'inscription
samedi 9 septembre 2017
Dernière intervention
17 janvier 2019
-
je ne connais pas du tout les area :/
le père.
Messages postés
6290
Date d'inscription
mardi 15 mai 2012
Dernière intervention
16 janvier 2019
968 -
Tu as cliqué sur le lien ? Il y a toutes les explications.
Commenter la réponse de le père.
Messages postés
4814
Date d'inscription
dimanche 12 juin 2011
Statut
Contributeur
Dernière intervention
21 janvier 2019
1109
0
Merci
'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.
Commenter la réponse de ElementW