Как сделать тень внутри блока в css
Перейти к содержимому

Как сделать тень внутри блока в css

  • автор:

Установка тени для блока и текста в CSS

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

Как сделать тень блоку в CSS

Нужно блоку добавить всего одно свойство, box-shadow и передать несколько параметров.

box-shadow: 10px 10px 15px #ebe6e6;

Смещение тени по X. Указываем на сколько пикселей сместить тень вправо от элемента или влево с отрицательным значением.

Смещение тени по Y. Задаем количество пикселей с отрицательным значением для смещения вверх и с положительным значением для смещения вниз.

Размытие тени. Прописываем радиус размытия тени. Чем больше радиус, тем сильнее размоются края тени.

Цвет тени. Можно указать как в шестнадцатеричной системе, так и в формате RGB-a.

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

box-shadow: 10px 10px 15px rgba (235, 230, 230, 0.5);

Пример тени для блока

// CSS код
.block width: 250px;
height: 150px;
height: 150px;
display: block;
margin: 50px auto;
background-color: #f88bca;
box-shadow: 10px 10px 15px rgba(235, 230, 230, 0.5);
>

Установка тени для блока и текста в CSS.

Пример тени снизу

box-shadow: 0 10px 10px rgba(235, 230, 230, 0.8); // CSS

Установка тени для блока и текста в CSS.

Тень вокруг блока

box-shadow: 0 0 15px rgba(210, 210, 210, 0.9); // CSS

Установка тени для блока и текста в CSS.

Внутренняя тень

Чтобы установить тень внутри блока, первым параметром передаем ключевое слово: inset.

box-shadow: inset 0 0 15px rgba(255, 255, 255); // CSS

Установка тени для блока и текста в CSS.

Тень у текста

Тень у текста задается по такому же принципу, как и у блока, но через свойство text-shadow.

// HTML

Текст с тенью

// CSS
h1 text-align: center;
font-size: 50px;
color: #d31818;
text-shadow: 3px 3px 3px rgba(101, 105, 108, 0.7);
>

Установка тени для блока и текста в CSS.

Двойная тень

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

box-shadow:
-10px 0 20px -5px #333,
10px 0 20px -5px #333;

CSS генератор теней

Держать в голове последовательность параметров для создания теней, совсем необязательно. Можно пользоваться CSS генератором теней.

Обучающей информации в интернете много, но собирать её по крупицам неэффективно. Несистематичные знания, полученные из разных источников, плохо выстраиваются в общую картину. Остаются какие-то пробелы в знаниях, мешающие двигаться дальше. И на этом этапе, многие бросают изучение HTML/CSS.

Дорогие начинающие веб-мастера, призываю вас учиться у профессионалов. Это интереснее, легче и во много раз эффективнее. Познакомьтесь с описанием видео-курса «Верстка сайта с нуля 2.0».

