ombre portée pour l'en-tête de menu dans css

J'ai un menu header. Les effets d'ombre portée de celui-ci comme présent dans le photoshop adobe sont:ombre portée pour l'en-tête de menu dans css

Blend Mode: Multiply 
Opacity: 0.25 (25%) 
Distance: 3px 
Spread: 15% 
Size: 9px 
Color: #282829

Je suis en train d'utiliser le code ci-dessus dans mon CSS pour mon en-tête de menu (Adove) mais malheureusement pour certaines raisons, je suis incapable de le reproduire . Le code que je suis en utilisant l'en-tête de menu sont:

position: relative; 
    top: -890px; 
    background-color: rgba(0, 0, 0, 0.5); 
    height: 89px; 
    border-bottom: 3px solid #EF7440; 
    overflow: hidden;

Source

2017-06-02 Anonymous

@MichaelCoker 'position: relative; en haut: -890px; couleur de fond: rgba (0, 0, 0, 0,5); hauteur: 89px; bordure inférieure: 3px solide # EF7440; overflow: hidden; ' –

@MichaelCoker Y a-t-il un problème avec' la couleur de fond'? Je l'ai juste mis là au hasard pour correspondre à l'image, mais malheureusement, cela n'a pas fonctionné. –

@MichaelCoker Je pense qu'il y a une certaine confusion. J'essaie de reproduire l'image que j'ai affichée. Le code que j'ai utilisé pour répliquer l'image est: 'position: relative; haut: -890px; background-color: rgba (0, 0, 0, 0,5); hauteur: 89px; bord inférieur: 3px solide # EF7440; débordement: caché; 'mais malheureusement, pour certaines raisons, cela ne fonctionne pas. Je n'ai pas mentionné la partie textuelle du code qui, je crois, n'est pas nécessaire pour reproduire une image. –

Essayez et ajuster les valeurs de pixels si nécessaire. La 4ème valeur est la taille du flou, la 3ème valeur est la taille de l'écart. Les valeurs 1 et 2 ajustent les décalages X et Y du dropshadow.

-webkit-box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25); 
-moz-box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25); 
box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25);

Source

2017-06-02 21:49:01 Korgrue

Seul le dernier est sélectionné. Les deux précédents ('-webkit' et' -moz') ne fonctionnent pas. –

Ce ne sont que des options de préfixe. -webkit est Safari et Chrome. -moz est Mozilla. Votre navigateur utilisera le nom de la propriété qu'il reconnaît et ignore les autres. Il devrait seulement utiliser un à la fois - mais vous devez vous assurer de faire correspondre les valeurs sur tous les 3 afin que le rendu est le même dans tous les navigateurs. – Korgrue

ombre portée pour l'en-tête de menu dans css

Répondre

Questions connexes