CombatCreative/CSS Element Background Blend Modes.markdown

## CSS Element Background Blend Modes.markdown

      
    Raw
  

              CSS Element Background Blend Modes.markdown
            
          
    CSS Element Background Blend Modes

A Pen by Adobe Web Platform on CodePen.
License.

  
## index.html
<html>
<head>
  <title>
    HTML Element Background Blending Gallery
  </title>
</head>
<body onload="load()">
  <div id="title">CSS Background Blending Modes</div>
  <div id="header">
    <label>Blend Mode: </label>
    <select id="blendModesList">
      <option value="normal">normal</option>
      <option value="multiply">multiply</option>
      <option value="screen">screen</option>
      <option value="overlay">overlay</option>
      <option value="darken">darken</option>
      <option value="lighten">lighten</option>
      <option value="color-dodge">color-dodge</option>
      <option value="color-burn">color-burn</option>
      <option value="hard-light">hard-light</option>
      <option value="soft-light">soft-light</option>
      <option value="difference">difference</option>
      <option value="exclusion">exclusion</option>
      <option value="hue">hue</option>
      <option value="saturation">saturation</option>
      <option value="color">color</option>
      <option value="luminosity">luminosity</option>
    </select>
    <label>Background color: </label>
    <input id="backgroundColorPicker" type="color" value='#4499f0'>
    <label>Background image: </label>
    <select id="backgroundImageList">
      <option value="http://farm6.staticflickr.com/5328/8959572482_2601c86c04_c.jpg">Waterfall</option>
      <option value="http://farm4.staticflickr.com/3694/8959572838_57fa40bdb4_c.jpg">Seaside</option>
      <option value="http://farm9.staticflickr.com/8266/8959572616_c47c510060_c.jpg">Sunset</option>
      <option value="http://farm8.staticflickr.com/7371/8958376607_b8c6586c4b_c.jpg">Bridge</option>
      <option value="http://farm8.staticflickr.com/7403/8958376269_d8b658fc2c_c.jpg">Mountains</option>
    </select>
  </div>
  <div id="wrapper"></div>
</body>
</html>

## script.js
function blendModeChanged() {
  var blendMode = document.getElementById("blendModesList").options[
    document.getElementById("blendModesList").selectedIndex].value;
  document.getElementById("wrapper").style.backgroundBlendMode = blendMode + ', normal';
  document.getElementById("wrapper").style.webkitBackgroundBlendMode = blendMode + ', normal';
}

function backgroundColorChanged() {
  var backgroundColor = document.getElementById("backgroundColorPicker").value;
  document.getElementById("wrapper").style.backgroundColor = backgroundColor;
}

function backgroundImageChanged() {
  var selectedImage = document.getElementById("backgroundImageList").options[
    document.getElementById("backgroundImageList").selectedIndex];

  var backgroundImage = selectedImage.value;
  document.getElementById("wrapper").style.backgroundImage = "url(" + backgroundImage + ")";
}

function load() {
  if (navigator.userAgent.indexOf('Chrome') === -1) {
    $("#backgroundColorPicker").spectrum(
      {color: "#f00",
       showButtons: false,
       change: function(color) {
         document.getElementById("wrapper").style.backgroundColor = color.toHexString();
       }});
  }
  document.getElementById("blendModesList").addEventListener("change", blendModeChanged, false);
  document.getElementById("backgroundColorPicker").addEventListener("change", backgroundColorChanged, false);
  document.getElementById("backgroundImageList").addEventListener("change", backgroundImageChanged, false);
}

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://bgrins.github.io/spectrum/spectrum.js"></script>
<script src="http://codepen.io/adobe/pen/070820dd14c48fa9aab6f858b19444b1"></script>

## style.css
body {
  font-family: Arial, Helvetica, sans-serif;
  background: lightgray;
}

#title {
  font-size: 150%;
  font-style: normal;
  line-height: 120%;
  font-weight: 700;
  margin: 15px 0px 10px 12px;
  padding: 10px 15px 8px 100px;
}

#header {
  padding: 10px 15px 8px 20px;
}

#wrapper {
  margin: 10px 15px 20px 20px;
  border-radius: 30px;
  width: 800px;
  height: 600px;
  background: url('http://farm6.staticflickr.com/5328/8959572482_2601c86c04_c.jpg') no-repeat center center fixed, rgba(0,55,99,1);
  -webkit-background-size: cover;
  background-size: cover;

  background-blend-mode: normal, normal;
  -webkit-background-blend-mode: normal, normal;
}