Создано 30.09.2019 10:17:29

  • Михаил Русаков
  • Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

    Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

    Тени

    Свойство box-shadow устанавливает тени блока. В значении указывают параметры, которые определяют отображение тени. Параметры перечисляются в следующем порядке:

    1. горизонтальное смещение (обязательно)
    2. вертикальное смещение (обязательно)
    3. размытие
    4. размер
    5. цвет (обязательно)
    6. расположение

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

    Смещения указываются обязательно. Цвет можно не задавать, но тогда тени могут иметь разные цвета в разных браузерах. Поэтому лучше всегда задавать цвет. Остальные параметры необязательные. Расположение позволяет создать внутреннюю тень блока.

    Чтобы часть тени стала видна, ей задаются смещения. Они сдвигают тень вправо и вниз. Любое смещение может иметь и отрицательные значения. Тогда тень, соответственно, сдвигается влево и вверх. Для примера создадим такой блок:

    7
    8
    9
    10
    11
    12
    13
    14

    Попробуйте установить другие смещения. Задайте отрицательные значения.

    Следующий параметр — это размытие. Оно делает плавный переход от цвета тени к цвету фона. Размытие занимает отдельное место, поэтому увеличивает размер тени. У него нет отрицательных значений. Добавим этот параметр в пример. Блок получится такой:

    Установка такой тени выглядит так:

    box-shadow: 10px 10px 5px #707070;

    Далее следует изменение размера. Положительное значение увеличивает размер тени, а отрицательное уменьшает. Совместно со смещением этот параметр позволяет создавать различные эффекты. Пример:

    box-shadow: 50px 30px 1px -23px #707070;

    В CSS существует возможность создать внутреннюю тень. Если в значении свойства box-shadow указать слово inset , то тень располагается не снаружи блока, а внутри. Из-за этого блок становится как бы вогнутым. На мой взляд, внутренняя тень выглядит не очень красиво, поэтому используется не часто. Тень отображается на фоне блока, но находится под содержимым. Слово пишется после всех остальных параметров. При этом изменение размера устанавливается по-другому — положительное значение уменьшает размер тени. Оно позволяет отобразить тени со всех сторон блока.

    box-shadow: 6px 6px 30px 10px #707070 inset;

    Тени текста

    Тексту также можно задать тень. Это делается с помощью свойства text-shadow . Значение этого свойства указывается практически так же, как для блоков. Только оно имеет меньше параметров. Они перечисляются в следующем порядке:

    1. горизонтальное смещение
    2. вертикальное смещение
    3. размытие
    4. цвет

    Указание смещений является обязательным. Для примера создадим такой текст:

    Тени

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

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

    Значения свойства box-shadow

    Рис. 1. Значения свойства box-shadow

    1. ключевое слово inset устанавливает тень внутри элемента;
    2. сдвиг тени по горизонтали (5px — вправо, -5px — влево);
    3. сдвиг по вертикали (5px — вниз, -5px — вверх);
    4. радиус размытия тени (0 — резкая тень);
    5. растяжение тени (5px — растяжение, -5px — сжатие);
    6. цвет тени.

    Обязательно следует указать только сдвиг по горизонтали и вертикали, все остальные параметры будут приниматься по умолчанию. В этом случае тень будет резкой без размытия и чёрного цвета.

    За счёт комбинаций разных параметров и их значений можно получить широкое разнообразие видов теней. В табл. 1 представлен код и результат, к которому он приводит.

    Табл. 1. Сочетания параметров тени

    Код Результат Описание
    box-shadow: 5px 5px; Резкая тень справа и снизу.
    box-shadow: -5px -5px; Резкая тень слева и сверху.
    box-shadow: 0 0 5px; Размытая тень вокруг элемента.
    box-shadow: 0 0 5px 2px; Расширение тени на 2 пиксела.
    box-shadow: 0 0 5px 2px red; Красное свечение вокруг элемента.
    box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.5); Полупрозрачная тень.
    box-shadow: inset 0 0 6px; Тень внутри.

    Как видно из таблицы, сдвиг тени не обязательно задавать в пикселах, хотя это и удобно. Цвет тени можно указывать в любом доступном формате, так, для получения полупрозрачной тени подойдёт формат RGBA, такая тень будет хорошо смотреться на любом фоне. В примере 1 показано, как это сделать.

    Пример 1. Тень на фоновом рисунке

    HTML5 CSS3 IE 9+ Cr Op Sa Fx

        Блок с тенью    

    Не идти против знамён противника, когда они в полном порядке; не нападать на стан противника, когда он неприступен; это и есть управление изменениями.

    Сунь-цзы, пер. Николай Конрад

    Результат данного примера показан на рис. 2. Тень повторяет скругление уголков блока.

    Вид тени на фоновом рисунке

    Рис. 2. Вид тени на фоновом рисунке

    При добавлении «широкой» тени следует учесть, что она может выйти за пределы видимого окна браузера и привести таким образом к появлению горизонтальной полосы прокрутки.

    Тень также можно добавлять и к псевдоэлементам, это иногда требуется для сложной вёрстки. На рис. 3 показан блок с заголовком, к которому добавлена тень. Чтобы не было никаких линий в месте стыка приходится использовать псевдоэлемент ::after и добавлять тень к нему.

    Блок с тенью

    Рис. 3. Блок с тенью

    В примере 2 показано создание такого блока.

    Пример 2. Блок с тенью

    HTML5 CSS3 IE 9+ Cr Op Sa Fx

        Блок с тенью   
    Заголовок

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

    Пример 2. Блок с тенью

    HTML5 CSS3 IE 9+ Cr Op Sa Fx

        Изображение img 

    Результат данного примера показан на рис. 4.

    Рис. 4. Изображение с двойной тенью

    Первая тень отображается слева от рисунка с радиусом размытия 20px, её размер уменьшен за счёт четвёртого параметра (-20px). Параметры второй тени указываются после запятой, тень отображается справа от рисунка и так же уменьшена для симметрии.

    Как сделать тень только с одной стороны?

    Хочу сделать тень у div блока, но чтобы она была только с одной стороны — сверху. Исходный стиль:

    Проблема заключается в том, что тень присутствует так же и слева и справа (совсем капельку и снизу, что тоже является недопустимым). Различные манипуляции с 2-4 значениями ни к чему не привели (да и позиционирование хочется сохранить текущее). Тень так или иначе все равно присутствует по бокам. Как все же добиться желаемого результата?

    Отслеживать

    4,379 4 4 золотых знака 17 17 серебряных знаков 29 29 бронзовых знаков

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *