Mettre en évidence un élément dans la page

Bonjour à tous,
Je viens faire appel à toute votre créativité
Pour un projet, on aimerait avoir un petit tutorial au démarrage de la page et pour ça, la manière la plus classique que l'on voit est d'avoir "un overlay derrière l'élément à présenter".

Le principal problème est le stacking context qui fait, qu'on est pas toujours maitre de sa position finale (z-index). Dans l'example de cette librairie, il créé un svg à la volée qui sert d'overlay et qui exclu la zone à présenter.

Très bien, c'est fonctionnel et j'aime l'idée.
J'aimerais encore plus l'idée d'avoir quelque chose en CSS . Je ne suis pas bloqué sur un overlay, je suis même assez ouvert sur la manière de présenter. Une idée que j'avais et qui ne fonctionne pas était par example

*:not(.mon-element){filter: grayscale(1) brightness(1.1)}

Je sais que la cascade est tout le fondamental de CSS, mais peut-être que je passe à coté d'une autre idée.

Merci

Hello Yordi,

J'ai attendu quelques jours avant de te répondre. J'ai pensé qu'un membre avait mieux compris que moi. Ton post n'est pas assez explicite. Je comprends bien que tu parles du z-index et ce que j'ai compris, tu souhaites mettre un visuel au devant de ta page principal.

Mais j'avoue que ta question est floue.

Bonsoir Yordi,

je n’avais même pas vu passer ta question, mais comme niuxe, as tu exemple concret à soumettre, car tu sembles avoir bien saisi le problème de cascade de filter (identique au récurent problème de opacity) .

Bonne soirée/semaine/tout quoi !

Cdt

Salut ! C'est ici l'apéro des Modo ?!

On s'y est penché il y a quelques mois pour faire un on boarding en highlightant les vrais boutons de notre interface. On est sur une appli Angular et du coup on a utilisé le positionnement du CDK Material (on l'utilisait déjà pour plein de choses) pour positionner 4 blocks sombre en opacité réduite au-dessus de tout et laisser un trou autour de la partie à highlighter. Franchement on a rien trouvé d'autre avec un meilleur ratio facilité / efficacité. Surtout qui ne bloque pas le click.

On réfléchi à mettre un backdrop-filter blur c'est stylé mais on aime bien voir le reste de l'appli derrière.

J'aime beaucoup ton idée du grayscale ! Bon le sélecteur est pas parfait, tout ce qui est dans l'élément à hightligter est aussi en gris hahaha mais je note l'idée, j'adore le style que ca pourrait donner.

Bonne journée !

Voilà un exemple de la librairie que j'ai pointé. Il créé un SVG à la fin du DOM et exclu la zone à présenter.

Merci les gars !
Modifié par Yordi (22 Jun 2022 - 14:00)