Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки

background-clip: padding-box;

Это заставит фон обрезаться точно там, где нам надо.

Как насчет этого стиля [50]? Как вы справитесь с зигзагообразной рамкой? Наверное, вы начнете применять установленную ширину и высоту, и огромных размеров фоновое изображение со значением no-repeat. Если средство отображения установило размер шрифта больше, чем по умолчанию в браузере, или у него нет шрифта, близкого к тому, что вы собираетесь задать, текст растечется над установленным фоновым изображением.

Рисунок 4.13. Пример рамки

Рисунок 4.14. Изображение cloth.svg, с которым мы и будем работать

Свойство border-image – новое и мощное, дает нам возможность использовать одно маленькое изображение и для фона, и для рамки элемента. Мы определяем, каков его масштаб и как оно повторяется. Они должно отличаться для каждого края. В этом примере мы использовали рис. 4.14.

А вот код CSS, который идет для него:

html {

min-height:100 %;

background: white url(background.jpg);

}

section {

max-width: 20em;

padding: 3em;

margin: 4em auto;

border: 20px solid transparent;

– webkit-border-image: url(cloth.svg) 33.33 % round;

– moz-border-image: url(cloth.png) 33.33 % round;

– o-border-image: url(cloth.svg) 33.33 % round;

border-image: url(cloth.svg) 33.33 % round fill;

font: 100 %/1.5 sans-serif;

text-shadow: 0 1px white;

}

h1 {

margin-top: 0

}

Свойство border-image определяет, какое изображение будет использовано, какой должна быть ширина каждого «кусочка» (в этом случае мы хотим разрезать по три части, как горизонтально, так и вертикально, это лишь одна цифра) и как эти «кусочки» должны повторяться или растягиваться (ключевое слово round повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.). Ключевое слово fill сохраняет средний кусочек в виде фона, но оно не поддерживается браузерными префиксами. К счастью, у свойств с браузерными префиксами это поведение есть по умолчанию. Вы также можете заметить, что мы используем SVG (масштабируемую векторную графику) в каждом браузере, кроме Firefox. Дело в том, что в момент написания этого раздела Firefox «глючит» при применении SVG-картинок для рамок. Но Mozilla работает над этим. Хотите, проверьте сами.

Когда мы используем свойство border-image, стиль и цвет рамки, который мы определяем, игнорируется до тех пор, пока стиль рамки не устанавливается до значения none. Только свойство border-width имеет эффект. Но мы хотим задать что-то вроде solid transparent, так чтобы когда border-image не поддерживается, у нас не было бы уродливо-толстой рамки. Вы можете варьировать расстояние, а в некоторых случаях «реальный» запасной вариант рамки лучше, чем ничего.

Трансформации CSS дают возможность применить одно или несколько преобразований к элементу. Это относится к масштабированию, наклону изображения, вращению и переносу. Большинство этих эффектов не были раньше доступны в HTML вне преобразования контента в рисунок со всеми его недостатками.

Мы создадим простую галерею рисунков, чтобы продемонстрировать применение некоторых трансформаций. Наведение курсора и клик по нему запустит различные трансформации. Можете посмотреть пример, пройдя по ссылке smashed.by/trnsfrms.

В примере каждый рисунок включен в элемент figure, как здесь:

Мы включили все изображения в их полном размере, уменьшив их масштаб, а не использовали отдельные превью. Это можно сделать с преобразованием масштаба:

figure {

float: left;

z-index: 1;

margin: 1rem;

width: 160px;

height: 160px;

transition-duration: 1s;

transform: scale(0.25);

}

Свойство transform допускает в качестве значения разделенный пробелами список функций трансформирования. Здесь мы используем функцию scale для уменьшения размера элемента вчетверо. Масштабирование пойдет от центра элемента по умолчанию. Значения меньше 1 уменьшат масштаб элемента, а значения выше этой цифры – увеличат.

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

После применения дополнительных стилей к body и самим изображениям, мы получим что-то наподобие следующего:

Рисунок 4.15. Простая галерея изображений без трансформаций

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

figure: hover {

transform: scale(0.33) rotate(2deg);

z-index: 100;

cursor: pointer;

}

Здесь мы применяем два преобразования. Любое количество трансформаций может применяться при задании их через список, разделенный пробелами. Здесь мы уменьшаем масштаб рисунка в 3 раза, затем поворачиваем его на 2 градуса. Функция rotate перемещает элемент вокруг оси по часовой стрелке. Чтобы перемещение было против часовой стрелки, мы используем отрицательную величину:

figure: nth-of-type(even):hover {

transform: scale(0.33) rotate(-2deg);

}

Рисунок 4.16. Преобразование, применяемое для изображения по наведению курсора с использованием CSS3

Каждая функция transform применяется по очереди, поэтому элемент сначала масштабируется, а потом вращается. Помните, что это важно! Порядок влияет на размер элементов при изменении масштаба, и на направление каждой оси при повороте.

Так как все функции transform применяются с использованием одного свойства, а вы хотите просто переместить одну величину, вам нужно будет составить полный перечень. А иначе остальные величины примут свои значения по умолчанию. При наведении курсора на изображение в нашем примере, оно будет масштабироваться и поворачиваться. Вы можете заметить, что изображение, которое находится после того, на которое наведен курсор, также перемещается и трансформируется после короткой паузы. Здесь мы добавили преобразование translateX, которое смещает элемент вдоль оси X.