css Effets d'ombre sous bloc

[Anthony]

Hello,

J'essaie de faire un effet en jouant sur les ombres sous un bloc de titre, avec un code CSS différent lorsque que l'on passe sur le bloc.

.bloc-title {
    box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.25);
}

et

.bloc-title:hover {
    box-shadow: 1px 1px 9px rgba(0, 0, 0, 0.15);
}

L'effet d'ombre s'amplifie mais il n'y a pas cet effet de "décalage" que je recherche. Quel valeur faut-il modifier ?
Merci.

 

[Hamza]

Salut Anthony, tu devrais essayer de jouer sur les valeurs de décalage verticales et horizontales pour réaliser l'effet décalage.
Tu as gardé 1px dans les 2 codes. La première valeur est le décalage vertical et la seconde le décalage horizontal.
A+

 

[Anthony]

Effectivement c'est mieux en jouant sur ces valeurs, mais je n'arrive pas à faire exactement ce que je veux. Le bloc se surélève avec l'effet mais j'aimerais qu'il se décale légèrement, je ne sais pas si je m'exprime bien

 

[Nicolas]

Un petit exemple serait le bienvenue, tu n'as pas un lien d'un site où tu as remarqué cet effet CSS ?

Sinon voit ce tuto sur MDN, avec la fonction drop-shadow qui pourrait t'intéresser

drop-shadow() - CSS : Feuilles de style en cascade | MDN

La fonction CSS drop-shadow() permet d'appliquer une ombre portée sur une image. Le résultat obtenu par cette fonction est une valeur <filter-function>.

developer.mozilla.org

/* Une ombre noire avec un flou de 10px de rayon. */
drop-shadow(16px 16px 10px black)

/* Une ombre rouge avec un flou de 1rem de rayon et de .3rem d'étalement */
/* Attention, à l'heure actuelle, ce type d'ombre n'est pas pris en charge */
/* par l'ensemble des navigateurs */
drop-shadow(.5rem .5rem 1rem .3rem #e23)

 

[Jack]

La première valeur est le décalage vertical et la seconde le décalage horizontal.

Sauf erreur de ma part c'est le contraire

 

[Anthony]

Merci pour les réponses, le résultat attendu c'est comme sur ce site : https://www.neogaf.com/
En mode développeur j'ai pu récupéré leurs réglages shadow

0 0 2px 0 rgba(0,0,0,0.14), 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2)

Je découvre le fait d'aligner plusieurs valeurs séparés par des virgules...

 

[Nicolas]

Tu peux appliquer plusieurs ombres portées sur un même élément.
Pour simuler par exemple 2 sources de lumière sur un même objet: une ombre décalée vers le bas à droite et une autre vers le haut à gauche, c'est à cela que servent les différentes valeurs séparées par des virgules.

Tu peux t'amuser avec le générateur de shadow de Mozilla

Générateur de box-shadow - CSS : Feuilles de style en cascade | MDN

Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété box-shadow qui pourra être ajouté à votre feuille de style.

developer.mozilla.org

 

[Anthony]

Perfect ! Merci à tous

 

[mikadox]

Je remonte ce vieux sujet parce que dans un lien de yule sur un modèle Bootstrap Pinterest HTML - Format de tableau style Pinterest on peut voir dans le css du code pour un effet d'ombre plutôt pas mal et qui aurait bien convenu comme réponse ici.

.bloc {
  background: white;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  padding: 10px;
}

.bloc:hover {
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
  margin-top: -5px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

 

[Hamza]

C'est le margin-top: -5px; qui fait la différence avec le code proposé par Nicolas.
Du coup cela correspond plus à la demande initiale:

L'effet d'ombre s'amplifie mais il n'y a pas cet effet de "décalage"

 

[Anthony]

Ah un vieux dossier ! Merci mikadox c'est tout à fait ça