Menu

Figure complexe en css3

fareohh 58 Messages postés samedi 9 septembre 2017Date d'inscription 12 juin 2018 Dernière intervention - 11 juin 2018 à 21:29 - Dernière réponse : ElementW 4753 Messages postés dimanche 12 juin 2011Date d'inscriptionContributeurStatut 10 août 2018 Dernière intervention
- 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

10 réponses

fareohh 58 Messages postés samedi 9 septembre 2017Date d'inscription 12 juin 2018 Dernière intervention - 12 juin 2018 à 13:16
0
Merci
Personne ? :(
Commenter la réponse de fareohh
le père. 6122 Messages postés mardi 15 mai 2012Date d'inscription 14 août 2018 Dernière intervention - Modifié par le père. le 12/06/2018 à 14:14
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. 6122 Messages postés mardi 15 mai 2012Date d'inscription 14 août 2018 Dernière intervention - 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.
fareohh 58 Messages postés samedi 9 septembre 2017Date d'inscription 12 juin 2018 Dernière intervention - 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.
le père. 6122 Messages postés mardi 15 mai 2012Date d'inscription 14 août 2018 Dernière intervention - 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.
fareohh 58 Messages postés samedi 9 septembre 2017Date d'inscription 12 juin 2018 Dernière intervention - 12 juin 2018 à 15:10
je ne connais pas du tout les area :/
le père. 6122 Messages postés mardi 15 mai 2012Date d'inscription 14 août 2018 Dernière intervention - 12 juin 2018 à 15:19
Tu as cliqué sur le lien ? Il y a toutes les explications.
Commenter la réponse de le père.
ElementW 4753 Messages postés dimanche 12 juin 2011Date d'inscriptionContributeurStatut 10 août 2018 Dernière intervention - 13 juin 2018 à 08:17
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