Золотой стиль текста на чистом CSS + HTML
 | |
| В статье представлен материал на создание текста на CSS, который отображается в золотых трехмерных знаков, что смотрится красиво на темном фоне. Если кратко, то создаем золотой текст на чистом CSS, где присутствуют тени под слова или буквы, что делает более оригинальными по своему отображению. Если рассматривать размер букв, то здесь они полностью соответствуют ширине на просматриваемом экране. Что за адаптивность можно не беспокоиться, если вы разместите на страницах сайта. Где автоматически будут подстраиваться, как под мобильные экраны по ширине, так и под широкий монитор. Плюс в том, если вам нужно сделать светлее или темнее в стилистике знаков. То если вы знакомы с CSS, то можете самостоятельно выполнить свой стиль, это где-то сделать светлее, как вверх или низ, или добавить теней, что станут более закругленные. И все это на небольшой стилистике, где верхнее значение по величине отличается от нижнего описания, где аналогично все редактируется под ваше требование. Как пример, от главного изображение мы просто немного сделали экран меньше, где сразу видим, что автоматически все знаки ставятся под заданную ширину, что все выглядит корректно.  Установка: 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 | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
