4
votes

donner de la profondeur aux divs avec la propriété css box-shadow

J'essaie d'obtenir cet effet:

Jusqu'à présent, je l'ai mais je ne peux pas obtenir les ombres correctes et pourquoi la plupart des exemples avez rgb au lieu de hex?

<div>One</div>
<div>One</div>
<div>Three</div>

div {
  margin: 16px 0;
  box-shadow: 2px 2px 5px #E6E6E6, 0px 0px 0px #E6E6E6, 0px 0px 0px #E6E6E6;
  border-radius: 4px;
}

html css

3 commentaires

En utilisant rgba (...) vous pouvez en fait contrôler l'opacité de l'ombre de la boîte;)

J'ai aussi des problèmes comme ça. C'est toujours soit trop étalé, soit trop épais: p Mais je pense que l'ajout de border: 1px solid # E6E6E6; padding: 3px; lui donne un peu plus de profondeur

Vous pouvez peut-être consulter CSS-Shadow-Generator .

3 Réponses :

0
votes

Vous avez déjà fait un excellent travail. La seule modification nécessaire est de créer une boîte-ombre qui n'a pas de décalage ax ou y et un peu plus de «flou».

Utilisation de base:

<div>One</div>
<div>One</div>
<div>Three</div>

2 commentaires

Une fois que vous avez vérifié la réponse, il utilise la marge deux fois.

Un simple commentaire ferait l'affaire, petite erreur. Corrigé. Merci @Terry

-2
votes

Utilisez ceci:

border-radius: 4px;
box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
border-color: rgba(223,225,229,0);

1 commentaires

" Si vous donnez un poisson à un homme, il a de la nourriture pour un jour, mais si vous lui apprenez à pêcher, il a de la nourriture chaque jour. "

4
votes

La raison pour laquelle l'utilisation des couleurs RGBA est plus courante avec les ombres rectangulaires est qu'elle se fondra bien avec l'arrière-plan. En utilisant une couleur, vous pourriez finir par avoir un effet "lueur" lorsque la luminosité de la couleur de l'ombre de la boîte est plus élevée (c'est-à-dire plus brillante) que l'arrière-plan.

Pour obtenir l'effet que vous souhaitez obtenir, c'est en fait assez simple:

Vous utilisez une boîte-ombre générale qui n'est pas du tout décalée, pour donner aux 4 bords une sorte d'ombre
Vous utilisez une deuxième boîte-ombre décalée de quelques pixels, pour donner la directionnalité de l'ombre, ce qui donne alors un effet de profondeur

Grocking l'opacité actuelle est principalement une chose d'essais et d'erreurs. Voir la preuve de concept ci-dessous:

<div>One</div>
<div>One</div>
<div>Three</div>

div {
  margin: 16px 0;
  box-shadow: 0 0 5px rgba(0,0,0,.05), 2px 2px 5px rgba(0,0,0,.1);
  border-radius: 4px;
  padding: 16px;
  width: 160px;
}

0 commentaires