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

Прозрачный текст относительно фона CSS

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

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

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

1. Прозрачный текст поверх картинки на CSS:

Прозрачный текст для фона с выводом знаков

2. Пишем текст поверх изображения на HTML:

Полупрозрачный текст поверх картинки на CSS

Установочный процесс:

HTML

Код

<img src="http://zornet.ru/_fr/56/5495938.jpg" alt="" class="painting">
<h1 class="muvokan-tekstas">ZORNET.RU</h1>

CSS

Код

.painting{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  transform: scale(1.8);
  animation: scaleImage 5s ease-out forwards;
}

.muvokan-tekstas {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: calc(10px + 8vw);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-transform: uppercase;
  color: #f7f7f7;
  background-color: #080808;
  mix-blend-mode: multiply;
  opacity: 0;
  animation: fadeInText 10s 2s ease-out forwards;
}

@keyframes scaleImage {
  100% {
  transform: scale(1);
  }
}

@keyframes fadeInText {
  100% {
  opacity: 1;
  }
}

Вот еще одна динамическая стилистика текста CSS с использованием диагональных штрихов для шаблона, где представлена простая типография в стиле логотипа с трафаретными рамками под значение.

Где красиво и оригинально оформлен текст, что идет в единственном стиле типографского описание, которое опирается на более традиционные принципы дизайн сайта.

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

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

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

Как придать тексту или изображению прозрачный фон с помощью CSS

HTML

Код

<div class="usamitev-savadem"><a href="/" rel="ZorNet.Ru — сайт для вебмастера">ZORNET.RU</a></div>

CSS

Код

.usamitev-savadem {
  background: url(http://zornet.ru/_fr/56/s8961241.jpg) -80px -80px;
  color: red;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-weight: bold;
  font-size: 100px;
  font-family: arial, helvetica;
  width: 600px;
  margin: 50px auto;
  text-align: center;
}

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

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

PS - Некоторые из этих фрагментов могут оказаться полезными в будущих проектах, в то время как другие никогда не смогут быть воспроизведены в профессиональной среде.

28 Ноября 2019 Загрузок: 1 Просмотров: 2061 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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