28106 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Sur un design de présentation d'une programmation musicale, chaque évènement à un genre musical que j'affiche dans un petit bandeau incliné en position absolue.

Mon problème : le bandeau ne passe pas au-dessus des bordures de son élément parent et je trouve ça un peu moche Smiley lol

La capture d'écran ci-jointe sera sûrement plus claire.

upload/1616581816-68566-capturedaeacran2021-03-24aa10.png

Avez-vous une idée de comment faire pour que le bandeau puisse passer au-dessus des bordures du parent ? J'ai testé pas mal de trucs mais rien n'y fait, je sèche...

J'ai tout intégré à un codepen pour que ce soit plus simple Smiley smile

https://codepen.io/Loraga/pen/jOyPaNe

Merci d'avance pour votre précieuse aide Smiley smile
Modérateur
Bonjour,

C'est quoi exactement le rendu que tu souhaites ?

EDIT: j'avais proposé une solution partielle, mais je viens de la retirer car elle ne marche pas.

Amicalement,
Modifié par parsimonhi (24 Mar 2021 - 13:40)
Salut Parsimonhi,

Merci pour ton aide ! J'avais hélas déjà essayé le box-sizing, aucun effet Smiley decu
J'ai aussi essayé d'autres méthodes moins élégantes avant de poster ici, sans succès ^^

Voilà le rendu que je souhaite obtenir :

upload/1616590622-68566-rendu.png

J'avais immédiatement pensé à box-sizing pour réussir à faire passer le bandeau par-dessus la bordure, ça me semblait logique...
Bonjour,
oui, on ne sait pas exactement ce que tu veux. Si c'est pour faire basculer le bandeau sur lui-même pour qu'il "rentre" dans le header, il faut jouer sur transform: rotate(); Je viens d'essayer sur le codepen. Avec -6deg il restera en biais mais dans le header, avec -0deg, il sera droit. Plus besoin de transform:rotate pour faire ça.
Sinon je le trouve très bien comme ça, on dit partout dans le design qu'il faut briser les figures trop carrées, les blocs trop bien rangés. Un peu de biais ne nuit pas. Surtout que l'image de fond est déjà dans une perspective inclinée, avec des cymbales en opacité.
Un collègue dans la musique ? Je vois beaucoup de hard, des synthés, c'est un studio ?
Modérateur
Salut !

Mets ton border sur .event_display et plutôt que sur event_container non ?
Meilleure solution
Modérateur
Sinon en vrac et un peu moins joli :

- si tu ne veux pas rajouter le border sur event_display tu peux rajouter un container à l'intérieur de event_container pour faire le border
- tu peux aussi mettre un padding de 2px sur event_container plutôt qu'un border (et éventuellement un box-shadow interne pour donner une couleur)

Bonne aprem !
Modifié par _laurent (24 Mar 2021 - 14:19)
Modérateur
Bonjour,

Au vue de l'image du rendu souhaité, je pense comme _laurent (et de toute façon, tout ce que fait _laurent est bien Smiley smile ).

Amicalement,
a écrit :
Mets ton border sur .event_display plutôt que sur event_container non ?

Merci Laurent ! Pourquoi faire simple quand on peut faire compliqué ? Smiley lol
Je n'y avais pas pensé...

a écrit :
(et de toute façon, tout ce que fait _laurent est bien Smiley smile )

C'est clair, mais vous m'avez tous toujours bien aidé dans des situations plus ou moins complexe. Merci pour votre aide et vos bons conseils Smiley smile

a écrit :
Un collègue dans la musique ? Je vois beaucoup de hard, des synthés, c'est un studio ?

On est un centre de formation artistique (on forme des musiciens et des techniciens du son, on a un studio et une salle de concert), et en dehors du covid on a aussi une programmation musicale variée Smiley smile

Merci à tous Smiley smile
Modifié par Loraga (24 Mar 2021 - 15:22)
Modérateur
parsimonhi a écrit :
Au vue de l'image du rendu souhaité, je pense comme _laurent (et de toute façon, tout ce que fait _laurent est bien Smiley smile ).

Smiley biggol Ooooh que non hahaha je me plante souvent ! Smiley lol