Изображение рамки: border-image-repeat, часть 1 [16/33]

Свойство border-image-repeat задаёт способ заполнения фоном боковых сторон рамки (зелёные области на рисунке).

У свойства четыре значения: stretch, repeat, space и round.

Значение по умолчанию — stretch. При этом значении фоновые картинки растягиваются на всю длину боковых сторон.

Если задано значение repeat, то фоновые картинки будут повторяться. При этом они могут обрезаться.

Можно устанавливать режим заполнения отдельно для горизонтальных и вертикальных сторон рамки.

Например:

/* все стороны рамки заполняются в режиме stretch */

border-image-repeat: stretch;

/* горизонтальные стороны — режим repeat, вертикальные — stretch */

border-image-repeat: repeat stretch;

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

Тени Свойство box-shadow [1/17]

Тени создаются с помощью CSS-свойства box-shadow. Это достаточно сложное свойство, которое состоит из 6 компонентов. В этом курсе мы детально рассмотрим, как оно работает, а также научимся некоторым интересным приёмам.

С помощью этого свойства можно создавать множественные тени. Мы тоже потренируемся это делать.

box-shadow:

[inset] - внутренняя

5px <- смещение по x

10px - смещение по y

[2px] - размытие

[3px] - растяжение

[red]; - цвет

Ключевое слово inset, растяжение, размытие и цвет не являются обязательными. Порядок следования цифровых значений важен. Первое цифровое значение означает смещение по горизонтали.

Смещение по горизонтали может быть положительным и отрицательным.

Третье цифровое значение задаёт радиус размытия тени.

Чем меньше значение, тем четче тень. Максимальная четкость достигается при нулевом значении. Размытие не может быть отрицательным. Если размытие не указано, то оно равно нулю.

Четвёртое цифровое значение задаёт растяжение тени.

По умолчанию размер и форма тени такие же, как и у элемента, которому она принадлежит. Но размер тени можно изменить с помощью растяжения.

При нулевом (или не указанном) растяжении размер тени такой же, как у элемента. При положительном растяжении размер тени становится больше размера элемента, а при отрицательном — меньше.

Если в box-shadow использовать ключевое слово inset, то тень будет отображаться внутри элемента.

inset лучше размещать либо в самом начале свойства, либо в самом конце.

Полупрозрачная тень [10/17]

Если у тени ненулевой радиус размытия, то она автоматически становится полупрозрачной. Но иногда нужно сделать полупрозрачной тень без радиуса размытия (например, как у кнопок в мини-браузере).

Для этого можно использовать новый формат записи цветов в CSS — rgba. Пример:

color: red;

color: #ff0000;

color: rgba(255, 0, 0, 0.5);

Все записи цвета в примере задают красный цвет, но в последней записи задан красный с 50% прозрачностью.

В rgba первые три значения задают цвет и могут быть целым числом от 0 до 255. Последнее значение задаёт уровень прозрачности и может быть дробным числом от 0 (полная прозрачность) до 1.

Задавать полупрозрачный цвет с помощью rgba можно не только теням, но и остальным свойствам с цветом: рамкам, фону и т.д.