САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Инструкции CSS Цвета CSS Слои Фона CSS Границы CSS Поля CSS Отступы CSS Высота и ширина CSS Бокс модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS Дисплей CSS Макс. ширина CSS Позиция CSS Переполнение CSS Поплавок CSS Линейный блок CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS Прозрачность CSS Панель навигации CSS Выпадающий CSS Галерея CSS Спрайты CSS Атрибуты селекторов CSS Формы CSS Счетчики CSS Макет сайта CSS Еденицы измерений CSS Особенности

CSS3 Учебник

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

CSS3 Адаптивный дизайн

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

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

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

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

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

СSS3 Тени



Norway

Бокс Тень

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

Наведи на меня!

CSS3 эффект тени

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

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

  • text-shadow
  • box-shadow

CSS тень текста

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

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

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

Пример

h1 {
    text-shadow: 2px 2px;
}
Редактор кода »

Сначала, добавить цвет к тени:

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

Пример

h1 {
    text-shadow: 2px 2px red;
}
Редактор кода »

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

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

Пример

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> с черным box-shadow

Пример

div {
    box-shadow: 10px 10px;
}
Редактор кода »

Сначала, добавить цвет к тени:

Это желтый элемент <div> с серым цветом box-shadow

Пример

div {
    box-shadow: 10px 10px grey;
}
Редактор кода »

Сначала, добавить эффект размытия к тени:

Это желтый элемент <div> с размытым, серым box-shadow

Пример

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, 2016

Norway

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

Пример

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;
}
Редактор (Карточка Текстовая ) » Редактор (Карточка Изображения) »


Свойства CSS3 Тени

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

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