ombre portée uniquement bas css3
Est-il un moyen de chute de l'ombre seulement sur le fond?. J'ai un menu avec 2 images à côté de l'autre. Je ne veux pas d'un droit de l'ombre car elle empiète sur le droit à l'image. Je n'aime pas à utiliser des images pour cela donc, il y a un moyen de la faire tomber seulement sur le fond comme:
box-shadow-bottom: 10px #FFF;
ou similaires?
-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');
- Votre réponse références
box-shadow-bottom
qui n'existe pas, et n'est pas pris en charge par n'importe qui. Voir nicolasgallagher.com/css-drop-shadows-without-images/demo pour la pièce de théâtre box-shadow techniques. - J'ai eu une faute de frappe, son fixe.
- Les commentaires dans votre CSS exemple sont trompeuses —
filter
va travailler dans IE8 et IE9 ainsi. Pas besoin de-ms-filter
dans ce cas. - Vous pouvez adapter ce réaliste encart css ombre : stackoverflow.com/a/20596554/1491212
Vous devez vous connecter pour publier un commentaire.
Mise à JOUR 4
La même chose que la mise à jour 3 mais avec moderne css (=moins de règles), de sorte qu'aucun positionnement sur le pseudo-élément est nécessaire.
CSS:
HTML:
Mise à JOUR 3
Tous mes réponses précédentes ont été à l'aide de supplémentaires de balisage pour obtenir cet effet, ce qui n'est pas forcément nécessaire. Je pense que c'est un beaucoup solution plus propre... le seul truc, c'est de jouer avec les valeurs pour obtenir le bon positionnement de l'ombre ainsi que le droit sur la force, l'opacité de l'ombre. Voici un nouveau violon, à l'aide de pseudo-éléments:
http://jsfiddle.net/UnsungHero97/ARRRZ/2/
HTML
CSS
Mise à JOUR 2
Apparemment, vous pouvez le faire avec un paramètre supplémentaire à la box-shadow CSS que tout le monde vient de rappeler. Voici la démo:
http://jsfiddle.net/K88H9/821/
CSS
Ce serait une meilleure solution. Le paramètre supplémentaire qui est ajouté est décrit comme:
Mise à JOUR
Découvrez la démo sur jsFiddle: http://jsfiddle.net/K88H9/4/
Ce que j'ai fait était de créer une "ombre " élément" qui se cache derrière l'élément que vous voulez avoir une ombre. J'ai fait la largeur de l'ombre "élément" pour être exactement moins large que les éléments réels par 2 fois l'ombre que vous spécifiez; ensuite, j'ai aligné correctement.
HTML
CSS
Réponse Originale À Cette Question
Oui, vous pouvez le faire avec la même syntaxe que vous avez fournis. La première valeur contrôle la position horizontale et la deuxième valeur contrôle la position verticale. Donc, il suffit de régler le premier de la valeur à
0px
et la seconde à ce décalage que vous souhaitez comme suit:Pour plus d'informations sur la boîte ombres, découvrez ces:
J'espère que cette aide.
box-shadow: 0 2px 4px #000000
est une valeur de flou. Voir ici http://jsfiddle.net/K88H9/7/. Mais vous verrez qu'il y a un peu de flou à gauche et à droite de l'élément, où en Hristo la solution n'existe pas.box-shadow-bottom
, tandis que créateur, n'existe pas réellement.:after
:after
. Check it out! Laissez-moi savoir ce que vous en pensez 🙂:after
agit bizarrement. Si je précise TOUT de z-index pour la boîte, le "après" de l'élément s'affiche en haut de la boîte-moz
et-webkit
préfixes tels qu'ils sont utilisés dans la quasi-inexistante navigateurs. caniuse.com/#search=box-shadowSuffit d'utiliser le paramètre spread pour rendre l'ombre plus petite:
CSS:
HTML:
Démo Live: http://dabblet.com/gist/a8f8ba527f5cff607327
De ne pas voir la moindre ombre sur les côtés, l' (valeur absolue) de propagation du rayon (4e paramètre) doit être le même que le rayon de flou (3ème paramètre).
box-shadow:0 8px 4px -6px
et vous verrez seulement le fond de l'ombre!Si vous avez une couleur fixe sur l'arrière-plan, vous pouvez masquer le côté-effet d'ombre avec deux masquage des ombres ayant la même couleur de l'arrière-plan et le flou = 0, exemple:
Remarque que le noir de l'ombre doit être la dernière, et a un écart négatif (-3px) afin de l'empêcher de extendig delà les coins.
Ici la violon (modifier la couleur de l'effet de masque des ombres pour voir comment il vraiment œuvres).
transparent
couleur de masquer les ombres, non?C'est toujours mieux de lire les spécifications. Il n'y a pas de
box-shadow-bottom
de propriété, et que Lea points out, vous devez toujours placer l'onu préfixé bien au fond, après le préfixe ceux.C'est donc:
CSS:
HTML:
Je pense que c'est ce que vous êtes après?
CSS:
HTML:
Que diriez-vous simplement à l'aide d'un div contenant qui a dépassement de la valeur hidden et rembourrage en bas? Cela semble comme une grande partie de la solution la plus simple.
Désolé de le dire, je ne pense pas que de moi-même mais vu quelque part d'autre.
Comme dit par Jorgen Evens.
padding-bottom
(disons 5px), vous pouvez également définir un négatifmargin-bottom
(de -5px) pour compenser l'ajout de l'espace.J'ai aussi besoin d'une ombre, mais seulement en vertu d'une image et la définir dans un peu à gauche et à droite. Cela a fonctionné pour moi:
L'élément ceci s'applique à la une de la page de l'image (980px x 300px).
Si ça aide quand à jouer avec les paramètres, ils courent comme suit:
horizontal de l'ombre, à la verticale de l'ombre, flou de distance, l'écart (c'est à dire l'ombre de la taille), et de la couleur.
Vous pouvez également utiliser
clip-path
à clip (cacher) tous déborder les bords, mais celui que vous souhaitez afficher:Voir clip-path (MDN). Les arguments de
polygon
sont les en haut à gauche point, la en haut à droite point, la en bas à droite point, et le en bas à gauche point. En définissant le bord inférieur de200%
(ou quel que soit le nombre plus grand que100%
) vous contraindre votre débordement seulement le bord inférieur.Si votre fond est solide (ou vous pouvez le reproduire à l'aide de CSS), vous pouvez utiliser un dégradé linéaire de cette façon:
CSS:
HTML:
Cela va générer une 5px dégradé en bas de l'élément, du noir à 30% d'opacité complètement transparent. Le reste de l'élément a fond blanc. Bien sûr, en changeant les 2 derniers arrêts de couleur du dégradé linéaire, vous pourriez rendre l'arrière-plan complètement transparent.
Il est préférable de chercher de l'ombre:
ce code est actuellement sur stackoverflow web.
Ce code stylo (pas par moi) démontre une super façon simple de le faire et les autres côtés par eux-mêmes tout à fait bien:
https://codepen.io/zeckdude/pen/oxywmm
mise à jour sur quelqu'un d'autre sa réponse transparant côtés au lieu de blanc de sorte qu'il fonctionne sur d'autres milieux de couleur aussi.
CSS:
HTML:
ombre interne