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

Разные варианты стилизации полноразмерных фотографий и эскизов • 167

атрибута, с помощью селекторов атрибутов можно выбирать изображения разных
типов независимо друг от друга.
Начнем с того, что переместим эскиз карты к левому краю страницы вместо правого:

img[src*=thumbnails] {
float: left;
margin: 0 20px 10px 0;
}

Селектор атрибутов * приказывает браузеру «найти все атрибуты scr, в значении
которых содержится строка «thumbnails». Этому критерию соответствует изобра-
жение карты:

<img src="thumbnails/map.png" width="100" height="100"
¬ alt="">

Рис. 4.4. Эскиз карты теперь находится на странице слева, в отличие от всех остальных
изображений, которые выводятся справа

Теперь поработаем над стилизацией фотогра-
фий. Я предлагаю сделать так, чтобы они стали Значение -4px свойства box-
похожи на снимки камерой Polaroid. Добавьте shadow — радиус распростране-
следующее новое правило: ния, который не поддерживается
в Safari 4 (включая версию для
img[src*=photos] { iOS 3 и более ранние). Таким об-
padding: 5px 5px 30px 5px;
background: #fff; разом, в этих браузерах тень не
-moz-box-shadow: 3px 6px 8px -4px #999; отображается. Для того чтобы
-webkit-box-shadow: 3px 6px 8px -4px справиться с этой проблемой,
#999; можно было бы удалить значение
box-shadow: 3px 6px 8px -4px #999; радиуса распространения, однако
-moz-transform: rotate(2deg); это испортит впечатление от тени
-o-transform: rotate(2deg); в Safari 5 и Chrome, которые под-
-webkit-transform: rotate(2deg); держивают все значения свойства
transform: rotate(2deg); box-shadow. Решайте сами!
}

Теперь вокруг всех фотографий отображается белая рамка, они отбрасывают легкую
тень и выводятся под небольшим углом (рис. 4.5).

www.trk.kg