Последние учебники веб-разработки
×

CSS Руководство

CSS ГЛАВНАЯ CSS Введение CSS Синтаксис CSS Как CSS Цвета CSS Фон CSS Границы CSS Маржа CSS набивка CSS Высота ширина CSS Текст CSS шрифты CSS связи CSS Списки CSS таблицы CSS Модель Бокса CSS Outline CSS Дисплей CSS Максимальная ширина CSS Позиция CSS терка CSS Inline-block CSS выравнивать CSS Комбинаторы CSS Псевдо-класс CSS Псевдо-элемент CSS Панель навигации CSS Dropdowns CSS Всплывающие CSS Галерея CSS изображение Непрозрачность CSS спрайтов CSS Attr селекторы CSS Формы CSS Счетчики

CSS3

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

CSS Адаптивный веб-дизайн

Адаптивный веб-дизайн вступление Адаптивный веб-дизайн Viewport Адаптивный веб-дизайн Вид сетки Адаптивный веб-дизайн Медиа-запросы Адаптивный веб-дизайн Изображений Адаптивный веб-дизайн Видео Адаптивный веб-дизайн Каркасы

CSS Examples

CSS Примеры CSS викторина CSS сертификат

CSS References

CSS Справка CSS Селекторы CSS функции CSS Ссылка Aural CSS Web Safe шрифты CSS Animatable CSS Единицы CSS PX-EM конвертер CSS Цвета CSS Значения цвета CSS Цвет Названия CSS3 Поддержка браузеров

 

CSS Теневые эффекты


Норвегия

Box Shadow

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

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

CSS3 эффекты теней

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

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

  • text-shadow
  • box-shadow

Поддержка браузеров

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

Числа следуют -webkit- или -moz- определяет первую версию , которая работала с приставкой.

Имущество
text-shadow 4.0 10.0 3.5 4.0 9.5
box-shadow 10.0
4.0 -webkit-
9.0 4.0
3.5 -moz-
5.1
3.1 -webkit-
10.5

CSS3 Text Shadow

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

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

Текст эффект тени!

пример

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;
}
Попробуй сам "

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

Текст эффект тени!

пример

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

CSS3 box-shadow недвижимости

CSS3 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;
}
Попробуй сам "

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

пример

#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; /* hide shadow behind image */
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    width: 70%;
    left: 15%; /* one half of the remaining 30% */
    height: 100px;
    bottom: 0;
}
Попробуй сам "

Карты

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

1

1 января 2016

Норвегия

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

пример

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;
}
Попробуйте (текст карты) » Попробуйте (изображение карты)»

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »


CSS3 свойства Shadow

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

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