28172 sujets

CSS et mise en forme, CSS3

Box shabow sur bordure extérieure d'un grid layout conteneur

Administrateur
Hello,

C'est assez compliqué de t'en sortir de la manière dont tu procèdes.

Je vois deux possibilités :
1- appliquer le box-shadow directement sur les items
2- passer la grille en grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); pour les les items s'adaptent à leur parent

Courage !
Administrateur
Laurentfrom47 a écrit :
le problème est que je doit avoir toujours des items carrés lol en fait je me demande si c'est possible ce que je veux du moins pas encore ?

Du coup cela devient bien plus compliqué.

J'ai trouvé une astuce qui me semble faire le boulot : remplacer ton box-shadow par un filtre CSS : 
filter: drop-shadow(3px 1px 4px rgba(0, 0, 0, 0.12));
Bon en fait non ça marche pas dans mon cas, merci pour ton aide Raphael, mais tu penses pas qu'il manque un truc à grid layout pour faire ce que je voulais ? C'est à dire entourer uniquement les éléments du conteneur!
Modifié par Laurentfrom47 (06 Feb 2018 - 15:08)
Administrateur
Laurentfrom47 a écrit :
tu penses pas qu'il manque un truc à grid layout pour faire ce que je voulais ? C'est à dire entourer uniquement les éléments de conteneur!

Bah ce que tu souhaites n'est pas forcément lié à Grid Layout, mais techniquement ce qui s'en rapproche le plus est drop-shadow, à moins que la solution ne m'échappe complètement.

Note que "en théorie" tu peux créer une ombre dure (sans dégradé) avec une 4è valeur dans la propriété (mais je ne crois pas qu'un navigateur le reconnaisse).
Modérateur
Laurentfrom47 a écrit :
C'est à dire entourer uniquement les éléments du conteneur!

C'est une limitation générale de CSS, qu'on ne peut atteindre non plus avec flex, table, inline-block, etc.

Par exemple si on ne veut qu'une bordure extérieure il faut s'amuser à spécifier la bordure adéquate de chaque élément, et si on ne sait pas où ils passent à la ligne c'est galère.
kustolovic a écrit :

C'est une limitation générale de CSS, qu'on ne peut atteindre non plus avec flex, table, inline-block, etc.

Par exemple si on ne veut qu'une bordure extérieure il faut s'amuser à spécifier la bordure adéquate de chaque élément, et si on ne sait pas où ils passent à la ligne c'est galère.


Oui je pensais pas qu'on ne pouvais pas faire ça simplement! Et oui on peut le faire par éléments mais oui on sait pas trop quand ça passe à la ligne ou alors avec des media queries mais je te dis pas le bordel lol
Modérateur
Laurentfrom47 a écrit :
Re,

C'est marrant elle en parle dans cette vidéo vers 14mn https://youtu.be/FEnRpy9Xfes actuellement ça n'existe pas mais peut être dans l'avenir.


Okay, donc je n'ai probablement pas compris la question et le rendu souhaité, la démo avec mix-blend-mode ne dépend pas de la valeur de display , l'essentiel ici est que les éléments se touchent pour fondre l'ombrage des parties adjacentes. Smiley cligne (ou un outline https://codepen.io/gc-nomade/pen/QQMEyd )
Modifié par gcyrillus (13 Feb 2018 - 18:30)
Sujet clos
Aller à