Внутренние тени в CSS. Изображения, тексты, блоки

Опубликованно 16.11.2018 06:25

Возможности CSS позволяют установить тени внутри элементов. Чтобы создать внутреннюю тень в CSS для блоков, достаточно установить правило значения, коробка-тени. Это сложнее, чтобы установить внутреннюю тень к тексту.

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

Базовый синтаксис для создания внешние и внутренние тени в CSS очень похожи. Поскольку требуется обычно внешний оттенок, для построения внутренних, дополнительных действий. Но чтобы указать внутреннюю тень, мы должны понять принцип работы внешних.

Для внешних теней текста задаются с помощью текст-тень. Это правило имеет четыре значения: текст-тень: 0vw 0vw RGBA и 3vw(134, 250, 252) инструкция будет установить цвет тени и радиус размывания;

текст-тень: 1vw 1vw 3vw формате RGBA(134, 250, 252) добавить вертикальное смещение (первая картинка) и горизонтально (вторая картинка).

Синтаксис для блоков

Внешнее затенение может быть указан на коробке-тень правилом для блоков. Принцип абсолютно тот же, как и тень для текста: нескольких значений сдвига, радиус и цвет. коробка-тени: RGBA и 0vw 0vw 3vw(134, 250, 252) инструкция будет установить радиус размытия и цвет (первая картинка), в этом случае, используя тот же радиус размытия и цвет, как например с текстом; коробка-тени: 1vw 1vw 3vw формате RGBA(134, 250, 252) — установка смещения (вторая картинка).

Первые два значения в тексте - и коробка-тени позволяют сдвинуть тень вправо и вниз, соответственно. Если вы установите их к отрицательным значениям, тень будет двигаться вверх и влево: коробка-тени: -3vw 1vw 1vw формате RGBA(134, 250, 252); коробка-тени: -1vw -3vw 1vw формате RGBA(134, 250, 252).

В дополнение к значениям для блоков можно установить напряжение. Значение по умолчанию стрейч равна нулю. Если вы добавляете положительное значение — тени растянулись, отрицательное значение будет уменьшаться: коробка-тени: 1vw 1vw 3vw 2vw формате RGBA(134, 250, 252).

Тени внутри блока

Внутренняя тень блока в CSS создается значительно проще, чем в тексте. Для Внутренняя тень блока достаточно изменить правило, которое применяется, когда вы устанавливаете внешний вид тени. В окне-тень, вам нужно добавить врезные и тень будет ходить внутри: коробка-тени: вставка 3vw 1vw 1vw формате RGBA(134, 250, 252) — внутренние тени появляются на соответствующих лиц (на примере картины различий в визуализации внешних и внутренних теней);

с отрицательными значениями, соответственно, получается коробка-тени: вставка -3vw 1vw 1vw формате RGBA(134, 250, 252) и коробка-тени: вставка -1vw -3vw 1vw формате RGBA(134, 250, 252).

Тени внутри текста

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

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

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

текст-тень: 1vw 1vw 2vw формате RGBA(134, 250, 252);

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

фон-клип: текст;

Внутри тени

Для изображений, вы также можете установить внутреннюю тень, чтобы попросить заблокировать изображение в фоновом режиме, а затем заблокировать, чтобы положить внутрь. Можно также сделать другим способом, оборачивать изображение в div, но это отнимает много времени, преимущества данного способа не предусмотрена.

Установка высокого значения для размытия позволяет достичь сильного виньетирования фотографий без использования редакторов.

Эффекты

"Глубина эффекта", только с внутренней тени можно добиться ощущения, что страница накладывается на другую страницу.

"Эффект объема" — часто создаются с использованием только внешних теней. Внутренние тени позволяют добиться большей реалистичности, например, с их помощью можно сделать эффект неравномерного падения света на блок или полностью свет.

Стили для тени разделяются запятой. Свет, с одной стороны, дается установка Внутренняя тень сверху и слева, тень справа и внизу задать затененной стороне элемента: коробка-тени: 0.5 Фольксваген 0vw 0.5 Фольксваген 1vw формате RGBA(0, 0, 0, 0.5) — установите легкую внешнюю тень с небольшим пятном и небольшим смещением; врезные 5vw аппликации 5vw аппликации 15vw 0vw формате RGBA(255, 255, 255, 0.6) — ответственность за "засвечивание" в верхнем левом углу, который наносится на блок, для того, чтобы увидеть эффект, значения размытие и сдвиг должен быть большим по сравнению со всеми другими тенями; инсет-1vw -1vw широко 0vw 6vw(0, 0, 0,0.2) — устанавливает внутренний темная тень снизу и справа.

Для того, чтобы размыть края полностью, достаточно указать значения для внутренней тени со всех сторон: коробка-тени: врезные 5vw аппликации 5vw аппликации 15vw 0vw формате RGBA(255,255,255,0.8) — устанавливает тень сверху и слева; инсет-5vw аппликации -5vw аппликации 15vw 0vw формате RGBA(255,255,255,0.8) устанавливает точно такую же тень на правой и нижней части элемента.

Выводы

Внутренние тени в CSS настолько же функциональными, как и снаружи. Настройки внутренней тени к объектам - не очень распространенная практика. Обычно они используются вместе с внешней тени, чтобы добиться эффекта глубины и свечения.

Сочетание теней позволяет варьировать дизайн. Внутренние тени большую работу по созданию псевдо-трехмерные объекты.

Код, используемый для иллюстрации

В большинстве случаев, мы использовали следующий HTML-код:

<!Элемент DOCTYPE HTML> и <HTML> и тег <head> <ссылка отн="стилей" с href="тень.в CSS"> тегом </head> в <тело> <див класс="поле"> Текст </див> </тело> тегом </HTML>

Кузов-контейнер:

тело { обивка: 10vw; семейство шрифтов: шрифт Helvetica, без засечек; размер шрифта: 8vw; цвет: darkslategray; }

Чтобы проиллюстрировать изменения в тенях окне параметров блока изменилась, остались те же ширина, высота, фон и выравнивание текста параметры в блоке:

.поле{ ширина: 50vw; высота: 35vw; фонового цвета: RGBA(136, 134, 252, 0.2); текст-выровняйте: центр; линии-высота: 300 пикселей; } Автор: Наталья Андреева 9 ноября 2018

Категория: Интернет