Divs flottantes: Pouvez-vous les laisser tomber?

Question

Im la création d'un site Web qui a trois colonnes de contenu .....

1. flotteur de navigation: gauche;
2. contenu principal centré
3. Flèche de la colonne de droite: droite;

Est-il possible d'ombrer ces trois zones?

J'ai essayé et cela n'a pas fonctionné se demandant si les divs interdisent le résultat final?

Answer 1

Il existe différentes façons d'ombres faire fond

1) Pour donner url de fond comme image ombre pour la div et donner une certaine marge gauche: 5px qui fait montre comme une ombre.

2) pour obtenir quatre images comme sur la droite, la droite, le bas, l'image du bas et les positionner une par une après les divs.

Choisissez ce qui est facile pour vous et cela devrait fonctionner parfaitement. Voir ci-dessous la linke pour certains exampel http://www.alistapart.com/articles/cssdropshadows/

nous avons mis des ombres portées à l'adresse suivante pour les images

http://www.art.com/gallery/id--b1823/animals-posters.htm?ui=E1E1ADDF1A034D5D9A89DB0A8E318263

avec Firebug vous pouvez voir comment nous avons mis, sa la deuxième approche.

laissez-moi savoir si vous avez plus de questoins.

Answer 2

Bien sûr, vous pouvez appliquer une ombre portée à tous en même temps, une solution si votre ok avec le support du navigateur listé ici http://caniuse.com/css-boxshadow est simple d'utiliser CSS3 box shadow.

juste simple cible tous les trois sélecteurs de vos conteneurs comme ça.

.container-left, .container-middle, .container-right { } 

appliquent alors l'ombre de la boîte comme si (ne pas oublier préfixes navigateur) et j'utilise RGBA donc nous arrivons à définir la transparence Alpha aussi, mais vous pouvez utiliser ARFT aussi.

.container-left, .container-middle, .container-right { 
    -webkit-box-shadow: 0 0 9px rgba(20, 0, 0, 0.53); 
    -moz-box-shadow: 0 0 9px rgba(20, 0, 0, 0.53); 
    box-shadow:   0 0 9px rgba(20, 0, 0, 0.53); 
} 

Espérons que cela vous a été utile.