freeCodeCamp/guide/russian/css/css3-shadow-effects/index.md

title, localeTitle

title	localeTitle
CSS3 Shadow Effects	Теневые эффекты CSS3

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

С помощью CSS3 вы можете создавать два типа теней: text-shadow (добавляет тень к тексту) и box-shadow (добавляет тень к другим элементам).

Текстовая тень CSS3

Свойство text-shadow может принимать до четырех значений:

• горизонтальная тень
• вертикальная тень
• эффект размытия
• цвет

Примеры:

• Обычная тень текста

h1 { 
    text-shadow: 2px 2px 5px crimson; 
 } 

• Светящийся текстовый эффект

h1 { 
    text-shadow: 0 0 4px #00FF9C; 
 } 

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

Для этого вы просто добавляете запятую между двумя (или более) наборами значений:

h1 { 
    color: white; 
    text-shadow: 0 0 3px #F10D58, 0 0 7px #4578D5; 
 } 

CSS3 Box Shadow

Свойство box-shadow может принимать до шести значений:

• (необязательно) ключевое слово inset (изменяет тень на единицу внутри кадра)
• горизонтальная тень
• вертикальная тень
• эффект размытия
• распространение
• цвет

Примеры:

.first-div { 
    box-shadow: 1px 1px 5px 3px grey; 
 } 
 
 .second-div { 
    box-shadow: 0 0 5px 1px lightgrey; 
 } 
 
 .third-div { 
    box-shadow: inset 0 0 15px 5px rgba(0,0,0,0.75); 
 } 

Дополнительная информация:

• Веб-документы MDN
• Проверить поддержку браузера
• CSS box-shadow generator (не стесняйтесь экспериментировать с тенями)