Blog d'aide de Blog4ever

Blog d'aide de Blog4ever

Code CSS pour effet d'ombre portée spéciale

2002 appréciations
Hors-ligne
 à 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.

274 appréciations
Hors-ligne
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 !

2002 appréciations
Hors-ligne
 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

1819 appréciations
Hors-ligne
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.


2002 appréciations
Hors-ligne

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;


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

1819 appréciations
Hors-ligne
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;


}


2002 appréciations
Hors-ligne
 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

1819 appréciations
Hors-ligne
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;
}


ligne 247

#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;
}

2002 appréciations
Hors-ligne

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.


1819 appréciations
Hors-ligne
Si je comprend bien la ligne blanche verticale faisait partie
de la barre navigation ???

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.


2002 appréciations
Hors-ligne

J'ai compris 

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...

1819 appréciations
Hors-ligne
re


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

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

2002 appréciations
Hors-ligne

 tu es un chef

Sujet clos

Ce sujet est fermé, vous ne pouvez pas y répondre
Vous ne disposez pas des permissions nécessaires pour répondre à un sujet de la catégorie CSS Personnalisé pour le RapidDesign.

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 5937 autres membres