Blog d'aide de Blog4ever

:bd: à toutes et tous
Je voudrai faire un effet d'ombre portée comme cette image :



Quel code CSS doit on mettre ???
Merci pour votre aide.
:sol::n7:

Bonjour Soleilvie,

Je n'ai pas de réponse "code CSS" à ta question mais il est possible avec des logiciels de traitement d'images, ou de présentation d'images, comme PowerPoint, de définir et paramétrer de manière très fine et complète la nature, la couleur, l'intensité, l'étendue d'une ombre portée.

Tu n'aurais alors qu'à enregistrer l'image avec ombre portée et c'est elle que tu placerais sur ton blog, sans avoir à faire des essais "à l'aveugle" de codes CSS.

Cela me semble plus simple ainsi...

Bonne chance !

 Réseau BP
 pour ta réponse, oui cela serait possible avec mon logiciel Photofiltre Studio.
Mais j'aurai préféré de pouvoir mettre un code au lieu de refaire mes créations.

Je croise les doigts pour quelqu'un d'autre aie une solution.

Bonne année 2020
:sol::n7:

Coucou

Il y a la solution de mettre un code Css

border: 1px solid #847777;
box-shadow: 5px 1px 20px 1px
#000;


Il faut voir dans quel code se trouve l'image.
Genre:

background-image: url (....);
Donnes moi l'adresse de l'article où se trouve cette image et j'irai voir.

simon
L'image en question est une image que j'ai pris sur le net pour vous montrer ce que je voulais faire.
En fait, je voudrais si c'est possible faire l'ombre avec box-shadow comme sur cette image à la barre de navigation dans CSS perso de Graph Ô Soleil
/*___________________________________                  
DEBUT PARTIE BARRE NAVIGATION
/*+++++++++++++++++++++++++++++++++++*/
nav { ici 
margin-top: 5px !important; 
width: 1140px !important; 
height: 72px !important; 
background-image: url("https://static.blog4ever.com/2013/02/727680/fd-2-2020-barr-nav.png")!important; 
background-repeat: repeat !important; 
background-position:center !important;
:sol:

Dernière modification le samedi 11 Janvier 2020 à 19:56:43

re

C'est pas facile sur un fond sombre de faire ressortir une ombre mais essaies ce code.

ligne 44

nav {
  margin-top: 5px !important;
  width: 1140px !important;
  height: 72px !important;
  background-image: url("https://static.blog4ever.com/2013/02/727680/fd-2-2020-barr-nav.png")!important;
  background-repeat: repeat !important;
  background-position:center !important;
  border: 1px solid #000;
box-shadow: 5px 0px 20px 0px
#000;

}

 mais  ce n'est pas ça que je veux comme effet
j'ai mis des fléches sur l'image d'exemple.


l'effet donne comme si le fond se lève de chaque côté
Je ferme mon PC 
Bonne soirée et aussi bon dimanche
:sol:

J'ai fait des modifs dans le Css


L'ombre de la barre n'est pas facile car le fond est teinté.

début du css

.main {
    border-left: 0px solid
#dfdfdf;
border-right: 0px solid
    #dfdfdf;
}

nav {
  margin-left: 1.8px;
  margin-top: 5px !important;
  width: 1130px !important;
  height: 72px !important;
  background-image: url("https://static.blog4ever.com/2013/02/727680/fd-2-2020-barr-nav.png")!important;
  background-repeat: repeat !important;
  background-position:center !important; 
  box-shadow: 0 10px 50px 0 #000;
  border: 4px ridge #FC977F!important;
}



#contenu {
    background-image : transparent !important;
    background-repeat: repeat;
    border: 2px solid #fff;
    background-attachment: fixed !important;
    width: 1140px !important;
    margin: 60px auto 0; /*descendre le logo pour voir s'inscrire se connecter*/  
    border: 8px double #CCB972;
    border-radius: 5px;
    box-shadow:2px 2px 10px -2px #804040!important;
    position: relative;
}

simon
Si je comprend bien la ligne blanche verticale faisait partie
de la barre navigation ???

Pour l'effet que je voulais pour la barre de navigation ce n'est pas encore ça.
Mais je vais tenter de faire autrement. En utilisant mon logiciel graphique.
je te tiens au courant.

:sol:

Non c'est la partie " main" j'ai mis 0px ( début Css )

Comme je disais pour la partie ombre, ce n'est pas facile de faire ressortir la barre avec un fond sombre.

simon
J'ai compris :vazy:

Regarde j'ai fait mon image avec photofiltre studio. Ok ce n'est pas parfait mais cela ressemble à ce que je voulais.

Par contre, il reste des ombres que j'ai pas réussi à éliminer,
où se trouvent elles ??? 
J'ai besoin de ton aide.

Voir capture écran :


Ce n'est pas urgent on est dimanche...
:sol:

re


Partie nav et partie contenu  j'ai ajouté ceci --> ligne 55 et 245

box-shadow: 0px 0px 0px 0px;

simon
:coupe: tu es un chef

Sujet clos

:sol: