• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать текстовые эффекты 3D с помощью CSS (Создание игровых эффектов с помощью текстовых теней CSS)
Создать текстовые эффекты 3D с помощью CSS
Kosten
Дата: Среда, 2020-04-22, 18:04 | Сообщение 1
Оффлайн
Администраторы
Сообщений:28886
Награды: 62


В этой статье рассмотрим, как вы можете самостоятельно использовать свойство CSS text-shadow для создания действительно красивых и оригинальных текстов, которые идут в 3D по своей структуре. Вы можете подумать о тени текста как о возможности применить размытый, градиентный цвет за текстом, в чем безусловно будите правы. Но так же, как box-shadow вы можете управлять тем, насколько размыта тень, в том числе уменьшая ее до минимума или сделать наоборот, а значить увеличить.

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

Создание глубины с большим количеством теней



HTML

Код
<h1 class="tekstovaya_zatemnenos">
  ZorNet.Ru
</h1>

CSS

Код
:root {
  --background: #E4FFF7;
  --shadow: #E485F8;
  --text: #5362F6;
}

.tekstovaya_zatemnenos {
  color: var(--text);
  text-shadow: 6px 6px var(--shadow),
    5px 5px var(--shadow), 5.5px 5.5px var(--shadow), 5.25px 5.25px var(--shadow), 5.75px 5.75px var(--shadow),
    4px 4px var(--shadow), 4.5px 4.5px var(--shadow), 4.25px 4.25px var(--shadow), 4.75px 4.75px var(--shadow),
    3px 3px var(--shadow), 3.5px 3.5px var(--shadow), 3.25px 3.25px var(--shadow), 3.75px 3.75px var(--shadow),
    2px 2px var(--shadow), 2.5px 2.5px var(--shadow), 2.25px 2.25px var(--shadow), 2.75px 2.75px var(--shadow),
    1px 1px var(--shadow), 1.5px 1.5px var(--shadow), 1.25px 1.25px var(--shadow), 1.75px 1.75px var(--shadow),
    0.5px 0.5px var(--shadow), 0.25px 0.25px var(--shadow), 0.75px 0.75px var(--shadow);
}

h1 {
  font-size: 65px;
  text-transform: uppercase;
  font-family: "Archivo Black", "Archivo", sans-serif;
  font-weight: normal;
  display: block;
  width: 666px;
  max-width: 80vw;
  min-height: 90px;
  height: auto;
  text-align: center;
  margin: 10rem auto;
  margin: calc(50vh - 5rem) auto;
}

Чем больше шагов мы добавим, тем более детальным будет конечный результат. В этом примере мы начнем с 6px 6px и постепенно будем наращивать с шагом 0,25px, пока не достигнем 0.

Демонстрация
Прикрепления: 4909953.png(9.1 Kb) · 3d-text-css.zip(2.9 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать текстовые эффекты 3D с помощью CSS (Создание игровых эффектов с помощью текстовых теней CSS)
  • Страница 1 из 1
  • 1
Поиск: