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 4814 Date d'inscription dimanche 12 juin 2011 Statut Contributeur Dernière intervention 5 octobre 2021 - 13 juin 2018 à 08:17
ElementW Messages postés 4814 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 !
A voir également:
- Figure complexe en css3
- Tableau complexe word - Guide
- Figure word - Guide
- Problème numérotation figure word - Forum Word
- Racine complexe pci express ✓ - Forum Windows XP
- Problème de légende !! ✓ - Forum Word
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
12 juin 2018 à 13:16
Personne ? :(
Utilisateur anonyme
Modifié le 12 juin 2018 à 14:14
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 ?
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 ?
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
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 ?
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
12 juin 2018 à 14:16
Et je n'ai pas compris ta question
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
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.
Par exemple, quand je passe la souris sur "Joy", j'ai une description qui apparaît.
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.
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.
ElementW
Messages postés
4814
Date d'inscription
dimanche 12 juin 2011
Statut
Contributeur
Dernière intervention
5 octobre 2021
1 228
13 juin 2018 à 08:17
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
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
mouseoveret
mouseoutque tu peux utiliser pour afficher et cacher tes descriptions.