Цветной текст на изображение: фильтр css ‘mix-blend-mode’

5 (100%) 11 vote[s]

Один из способов украсить сайт — это использовать картинки с контрастными надписями. Для этого не обязательно нужен Фотошоп, можно наложить цветной текст на изображение, используя фильтр CSS. CSS свойство ‘mix-blend-mode‘ определяет режим смешивания цветов выбранного элемента с низлежащими слоями.

Согласно спецификации, blend-mode может принимать значения:

mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

Проверим, как эти фильтры накладывают цветное изображение на картинку:

CSS
HTML
Babulya

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

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style >

.background { 
background: url('картинка.jpg');
background-repeat: no-repeat;
cursor: default
}

#filtr {
 margin-top:0; 
margin-bottom:20px;
color: #0e7a02;
background: linear-gradient(45deg, #3bed4d 40%, #a8051b 60%);
-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 510%; 
  text-align: center;
}

.difference {
  mix-blend-mode: difference;
}
.luminosity {
  mix-blend-mode:luminosity;
}
.color {
  mix-blend-mode:color;
}

.saturation {
  mix-blend-mode:saturation;
}
.exclusion {
  mix-blend-mode:exclusion;
}
.soft-light {
  mix-blend-mode: soft-light;
}
.hard-light {
  mix-blend-mode:hard-light;
}
.lighten {
  mix-blend-mode:lighten;
}
.darken {
  mix-blend-mode:darken;
}
.overlay {
  mix-blend-mode:overlay;
}
.screen {
  mix-blend-mode:screen;
}
.multiply {
  mix-blend-mode:multiply;
}
.hue {
  mix-blend-mode: hue;
}
.color-dodge {
mix-blend-mode: color-dodge;
}

</style>
</head>
<body>

<div id="output" class="background">
   <h2 id="filtr" aria-multiline='false'>
      CSS<br>HTML<br>Babulya
   </h2>
</div>
<p>
  <span id="effectValue3"  style="display:block;
	font-size:32px;color: #2e0f01;text-align: center;font-weight: bold;"></span>
</p>
<script>

  var output = document.getElementById('output');

  var idx = 0;
  var filters = [
    'difference',
    'luminosity',
    'color',
    'saturation',
    'exclusion',
    'soft-light',
	'hard-light',
	'lighten',
	'darken',
	'overlay',
	'screen',
	'multiply',
	'hue',
	'color-dodge'
  ];
  
  function changeFilter(e) {
    var el = e.target;
    var effect = filters[idx++ % filters.length];
    console.log("effect : " + effect + " idx = " + idx);
   
      el.className = effect;
   
    event.stopPropagation();    
    event.preventDefault();
	var output = document.querySelector('#effectValue3');
  output.innerHTML = "Эффект: " + effect ;
  
  }
  
  output.addEventListener('click', changeFilter, false);
  </script>
</body>
</html>

На текущий момент ‘mix-blend-mode’ пока еще поддерживается не всеми браузерами и имеет статус «Кандидат в рекомендации».

цветной текст поддержка браузеров

Смотрите больше «Background CSS: множественный фон, смешивание, blend-mode«.

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 233

Популярные записи