-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
120 lines (99 loc) · 5.29 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS mix-blend-mode property</title>
<meta name="description" content="Have a glance at how the mix-blend-mode CSS property works with this live demo." />
<meta name="keywords" content="css, mix-blend-mode, css mix-blend-mode, css property, css property mix-blend-mode" />
<meta property="og:title" content="CSS mix-blend-mode property"/>
<meta property="og:image" content="http://arthurgouveia.com/css-mix-blend-mode/assets/img/facebook.png"/>
<meta property="og:site_name" content="Arthur Gouveia"/>
<meta property="og:description" content="Have a glance at how the mix-blend-mode CSS property works with this live demo.">
<meta property="og:type" content="article" />
<meta property="article:author" content="http://arthurgouveia.com" />
<meta property="og:url" content="http://arthurgouveia.com/css-mix-blend-mode/"/>
<link rel="stylesheet" type="text/css" href="assets/css/normalize.css">
<link rel="stylesheet" type="text/css" href="assets/css/foundation.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<div class="row">
<div class="large-3 columns sidebar">
<h6>Choose a value
<small><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode">[Source]</a></small>
</h6>
<ul id="blend-options" class="side-nav blend-options">
<li><a href="#color">color</a></li>
<li><a href="#color-burn">color-burn</a></li>
<li><a href="#color-dodge">color-dodge</a></li>
<li><a href="#darken">darken</a></li>
<li><a href="#difference">difference</a></li>
<li><a href="#exclusion">exclusion</a></li>
<li><a href="#hard-light">hard-light</a></li>
<li><a href="#hue">hue</a></li>
<li><a href="#inherit">inherit</a></li>
<li><a href="#initial">initial</a></li>
<li><a href="#lighten">lighten</a></li>
<li><a href="#luminosity">luminosity</a></li>
<li><a href="#multiply">multiply</a></li>
<li><a href="#normal">normal</a></li>
<li><a href="#overlay">overlay</a></li>
<li><a href="#saturation">saturation</a></li>
<li><a href="#screen">screen</a></li>
<li><a href="#soft-light">soft-light</a></li>
<li><a href="#unset">unset</a></li>
</ul>
</div>
<div class="large-9 columns">
<h1>Mix-Blend-Mode CSS property test</h1>
<p>
This is a simple code and show test of how the CSS property <strong>mix-blend-mode</strong> works.
</p>
<p>
Pick a value on the <strong>sidebar</strong> and select the <strong>font color</strong> you want:
</p>
<div class="row">
<div class="large-3 columns">
<label>Color Sample</label>
<div class="font-color-sample th" id="font-color-sample"></div>
</div>
<div class="large-9 columns">
<label for="font-color-level-red">
Red Level<br/>
<input type="range" min="0" max="255" value="255" class="font-color-levels" id="font-color-level-red"/>
</label>
<label for="font-color-level-green">
Green Level<br/>
<input type="range" min="0" max="255" value="255" class="font-color-levels" id="font-color-level-green"/>
</label>
<label for="font-color-level-blue">
Blue Level<br/>
<input type="range" min="0" max="255" value="255" class="font-color-levels" id="font-color-level-blue"/>
</label>
</div>
</div>
<h2>Text on image</h2>
<button id="image-change-button">Change image</button>
<div id="image-container" class="image-container">
<span id="image-text" class="image-text">Big text</span>
</div>
<hr/>
<h2>Text on background colors</h2>
<div class="blend-text blend-text-1"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia quae voluptates, quas!</span></div>
<div class="blend-text blend-text-2"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem ea quia.</span></div>
<div class="blend-text blend-text-3"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti autem obcaecati laboriosam!</span></div>
</div>
</div>
<a href="https://github.com/arthurgouveia/css-mix-blend-mode"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
<script type="text/javascript" src="assets/js/app.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-69091439-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>