Текстовые эффекты при помощи теней в CSS - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 1 из 1
1

Текстовые эффекты при помощи теней в CSS (Создание тени для текста и других текстовых эффектов)

Текстовые эффекты при помощи теней в CSS

Kosten

Понедельник, 18 Июня 2018, 21:17 | Сообщение 1

Администраторы

Сообщений:44490

Награды: 70

« 557 »

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

Свойство text-shadow в CSS позволяет дизайн добавлять теневые эффекты к тексту. Это свойство вводится как часть стандарта CSS3 и поддерживается всеми основными браузерами сегодня. Одной из многих новых возможностей, предоставляемых CSS3, является возможность добавлять тени к текстам. Это простой способ сделать обычный дизайн немного красивее, но также может быть полезно сделать некоторые текстовые элементы более легкими для чтения.

Поддержка браузером текстовых теней по-прежнему не идеальна, поскольку Internet Explorer не поддерживает ее, но эффект хорошо работает в более новых версиях большинства других браузеров, таких как Firefox, Safari и Chrome.

Сегодня мы проверим несколько примеров текстовой тени, которые вы можете скопировать и вставить для своей работы.

Вот пример того, как он выглядит:

Это достигается с очень небольшим CSS и действительно может добавить некоторый pizazz на ваш сайт при правильном использовании. Вот как свойство text-shadow используется в вашем файле CSS.

Код

text-shadow: #8a8686 2px 2px 2px;

Как пример рассмотрим текстовой эффект в 3D с использованием text-shadow свойство.

HTML

Код

<h1>ZORNET.RU</h1>

CSS

Код

h1 {
    margin: 0;
    color: #fff;
     font: bold 78px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-shadow: 0 1px 0 #bdb5b5, 0 2px 0 #bbb4b4, 0 3px 0 #bdb7b7, 0 4px 0 #a9a3a3, 0 5px 0 #a59e9e, 0 6px 1px rgba(19, 18, 18, 0.1), 0 0 5px rgba(31, 30, 30, 0.1), 0 1px 3px rgba(27, 26, 26, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(16, 16, 16, 0.25), 0 10px 10px rgba(19, 18, 18, 0.2), 0 20px 20px rgba(14, 14, 14, 0.15);
    -webkit-transition: .2s all linear;
}

Демонстрация

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

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

Как вы можете видеть, свойство text-shadow принимает четыре значения:

1. Во-первых, цвет, который вам нужен для теневой тени.

2. Далее - координата x, где вы хотите, чтобы тень была относительно текста. Помните, что ось x горизонтальна, и свойство перемещается из центра вправо. Поэтому наша текстовая тень будет смещена на 2 пикселя справа от нашего исходного текста.

3. Логически следующее значение - это координата y, где вы хотите, чтобы текстовая тень была снова, по сравнению с исходным текстом. Ось y вертикальна, а положительные числа будут перемещать текст вниз.

4. Последнее значение - это размер размытия в пикселях, который вы хотите добавить в текстовую тень. Вы можете думать об этом как о том, сколько пикселей вы хотите «растянуть» теневой текст. Нужно держать значение низким, если вы установите его слишком высоко, вы увидите, что текст может быстро стать неразборчивым.

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

Прикрепления: 6484673.png (39.9 Kb) · 3966207.png (33.5 Kb)

Страна: (RU)