ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS Эффекты Теней


Norway

Блочная тень

С помощью CSS вы можете создавать эффекты тени!

Наведите на меня курсор!

CSS Эффекты Теней

С помощью CSS вы можете добавить тень к тексту и элементам.

В этой главе вы узнаете о следующих свойствах:

  • text-shadow
  • box-shadow

CSS Text Shadow - Тень текста

CSS свойство text-shadow применяет тень к тексту.

В простейшем случае вы указываете только горизонтальную тень (2 пикселя) и вертикальную тень (2 пикселя):

Эффект тени текста!

Пример

h1 {
  text-shadow: 2px 2px;
}
Попробуйте сами »

Затем добавьте цвет тени:

Эффект тени текста!

Пример

h1 {
  text-shadow: 2px 2px red;
}
Попробуйте сами »

Затем добавьте эффект размытия в тень:

Эффект тени текста!

Example

h1 {
  text-shadow: 2px 2px 5px red;
}
Попробуйте сами »

В следующем примере показан белый текст с черной тенью:

Эффект тени текста!

Пример

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
Попробуйте сами »

В следующем примере показана красная неоновая тень свечения:

Эффект тени текста!

Пример

h1 {
  text-shadow: 0 0 3px #FF0000;
}
Попробуйте сами »

Несколько теней

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

В следующем примере показана красная и синяя неоновая тень свечения:

Эффект тени текста!

Пример

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
Попробуйте сами »

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

Эффект тени текста!

Пример

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Попробуйте сами »

Вы также можете использовать свойство text-shadow для создания простой рамки вокруг текста (без теней):

Граница вокруг текста!

Пример

h1 {
  color: yellow;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
Попробуйте сами »

CSS свойство box-shadow - Блочная тень

CSS свойство box-shadow применяет тень к элементам.

В простейшем случае вы указываете только горизонтальную тень и вертикальную тень:

Это желтый элемент <div> с черной тенью блока

Пример

div {
  box-shadow: 10px 10px;
}
Попробуйте сами »

Затем добавьте цвет тени:

Это желтый элемент <div> из серой тенью блока

Пример

div {
  box-shadow: 10px 10px grey;
}
Попробуйте сами »

Затем добавьте эффект размытия к тени:

Это желтый элемент <div> с размытием серой тени блока

Пример

div {
  box-shadow: 10px 10px 5px grey;
}
Попробуйте сами »

Вы также можете добавить тени к псевдоэлементам ::before и ::after, чтобы создать интересный эффект:

Пример

#boxshadow {
  position: relative;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
  padding: 10px;
  background: white;
}

#boxshadow img {
  width: 100%;
  border: 1px solid #8a4419;
  border-style: inset;
}

#boxshadow::after {
  content: '';
  position: absolute;
  z-index: -1; /* скрыть тень за изображением */
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
  width: 70%;
  left: 15%; /* половина оставшихся 30% */
  height: 100px;
  bottom: 0;
}
Попробуйте сами »

Открытки (карточки)

Пример использования свойства box-shadow для создания бумажных карточек:

1

Январь 1, 2020

Норвегия

Хардангер, Норвегия

Пример

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}
Попробуй это (Текстовая карточка) » Попробуй это (Карточка с изображением) »


CSS Свойства тени

В следующей таблице перечислены свойства CSS тени:

Свойство Описание
box-shadow Добавляет одну или несколько теней к элементу
text-shadow Добавляет одну или несколько теней к тексту