Чтение онлайн

на главную - закладки

Жанры

CSS3 для веб-дизайнеров
Шрифт:

Масштабирование

Возьмем горизонтальный список из трех фотографий с небольшой рамкой, на которых запечатлена недавняя поездка на Мартас-Виньярд, небольшой остров у побережья Массачусетса (рис. 4.01). Сетка из изображений-ссылок – вполне обыкновенный дизайнерский прием.

Рис. 4.01. Сетка из трех фотографий-ссылок

Для разметки

мы вновь воспользуемся привычным ненумерованным списком:

<ul class="gallery">

<li><a href="#"><img src="photo-1.jpg" /></a></li>

<li><a href="#"><img src="photo-2.jpg" /></a></li>

<li><a href="#"><img src="photo-3.jpg" /></a></li>

</ul>

На рис. 4.02 видно, как выглядит список без применения стилей. Обратите внимание, что изображения существенно крупнее, чем нам нужно. Это сделано намеренно: мы воспользуемся CSS, чтобы уменьшить их.

Рис. 4.02. Список из крупных фотографий – до применения CSS

Добавим стиль

Добавим немного CSS, чтобы превратить этот вертикальный список в горизонтальную сетку; поставим обводку толщиной в один пиксель вокруг каждой картинки (также заметим, что фон страницы – легкий серый

#eee
).

ul.gallery li {

float: left;

margin: 0 10px;

padding: 10px;

border: 1px solid #ddd;

list-style: none;

}

ul.gallery li a img {

float: left;

width: 200px;

}

Мы сдвинули элементы списка, отключили маркеры

list-style
и обернули каждый элемент
li
в серую однопиксельную линию. Мы также сдвинули сами картинки и уменьшили их до 200 пикселей в ширину.

Эти компактные правила дают нам то, что мы хотели получить (рис. 4.01).

Масштабирование в hover

Теперь – преобразования. Добавим преобразование

scale
, чтобы фотография увеличивалась, когда на нее наводят курсор. Помним о том, что исходные изображения больше, чем 200 пикселей в ширину, – значит, фотографии можно увеличивать без потери качества.

Масштабирование поддерживается в Safari, Chrome, Firefox и Opera; везде нужен браузерный префикс. Добавим свойства, которые работают в этих и всех будущих браузерах:

ul.gallery li a: hover img {

– webkit-transform: scale(1.5);

– moz-transform: scale(1.5);

– o-transform: scale(1.5);

transform: scale(1.5);

}

Когда ссылки переходят в состояние hover, мы говорим: «увеличь картинки в полтора раза относительно их изначального размера» (200px в ширину).

Команда

scale(2)
увеличит фотографию вдвое;
scale(0.5)
уменьшит ее вдвое.

Результат показан на рис. 4.03 (браузер – Safari). Заметим, что

transform
не влияет на остальные части документа и увеличивает фотографию относительно центра, не затрагивая расположения элементов вокруг нее.

Рис. 4.03. Фото в центре увеличено с помощью CSS-трансформации

Также, если нужно, можно задать transform-origin, который объявит, относительно какой части картинки ее нужно масштабировать: верх, низ, центр или положение, обозначенное в процентах (см. [10] .

10

http://www.w3.org/tR/css3-2d-transforms/#transform-origin

Например, чтобы фотография увеличивалась относительно нижнего левого края, а не относительно центра, пишется такой код:

ul.gallery li a: hover img {

– webkit-transform-origin: bottom left;

– moz-transform-origin: bottom left;

– o-transform-origin: bottom left;

transform-origin: bottom left;

– webkit-transform: scale(1.5);

– moz-transform: scale(1.5);

– o-transform: scale(1.5);

transform: scale(1.5);

}

Подходящая тень

Можем пойти дальше и оттенять картинку, когда на нее наводят курсор. Это уместное использование CSS3-свойства

box-shadow
, так как мы заставляем увеличенную фотографию выглядеть так, как будто она приподнимается над страницей.

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

Синтаксис box-shadow совпадает с синтаксисом свойства

text-shadow
, которое мы применяли в третьей главе. Однако в отличие от 
text-shadow
, чтобы box-shadow заработал в Safari, Chrome и Firefox, ему требуются браузерные префиксы (Opera 10+ и IE9 Beta поддерживают беспрефиксное свойство
box-shadow
). Запишем эти правила.

ul.gallery li a: hover img {

– webkit-transform: scale(1.5);

– moz-transform: scale(1.5);

Поделиться:
Популярные книги

Вечный. Книга II

Рокотов Алексей
2. Вечный
Фантастика:
боевая фантастика
попаданцы
рпг
5.00
рейтинг книги
Вечный. Книга II

Полководец поневоле

Распопов Дмитрий Викторович
3. Фараон
Фантастика:
попаданцы
5.00
рейтинг книги
Полководец поневоле

Начальник милиции

Дамиров Рафаэль
1. Начальник милиции
Фантастика:
попаданцы
альтернативная история
5.00
рейтинг книги
Начальник милиции

Попаданка в академии драконов 2

Свадьбина Любовь
2. Попаданка в академии драконов
Любовные романы:
любовно-фантастические романы
6.95
рейтинг книги
Попаданка в академии драконов 2

Случайная дочь миллионера

Смоленская Тая
2. Дети Чемпионов
Любовные романы:
современные любовные романы
7.17
рейтинг книги
Случайная дочь миллионера

Кодекс Охотника. Книга XII

Винокуров Юрий
12. Кодекс Охотника
Фантастика:
боевая фантастика
городское фэнтези
аниме
7.50
рейтинг книги
Кодекс Охотника. Книга XII

Гром над Тверью

Машуков Тимур
1. Гром над миром
Фантастика:
боевая фантастика
5.89
рейтинг книги
Гром над Тверью

Сотник

Ланцов Михаил Алексеевич
4. Помещик
Фантастика:
альтернативная история
5.00
рейтинг книги
Сотник

Ненаглядная жена его светлости

Зика Натаэль
Любовные романы:
любовно-фантастические романы
6.23
рейтинг книги
Ненаглядная жена его светлости

На границе империй. Том 7. Часть 2

INDIGO
8. Фортуна дама переменчивая
Фантастика:
космическая фантастика
попаданцы
6.13
рейтинг книги
На границе империй. Том 7. Часть 2

LIVE-RPG. Эволюция 2

Кронос Александр
2. Эволюция. Live-RPG
Фантастика:
социально-философская фантастика
героическая фантастика
киберпанк
7.29
рейтинг книги
LIVE-RPG. Эволюция 2

Под маской моего мужа

Рам Янка
Любовные романы:
современные любовные романы
5.67
рейтинг книги
Под маской моего мужа

Я еще не князь. Книга XIV

Дрейк Сириус
14. Дорогой барон!
Фантастика:
юмористическое фэнтези
попаданцы
аниме
5.00
рейтинг книги
Я еще не князь. Книга XIV

Его огонь горит для меня. Том 2

Муратова Ульяна
2. Мир Карастели
Фантастика:
юмористическая фантастика
5.40
рейтинг книги
Его огонь горит для меня. Том 2