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):
Текст эффект тени!
Затем добавить цвет в тени:
Текст эффект тени!
Затем добавить эффект размытия тени:
Текст эффект тени!
Следующий пример показывает белый текст с черной тенью:
Текст эффект тени!
Следующий пример показывает красный неон свечение тень:
Текст эффект тени!
Несколько Тени
Чтобы добавить более одной тени к тексту, вы можете добавить список разделенных запятыми теней.
Следующий пример показывает, красный и синий неоновый свечение тень:
Текст эффект тени!
Следующий пример показывает белый текст с черным, синим, и Darkblue тень:
Текст эффект тени!
пример
h1
{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Попробуй сам " CSS3 box-shadow недвижимости
CSS3 box-shadow свойство применяется тень к элементам.
В самом простом использовании, вы только указать горизонтальную тень и вертикальную тень:
Затем добавить цвет в тени:
Затем добавьте эффект размытия тени:
Вы можете также добавлять тени к :: до и после :: псевдо-классов, чтобы создать интересный эффект:
пример
#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 | Добавляет один или несколько теней к тексту |