FANDOM


A summary of this page:
Blend modes can be activated using ! style="mix-blend-mode:?; background:?;" on cells for parts of a template overlay.

Blend Modes are color mixing techniques that are designed to make the table cells appear differently with a color overlay being used such as brightening or darkening regardless of the color value being set while blending is active. These were developed by Rik Cabanier and their team.

HTMLEdit

Blend modes can be done on the table cells on the following codes whenever a color frame is being made with a desired color.

Examples:

! style="background:#A0FF00; color:white; mix-blend-mode:color-dodge"


 
Color Dodge


! style="background:#0AF; color:white; mix-blend-mode:difference"


 
Difference


! style="background:#4BFF00; color:white; mix-blend-mode:luminosity"


 
Luminosity


! style="background:#00FF00; color:black; mix-blend-mode:screen"


 
Screen


! style="background:#5F5F5F; color:white; mix-blend-mode:color-burn"


 
Color Burn


! style="background:#B400FF; color:white; mix-blend-mode:hue"


 
Hue

UseEdit

You can activate blending using a desired mode you wish to use aside from normal. When activated on a certain mode, it will take effect depending on which mode you've selected. This can also be done for other elemetns including text and images on the background by using this code:

<div style="background:?">
<span style="mix-blend-mode:?">TEXT</span>
</div>

Which results this example:

TEXT

List of modesEdit

These are the available blend modes that were made for css as well as the style div container:[1]

  • color
  • color-burn
  • color-dodge
  • darken
  • difference
  • exclusion
  • hard-light
  • hue
  • lighten
  • luminosity
  • multiply
  • normal (default)
  • overlay
  • saturation
  • screen
  • soft-light

NotesEdit

  • Some of them can make the appearance of the text hard to see on a certain color you chose. When activating them, be sure you set the color to where it can be viewed without harsh display.
  • The blend modes may only work on certain browsers as some of them don't have them implemented yet.[2]
  • Blend modes can blend other objects alone only for CSS without any need for background before activation of this. An example of that include the Wikia tool bar below the page.
  • If an element has it active, the selection highlights are blended into.

SourcesEdit

  1. https://css-tricks.com/almanac/properties/m/mix-blend-mode/
  2. http://caniuse.com/#feat=css-mixblendmode

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.