Page 129 - Сила CSS3 Освой новейший стандарт

Добавление падающей тени • 129

дОбавление Падающей тени

В главе 2 вы познакомились со свойством box-shadow,
позволяющим создавать падающие тени под полями.
Нашему вырванному из блокнота листу бумаги пада-
ющая тень тоже не помешает, поэтому я предлагаю
добавить ее прямо сейчас. Однако нам придется делать Рис. 3.21. Падающая тень
это с большой осторожностью, так как тень будет по- соответствует прямому кон-
вторять контуры самого поля, а не изображения с туру блока div, а не зазубрен-
рваным краем, которое мы наложили на рамку. Это ным линиям на фоновых изо-
означает, что, поместив тень слева от поля, вы увидите бражениях и изображениях
только странную прямую полосу, немного смещенную для рамок
относительно рваного края бумаги (рис. 3.21).

Чтобы избежать этой проблемы, передвиньте тень
вправо, для того чтобы она не выглядывала из-под Страница со всеми из-
левого края. Добавьте к правилу #paper следующие менениями, внесенны-
ми до этого момента, на-
три строки кода:
зывается paper_2.html.
-moz-box-shadow: 6px 5px 3px hsla(0,0%,0%,.2); Она находится в папке
-webkit-box-shadow: 6px 5px 3px hsla(0,0%,0%,.2); с остальными файлами
box-shadow: 6px 5px 3px hsla(0,0%,0%,.2); упражнений, которые
вы загрузили для этой
Теперь под нашим листом линованной бумаги справа главы.
и снизу видна небольшая серая тень (рис. 3.22).

Рис. 3.22. Падающая тень справа от блока div выглядит намного лучше

Так как Safari и Chrome не поддерживают ключевое
слово round и не умеют соответствующим образом
выводить копии изображения вдоль рамки, в нашем
варианте оборванный край блокнотной страницы мо-
жет закончиться где-нибудь посередине отверстия, что
не соответствует форме тени под ней (рис. 3.23). Этот Рис. 3.23. Падающая тень в Sa-
недостаток не бросается в глаза, но если вы уделяете fari и Chrome может появиться
деталям особое внимание, то просто удалите объяв- под пустым отверстием

www.trk.kg