Figure complexe en css3
fareohh
Messages postés
63
Date d'inscription
Statut
Membre
Dernière intervention
-
ElementW Messages postés 4814 Date d'inscription Statut Contributeur Dernière intervention -
ElementW Messages postés 4814 Date d'inscription Statut Contributeur Dernière intervention -
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
- Légende figure word - Guide
- Racine complexe pci express ✓ - Forum Pilotes (drivers)
- Nombre complexe calculatrice casio fx-92 - Forum calculatrices
- Problème numérotation figure word - Forum Word
3 réponses
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 ?
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.
'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.