## styles
<link href="http://bgrins.github.io/spectrum/spectrum.css" rel="stylesheet" />
	<html>
	<head>
	<title>
	HTML Element Background Blending Gallery
	</title>
	</head>
	<body onload="load()">
	<div id="title">CSS Background Blending Modes</div>
	<div id="header">
	<label>Blend Mode: </label>
	<select id="blendModesList">
	<option value="normal">normal</option>
	<option value="multiply">multiply</option>
	<option value="screen">screen</option>
	<option value="overlay">overlay</option>
	<option value="darken">darken</option>
	<option value="lighten">lighten</option>
	<option value="color-dodge">color-dodge</option>
	<option value="color-burn">color-burn</option>
	<option value="hard-light">hard-light</option>
	<option value="soft-light">soft-light</option>
	<option value="difference">difference</option>
	<option value="exclusion">exclusion</option>
	<option value="hue">hue</option>
	<option value="saturation">saturation</option>
	<option value="color">color</option>
	<option value="luminosity">luminosity</option>
	</select>
	<label>Background color: </label>
	<input id="backgroundColorPicker" type="color" value='#4499f0'>
	<label>Background image: </label>
	<select id="backgroundImageList">
	<option value="http://farm6.staticflickr.com/5328/8959572482_2601c86c04_c.jpg">Waterfall</option>
	<option value="http://farm4.staticflickr.com/3694/8959572838_57fa40bdb4_c.jpg">Seaside</option>
	<option value="http://farm9.staticflickr.com/8266/8959572616_c47c510060_c.jpg">Sunset</option>
	<option value="http://farm8.staticflickr.com/7371/8958376607_b8c6586c4b_c.jpg">Bridge</option>
	<option value="http://farm8.staticflickr.com/7403/8958376269_d8b658fc2c_c.jpg">Mountains</option>
	</select>
	</div>
	<div id="wrapper"></div>
	</body>
	</html>
	function blendModeChanged() {
	var blendMode = document.getElementById("blendModesList").options[
	document.getElementById("blendModesList").selectedIndex].value;
	document.getElementById("wrapper").style.backgroundBlendMode = blendMode + ', normal';
	document.getElementById("wrapper").style.webkitBackgroundBlendMode = blendMode + ', normal';
	}

	function backgroundColorChanged() {
	var backgroundColor = document.getElementById("backgroundColorPicker").value;
	document.getElementById("wrapper").style.backgroundColor = backgroundColor;
	}

	function backgroundImageChanged() {
	var selectedImage = document.getElementById("backgroundImageList").options[
	document.getElementById("backgroundImageList").selectedIndex];

	var backgroundImage = selectedImage.value;
	document.getElementById("wrapper").style.backgroundImage = "url(" + backgroundImage + ")";
	}

	function load() {
	if (navigator.userAgent.indexOf('Chrome') === -1) {
	$("#backgroundColorPicker").spectrum(
	{color: "#f00",
	showButtons: false,
	change: function(color) {
	document.getElementById("wrapper").style.backgroundColor = color.toHexString();
	}});
	}
	document.getElementById("blendModesList").addEventListener("change", blendModeChanged, false);
	document.getElementById("backgroundColorPicker").addEventListener("change", backgroundColorChanged, false);
	document.getElementById("backgroundImageList").addEventListener("change", backgroundImageChanged, false);
	}
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="http://bgrins.github.io/spectrum/spectrum.js"></script>
	<script src="http://codepen.io/adobe/pen/070820dd14c48fa9aab6f858b19444b1"></script>
	body {
	font-family: Arial, Helvetica, sans-serif;
	background: lightgray;
	}

	#title {
	font-size: 150%;
	font-style: normal;
	line-height: 120%;
	font-weight: 700;
	margin: 15px 0px 10px 12px;
	padding: 10px 15px 8px 100px;
	}

	#header {
	padding: 10px 15px 8px 20px;
	}

	#wrapper {
	margin: 10px 15px 20px 20px;
	border-radius: 30px;
	width: 800px;
	height: 600px;
	background: url('http://farm6.staticflickr.com/5328/8959572482_2601c86c04_c.jpg') no-repeat center center fixed, rgba(0,55,99,1);
	-webkit-background-size: cover;
	background-size: cover;

	background-blend-mode: normal, normal;
	-webkit-background-blend-mode: normal, normal;
	}