Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

CSS Учебник


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


CSS Отзывчивый


CSS Grid


CSS SASS


CSS Примеры


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



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



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


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.