css Effets d'ombre sous bloc

Anthony

Membre
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.
CSS
.bloc-title {
    box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.25);
}
et
CSS
.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.
 
  Solution
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.
CSS
.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;
}
(y)

Hamza

Membre
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+
 

Nicolas

Membre actif
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

CSS
/* 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)
 

Nicolas

Membre actif
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
 

mikadox

Membre
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.
CSS
.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;
}
(y)
 

Ces discussions pourraient vous intéresser...

  • Résolue
Hello, Je voulais tester un peu node.JS et je l'ai donc installé sur mon Win 10, l'installation s'est bien passé. Par contre quand j'essaie de faire tourner un petit code simple qui permet de créer un serveur, je l'ai enregistré sous serveur.js var http = require('http')...
Bonsoir, j'ai fait une recherche sur le forum et je crois que personne n'en a encore parlé, j'ai trouvé un site pas mal lorsque j'ai installé easyPHP (qui est maintenant Webserver) : KodeShot. Cela permet de créer des captures d'écrans d'extrait de code. Vous tapez votre code, vous faites...
  • Résolue
Yo ! J'ai une div sans bordure remplie de cellules horizontales auxquelles j'applique une bordure sur le bord bas pour les séparer entre elles. Le problème c'est que la dernière je ne veux pas de bordure basse puisqu'il n'y a plus de cellule sous elle. Je n'ai pas la main sur le HTML parce que...
Haut