ZorNet.Ru — сайт для вебмастера » HTML и CSS » Золотой стиль текста на чистом CSS + HTML

Золотой стиль текста на чистом CSS + HTML

Золотой стиль текста на чистом CSS + HTML
В статье представлен материал на создание текста на CSS, который отображается в золотых трехмерных знаков, что смотрится красиво на темном фоне. Если кратко, то создаем золотой текст на чистом CSS, где присутствуют тени под слова или буквы, что делает более оригинальными по своему отображению. Если рассматривать размер букв, то здесь они полностью соответствуют ширине на просматриваемом экране. Что за адаптивность можно не беспокоиться, если вы разместите на страницах сайта.

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

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

Золотой вариант отображения текста на css3

Установка:

HTML

Код
<div class="krasiva_znakov">
  <span data-double="Заголовок">Заголовок</span>
  <span data-double="Краткое описание на пояснение">Краткое описание на пояснение</span>
</div>

CSS

Код
.krasiva_znakov {
  margin: 18px 0;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  padding: 10vw 0;
}
.krasiva_znakov span {
  color: #ddcaa0;
  font-family: Times, serif;
  position: relative;
  text-transform: uppercase;
  font-size: 8vw;
  letter-spacing: 1vw;
  line-height: 1;
  margin: 0;
  font-weight: 300;
  text-shadow: -1px 0 1px #d1c29e, 0 1px 1px #dbcca5, 5px 5px 10px rgb(8 8 8 / 40%), -5px -5px 10px rgb(8 8 8 / 40%);
}
.krasiva_znakov span + span {
  font-size: 2vw;
}
.krasiva_znakov span:before {
content: attr(data-double);
  left: 0;
  top: 0;
  position: absolute;
  z-index: 1;
  background: linear-gradient(to bottom, #a19170 14%,#7c6845 16%, #95876a 20%, #938568 22%,#f9e5ab 40%,#58492a 84%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgb(0 0 0 / 0%);
  text-shadow: none;
}

На этом установочный процесс завершен, что можно подменить, где стилистики не так много под такой красивый обзор виденье. Этот красивый или золотой эффект создается при помощи градиентов background: linear-gradient, а также с помощью фоновой заливке -webkit-background-clip и -webkit-text-fill-color в стилях.

Демонстрация
Источник: atuin.ru
2022-01-12 Загрузок: 1 Просмотров: 237 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 2
Nikas
Nikas 2022-01-12 20:221
+2
Красиво выглядит.
Kosten
Kosten 2022-01-12 22:312
0
Соглашусь, хотел новогодний шрифт, но посчитал уже позно, там явно красиво и оригинально. Где в самих знаках идет снег на светло темном фоне.
avatar