Comment cacher des éléments derrière une div transparente ?
Fermé
mailyslrmt
Messages postés
1
Date d'inscription
mercredi 25 août 2021
Statut
Membre
Dernière intervention
25 août 2021
-
Modifié le 25 août 2021 à 15:02
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 25 août 2021 à 21:23
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 25 août 2021 à 21:23
A voir également:
- Comment cacher des éléments derrière une div transparente ?
- Application pour cacher des applications - Guide
- Cacher une conversation whatsapp - Guide
- Nettoyer une coque transparente jaunie - Accueil - Accessoires
- Photoshop elements gratuit - Télécharger - Retouche d'image
- Comment cacher ses amis sur facebook - Guide
1 réponse
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
25 août 2021 à 21:23
25 août 2021 à 21:23
Bonjour,
En prenant en compte que les fenêtres peuvent être déplacées et que le fond est une image ou un dégradé (gradient css), une solution possible :
Ajouter un élément (div) dans la fenêtre sur lequel on va appliquer la même image de fond (ou le même dégradé) que le conteneur principal avec les mêmes dimensions pour ne pas qu'elle soit déformée.
Puisque la fenêtre sera plus petite que le conteneur principal, on ajoute un overflow: hidden; sur la fenêtre pour que l'image de fond dans la fenêtre ne déborde pas de celle-ci.
Enfin, puisque la position de la fenêtre n'a pas la même origine que la position du conteneur principal, il faut adapter la position de l'image de fond dans la fenêtre (avec la propriété css background-position) pour que le fond dans la fenêtre se superpose correctement par rapport au fond du conteneur principal. C'est cette propriété qu'il faudra modifier en js lors du déplacement des fenêtres pour que les images de fond se superposent correctement (et créer l'effet de "disparition" des fenêtres en arrière plan).
Comme une démo vaut mieux que mille mots : https://jsfiddle.net/eL3xy1f9/
Pour la partie js, presque tout le code vient d'un exemple que j'ai repris sur w3school juste pour ajouter le déplacement des fenêtres (drag).
J'ai juste ajouté deux lignes dans la fonction js elementDrag() pour mettre à jour la position du fond de la fenêtre lors de déplacement.
J'ai aussi ajouté quelques lignes à la fin du js pour ajouter la classe "active" sur la dernière fenêtre cliquée ainsi que le code css correspondant (pour afficher une bordure rouge et mettre la fenêtre active au premier plan).
Le principal réside dans le css comme expliqué au début de mon message. J'ai ajouté un maximum de commentaire en espérant que le code puisse se comprendre de lui même, mais j'avoue que cette "astuce" ressemble plus à du hack css qu'à une vrai solution, d'où le fait qu'elle ne soit pas forcément simple et rapide à expliquer en détail.
Ne pas hésiter à modifier le code de la démo et inspecter le résultat avec les outils de dév du navigateur pour mieux comprendre.
Pour finir, je ne suis pas du tout expert en interface utilisateur ni en design mais proposer une interface avec des fenêtres entièrement transparentes ne me semble pas le meilleur choix.
Tu pourrais simplement appliquer une transparence sur le contour des fenêtres et utiliser un fond uni (ou une autre image/un autre dégradé) pour le contenu de la fenêtre, ton interface serait selon moi plus claire et tu pourras éviter cette astuce bancale (bien que je ne vois pas vraiment d'autre solution pour répondre au premier besoin).
En prenant en compte que les fenêtres peuvent être déplacées et que le fond est une image ou un dégradé (gradient css), une solution possible :
Ajouter un élément (div) dans la fenêtre sur lequel on va appliquer la même image de fond (ou le même dégradé) que le conteneur principal avec les mêmes dimensions pour ne pas qu'elle soit déformée.
Puisque la fenêtre sera plus petite que le conteneur principal, on ajoute un overflow: hidden; sur la fenêtre pour que l'image de fond dans la fenêtre ne déborde pas de celle-ci.
Enfin, puisque la position de la fenêtre n'a pas la même origine que la position du conteneur principal, il faut adapter la position de l'image de fond dans la fenêtre (avec la propriété css background-position) pour que le fond dans la fenêtre se superpose correctement par rapport au fond du conteneur principal. C'est cette propriété qu'il faudra modifier en js lors du déplacement des fenêtres pour que les images de fond se superposent correctement (et créer l'effet de "disparition" des fenêtres en arrière plan).
Comme une démo vaut mieux que mille mots : https://jsfiddle.net/eL3xy1f9/
Pour la partie js, presque tout le code vient d'un exemple que j'ai repris sur w3school juste pour ajouter le déplacement des fenêtres (drag).
J'ai juste ajouté deux lignes dans la fonction js elementDrag() pour mettre à jour la position du fond de la fenêtre lors de déplacement.
J'ai aussi ajouté quelques lignes à la fin du js pour ajouter la classe "active" sur la dernière fenêtre cliquée ainsi que le code css correspondant (pour afficher une bordure rouge et mettre la fenêtre active au premier plan).
Le principal réside dans le css comme expliqué au début de mon message. J'ai ajouté un maximum de commentaire en espérant que le code puisse se comprendre de lui même, mais j'avoue que cette "astuce" ressemble plus à du hack css qu'à une vrai solution, d'où le fait qu'elle ne soit pas forcément simple et rapide à expliquer en détail.
Ne pas hésiter à modifier le code de la démo et inspecter le résultat avec les outils de dév du navigateur pour mieux comprendre.
Pour finir, je ne suis pas du tout expert en interface utilisateur ni en design mais proposer une interface avec des fenêtres entièrement transparentes ne me semble pas le meilleur choix.
Tu pourrais simplement appliquer une transparence sur le contour des fenêtres et utiliser un fond uni (ou une autre image/un autre dégradé) pour le contenu de la fenêtre, ton interface serait selon moi plus claire et tu pourras éviter cette astuce bancale (bien que je ne vois pas vraiment d'autre solution pour répondre au premier besoin).