| Kosten | Понедельник, 03 Февраля 2020, 22:30 | Сообщение 1 |
| Добавление теней, это безусловно один из отличных способов, чтоб создать иллюзию глубины и перспективы, будь то фотография, графический дизайн или даже веб-страница. С помощью свойств 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 могут помочь вам придать индивидуальность вашей работе, используя цвет, глубину и перспективу. Поиграйте с кодами выше, чтобы добавить изюминку к фотографии, графическому дизайну или веб-странице.
| | Страна: (RU) |
| |
