Problème css

[Linking13]

Plop !

Depuis aujourd'hui je cherche un peu partout sur le web comment faire une ombre en utilisant uniquement le html ainsi que le css, mais sans résultat. En gros, je voudrais pouvoir ajouter une ombre, que ce soit à une image (sans passer par Photoshop), ou même (et surtout d'ailleurs) à un bloc. Histoire d'être plus concret, je poste un petit exemple, avec tout d'abord, mon .html...

Code Sélectionner Étendre

<div id="corps"></div>

(Très court, oui : c'est juste un exemple hein )

... et mon .css.

Code Sélectionner Étendre

body{
background-color: #292929;
width: 1000px;
margin:auto;
}

#corps{
width: 1000px;
height: 1500px;
background-color: #626262;
margin-top: 40px;
margin-bottom: 50px;
}


Ce que je voudrais faire dans cet exemple, c'est une méthode (pas trop compliquée de préférence... ^^') me permettant de faire une ombre au corps de ma page. J'ai bien trouvé quelques bidules sur Google, néanmoins aucun ne marchait (mais je pense que c'est plutôt parce que je suis un gros branque - pour l'instant en tout cas).

Autre chose, des fois que vous trouviez une solution à mon problème (et j'espère bien ^^'), serait-il possible d'afficher cette ombre sur le même bloc que dans l'exemple du dessus, à la différence près que ce bloc possède des bords arrondis, à savoir, que son .css est comme cela :

Code Sélectionner Étendre


#corps{
width: 1000px;
height: 1500px;
background-color: #626262;
margin-top: 40px;
margin-bottom: 50px;

/* Bords arrondis */

-moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        border-radius: 20px;
}


... Voilà x) Merci d'avance !

[Daru13]

Y'a une propriété CSS3 pour ça, pas dur de trouver quand même (surtout que tu utilises déjà border-radius ^^).
http://www.css3.info/preview/box-shadow/

Après, ça ne sera pas supporté (idem pour les angles arrondis d'ailleurs) par tous les navigateurs, mais bon mis à part pour IE<9 un navigateur récent devrait le gérer sans trop de problèmes .

[Arca]

Exactement ce que j'aurai proposé si Daru ne l'avait pas fait.
Et en effet, ça marche sous Firefox sûr (moi-même essayé).

[Linking13]

Merci Daru et Zr de votre réponse Ça marche nickel

... Ou presque. En effet, c'est bizarre, mais si j'utilise uniquement la propriété -box-shadow, rien ne s'affiche : je suis obligé d'utiliser    -moz-box-shadow pour que mon ombre s'affiche, et ce, alors que je suis sous la dernière version de FF. Boarf, c'est pas bien grave, hein, de toute façon je met tout ce bordel :

Code Sélectionner Étendre

-moz-box-shadow: ... :
        -webkit-box-shadow: ... ;
        box-shadow:

Et je suis sûr que ça fonctionne (sous n'importe quel navigateur à priori) Mais bon, j'arrive pas trop à trouver une explication... x)

[Daru13]

Ouais pour certaines propriétés CSS3 j'ai la même chose - c'est pas bien compliqué à faire de toute façon donc bon .

[binbin]

Si vous voulez avoir un site entièrement opérationnel sur tous les navigateurs, vous devriez éviter un maximum encore les propriétés css3

[Daru13]

Certes mais d'un autre côté, une ombre qui n'est pas affichée n'empêchera pas un utilisateur d'IE<9 d'avoir accès au contenu ^^.
Sinon, bah soit en image mais pas forcément pratique, soit en Js mais Linking ne voulait pas de ça .

[Linking13]

Ce n'est pas que je n'en veux pas, c'est juste que je ne préfère pas voir ça tout de suite : d'abord, j'apprends le html/css, et le Javascript, on verra ça plus tard ^^'

Par contre, avec des images, je me pose une question. Imaginons que je veuille faire l'ombre d'un bloc qui contient le contenu de ma page, et donc, dont la hauteur est susceptible d'être modifiée souvent : je fais comment? x) (C'est toujours bon à savoir x)  )

[Arca]

Bah, tu fais pareil, non ?

[Daru13]

Bah tu utilises plus de div/span c'est tout x)...
Faisable en 3 blocs minimum dans ton cas .

Bah, tu fais pareil, non ?

Bah s'il n'utilise qu'une seule image (vu que c'est de la taille fixe) non .

Pour la javascript, je ne te dis pas coder toi-même ! Tu peux trouver des librairies et des scripts tout faits .

[Linking13]

Bah, tu fais pareil, non ? ahuri

Non non, ce que je veux dire, c'est est ce que c'est possible de faire une ombre sans utiliser border-radius, donc, juste en utilisant des images x)

Donc en gros, avec trois div, un contenant mon contenu, et deux autres contenant l'ombre sous forme d'une petite image genre dégradé? Ca me donnerait donc quelque chose de ce genre? ^^'

Code Sélectionner Étendre


#contenu {
with: Xpx;
}

#ombre_droite {
float: right;
height: Xpx;
width: Xpx;
background-image: url("dégradé.png");
}

#ombre_bas {
height: Xpx;
width: Xpx;
background-image: url("dégradé.png");
}


Le problème dans ce code, c'est que je ne connais pas la valeur de height, vu que la hauteur de mon div contenu est variable... Du coup, je peux pas régler la hauteur de mon div ombre_droite de sorte que le dégradé contenu dans son background continue jusqu'à arriver à la même hauteur que mon bloc contenu... :/

(C'est moi, ou j'ai l'impression d'être chiant? )

[Daru13]

J'ai pas vraiment compris ton message au dessus...
Avec une hauteur variable, tu as un bloc en haut, un bloc en bas, tous deux fixes, et un central qui se répète en y sur toute la hauteur de ton contenu, c'est tout con .

Petit schéma :


Côté code ça donne un truc comme ça ^^ :

Code (CSS) Sélectionner Étendre


.corps_haut {
width: x;
height: y;
background-image: url();
background-repeat: no-repeat;
margin: 0;
padding: 0;
}

.corps_bas {
width: x;
height: y;
background-image: url();
background-repeat: no-repeat;
margin: 0;
padding: 0;
}

.corps_millieu {
width: x;
height: 100%;
min-height: y;
background-image: url();
background-repeat: repeat-y;
margin: 0;
padding: 0;
}



[Arca]

En effet, un height:100%; pendra comme hauteur tout le div, donc ton bloc contenu.
Si jamais ça aurait été horizontale, un width:100% aurait pris la place du height.