Superposer deux background ? [CSS] - HTML/CSS - Programmation
Marsh Posté le 19-12-2022 à 23:05:50
En général pour faire du style "en plus" (sans la notion d’intérêt sémantique à ajouter des balises) on utilise des pseudo block :before ou :after dans le css.
https://code-garage.fr/blog/les-pse [...] er-en-css/
Dans ton cas faudra surement mettre ton conteneur en relative et virer l'overflow hidden et ton pseudo élément en absolute avec des positions négative pour qu'il "dépasse" du conteneur.
Marsh Posté le 20-12-2022 à 20:43:12
Bonjour, je te remercie pour ton aide ça à bien fonctionner tous est comme je le voulais. J'aurais une autre question qu'y n'a rien à voir, mais j'aimerais rajouter une animation pour faire en sorte que le texte arrive depuis un côté de mon article.
Code :
|
Voici le css que j'ai fait, pour l'animation de "slidegauche" tout marche correctement, mais pour la deuxième "slidedroite" qui est censé être la même, mais de faire venir tout mon article depuis l'autre côté, elle ne fonctionne pas du tout.
J'aimerais aussi faire en sorte que les animations ne s'affiche pas tous immédiatement au chargement de la page, mais seulement quand il apparaisse à l'écran. <
Si vous avez des solutions, je suis preneur, merci.
Marsh Posté le 20-12-2022 à 22:52:30
Ton slide droite anime de margin-right: 100%; à margin-left: 0%;
Pour ce qui est de déclencher l'animation au bon moment, a ma connaissance ce n'est pas possible en css pur, faut avoir un js avec un écouteur sur onscroll qui vérifie la position du truc pour voir si il est dans le viewport.
C'est très souvent utilisé pour des effets type parallax ou apparition mais c'est aussi assez gourmand en ressource donc plutôt mal vu...
Tu as wow.js par exemple pour ce genre de truc.
Marsh Posté le 21-12-2022 à 18:46:00
Je ne comprends pas pour le slide de droit. J'ai essayé en faisait de margin-right: 100%; à margin-left: 0%; en faisant margin-leftt: 100%; à margin-right: 0%;. Il ne se passe rien, cela ne bouge pas. Il y a que quand je change le width: qu'il se passe un truc, mais là encore, c'est très bizarre, une partie du texte est déjà dans l'article et une autre partie arrive avec l'animation.
Marsh Posté le 21-12-2022 à 20:26:08
Les propriétés margin-left et margin-right sont aussi différente que width et height, donc tu n'animes rien du tout.
Si tu veux animer "une arrivée" par le coté il faut utiliser margin-left aussi bien pour les from et les to (et margin-right si tu veux renverser le mouvement).
Je t'ai fait un exemple : https://jsfiddle.net/ph24vztu/
Après le texte prend la place disponible par le bloc, ça donne un effet mais je ne suis pas sur que ce soit celui souhaité... ^^
Pour ce genre de cas je préférerais utiliser la propriété css transform:translate();.
Marsh Posté le 23-12-2022 à 14:01:25
Pour info on peut cumuler les background dans la property background :
background : url("image1.png" ), url("image2.png" ), red;
Marsh Posté le 17-12-2022 à 20:22:15
Bonjour, j'ai un problème en CSS que je n'arrive pas à résoudre. Je souhaiterais faire passer une bande orange derrière l'image et le texte tout en restant dans mon article.
Voici une partie de mon html et le css qui touche à ce problème donne
J'aimerais donc faire passer une bande orange derrière l'image, le texte et le titre sur toute la largeur de l'article en diagonal, j'ai essayé d'utiliser une div avec un background, mais je n'y arrive pas, comme la div entours tout le texte quand je change sa taille ou sa rotation tout le texte change avec. J'ai aussi essayé d'utiliser deux background dans mon <article> mais je n'y arrive pas. Je vous ai envoyé un lien WeTransfer avec un screen du site et ce que je veux faire si vous ne compreniez pas. https://we.tl/t-UzMsQFyfKl
Si vous avez des solutions, je suis preneur, Merci de votre aide