ZorNet.Ru — сайт для вебмастера » HTML и CSS » Фоновое изображение текста при помощи CSS3

Фоновое изображение текста при помощи CSS3

Прекрасный способ создать логотип или текст из рисунка, где все преобразование дизайн будут соответствовать стилистики картинки и цвета. Теперь веб мастер может выбрать любой оттенок, который может быть создан на градиентах, что после установки получится оригинальный вид. Если говорить о логотипе или название раздела, то безусловно уникально все смотрится.

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

Приступаем к установке:

HTML

Код

<div class="zornet_ru_dsamen"><a href="http://zornet.ru">ZORNET.RU</a></div>

CSS

Код

.zornet_ru_dsamen {
  background: url(http://zornet.ru/Aben/ABGDA/zornet_ru/7.jpg) -75px -75px;
  color: #f71212;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-weight: bold;
  font-size: 98px;
  font-family: arial, helvetica;
  margin: 47px auto;
  text-align: center;
}

body{
  background: #1d1e1f;
}

Все настройки, как по визуальности и размеру в CSS ставим.

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

18 Марта 2018 Просмотров: 1230 Комментариев: (0)

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

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

Kosten

Комментарии: 0