Плавающие дивы: вы можете отбросить их тень? - PullRequest
0 голосов
/ 14 ноября 2010

Я создаю веб-сайт с тремя колонками контента .....

  1. поплавок навигации: слева;
  2. основное содержание по центру
  3. правая колонка с плавающей точкой: справа;

Можно ли отбросить тень на все три из этих областей.

Я пытался, и не получалось задаться вопросом, запрещают ли div-ы конечный результат?

Ответы [ 2 ]

0 голосов
/ 07 июня 2013

Конечно, вы можете применять тени к ним одновременно, одно из решений, если вы согласны с поддержкой браузера, перечисленной здесь http://caniuse.com/css-boxshadow, - просто использовать тень блока CSS3.

просто просто нацеливайтесь на все три селектора ваших контейнеров, вот так.

</p> <pre><code>.container-left, .container-middle, .container-right { }

затем примените тень от блока вот так (не забывайте префиксы браузера), и я использую RGBAпоэтому мы также можем установить прозрачность Альфа, но вы также можете использовать HSLA.</p> <pre><code>.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); }

Надеюсь, это было полезно.

0 голосов
/ 14 ноября 2010

Существуют различные способы создания фоновых теней

1) Задать фоновый URL в качестве изображения тени для элемента div и задать поле margin-left: 5px, которое делает изображение похожим на тень.

2), чтобы получить четыре изображения, такие как верхнее, правое, нижнее, нижнее, и расположить их одно за другим после деления.

выберите то, что легко для вас, и оно должно работать идеально.См. Ниже ссылку на некоторые примеры. http://www.alistapart.com/articles/cssdropshadows/

мы реализовали тени в следующем месте для изображений

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

с помощью firebug, вы можете увидеть, как мы реализовали,это второй подход.

дайте мне знать, если у вас есть еще квесты.

...