• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Добавление теней в текст и элемент на CSS (Свойство CSS text-shadow для добавление теней к тексту)
Добавление теней в текст и элемент на CSS
Kosten
Дата: Понедельник, 2020-02-03, 22:30 | Сообщение 1
Онлайн
Администраторы
Сообщений:25966
Награды: 59


Добавление теней, это безусловно один из отличных способов, чтоб создать иллюзию глубины и перспективы, будь то фотография, графический дизайн или даже веб-страница. С помощью свойств CSS3 вы можете добавить такой эффект к тексту, изображениям и другим элементам на веб-странице без необходимости переходить в Photoshop или другое программное обеспечение для графического редактирования.

Есть два свойства, которые вы можете использовать, где оба эти свойства работают в большинстве браузеров, и ниже указаны первые версии браузера, которые полностью их поддерживают.

CSS3 Text Shadow

Как и другие свойства CSS, свойство text-shadow соответствует своему имени и добавляет тень к тексту. Основной синтаксис для этого обычно указывает только горизонтальную и вертикальную тень плюс цвет.

Например:



CSS

Код
h1 {

text-shadow: 2px 2px red;

}

В приведенном выше примере первые 2 пикселя указывают смещение по горизонтали, а второй идет смещение по вертикали. Красный будет определяет цвет тени, в том случаи, если не указано, цвет по умолчанию черный. Вы можете использовать либо названия цветов, либо шестнадцатеричные коды.

Добавление спецификации третьего пикселя приводит к размытию тени в таком количестве пикселей.

Например:



CSS

Код
h1 {

text-shadow: 2px 2px 5px red;

}

Использование 0 смещений по горизонтали и вертикали с размытием создаст неоновый эффект свечения.

Например:



CSS

Код
h1 {

text-shadow: 0 0 3px #FF0000;

}

Здесь как можно заметить не чего сложного нет по распределению теней.

Несколько вариантов текста тени

Вы можете добавить более одной тени к фрагменту текста, используя значения через запятую.

В приведенном ниже примере эффект пурпурного цвета обусловлен неоновым свечением красного цвета шириной 3 пикселя и голубым неоновым свечением шириной 5 пикселей:



CSS

Код
h1 {

text-shadow: 0 0 3px red, 0 0 5px blue;

}

В приведенном ниже примере белый текст имеет эффект градиента от черного неонового свечения шириной 2 пикселя, синего неонового свечения шириной 25 пикселей и темно-синего неонового свечения шириной 5 пикселей:



CSS

Код
h1 {

color: white;

text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;

}

В приведенном ниже примере розовый текст имеет ровную черную рамку вокруг минус тени:



CSS

Код
h1 {

color: pink;

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

}

На знаках закончили и переходим на элементы.

CSS3 Box Shadow

Свойство box-shadow может применять тени к не текстовым элементам на веб-странице. Это может быть изображение, div или любой другой не текстовый элемент. Хотя существует множество сложных способов добавления теней, обсуждаемые здесь являются наиболее простыми и понятными.

Основной синтаксис для этого обычно указывает только горизонтальную и вертикальную тень плюс цвет.

Например:



CSS

Код
.shadow {

box-shadow:         3px 3px 5px 6px #ccc;

}

В приведенном выше примере первый 3px указывает смещение по горизонтали, а второй - смещение по вертикали. Третье значение указывает радиус размытия 5 пикселей. Необязательное четвертое значение указывает радиус распространения 6 пикселей. И наконец, #ccc определяет цвет тени. Если не указан, цвет по умолчанию черный. Вы можете использовать либо названия цветов, например красный, либо шестнадцатеричные коды, например, #FFFFFF для белого, а также значения цветов rgba и hsla.



CSS

Код
.shadow {

box-shadow:         inset 0 0 10px #000000;

}

В приведенном выше примере слово inset указывает направление внутрь. Первый 0 указывает смещение по горизонтали, а второй предусмотрен на смещение по вертикали. Третье значение указывает радиус размытия 10 пикселей, где наконец, # 000000 определяет цвет тени.

Свойства CSS3 могут помочь вам придать индивидуальность вашей работе, используя цвет, глубину и перспективу. Поиграйте с кодами выше, чтобы добавить изюминку к фотографии, графическому дизайну или веб-странице.
Прикрепления: 3224808.png(32.8 Kb) · 7568644.png(33.2 Kb) · 2783930.png(28.0 Kb) · 5485936.png(33.3 Kb) · 3330980.png(38.0 Kb) · 3246605.png(29.5 Kb) · 1794808.png(2.8 Kb) · 2220024.png(3.1 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Добавление теней в текст и элемент на CSS (Свойство CSS text-shadow для добавление теней к тексту)
  • Страница 1 из 1
  • 1
Поиск: