-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
187 lines (183 loc) · 5.93 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-P73F0EQLS4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-P73F0EQLS4');
</script>
<meta charset="utf-8">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💡</text></svg>">
<link rel="stylesheet" href="luminosity.css">
<title>luminosity.css demo</title>
<meta property="og:title" content="luminosity.css demo" />
<meta
name="description"
content="Demo of luminosity.css, two simple CSS classes to bring dynamic lights and shadows to your web pages."
/>
<meta
property="og:description"
content="Demo of luminosity.css, two simple CSS classes to bring dynamic lights and shadows to your web pages."
/>
<meta
property="og:image"
content="https://github.com/MaximeIJ/luminosity-css/assets/5600516/a9aa4364-f4b5-4d75-a44e-3d8b58d83d97.gif"
/>
<meta name="keywords" content="luminosity.css, css, luminosity, light, shadow, demo" />
<meta name="author" content="Maxime IJ" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
style[contenteditable]{
white-space:pre-wrap;
display:block;
outline:none;
text-align: left;
height:100%;
overflow: auto;
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
background: #eee;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 12rem;
padding: 0 1em;
display: flex;
justify-content: space-evenly;
background: #222;
color: #2a3;
font-family: monospace;
}
main {
width: 100%;
min-height: calc(100vh - 12rem);
}
main > article > div {
position: absolute;
top: calc(var(--lc-y) * 1%);
left: calc(var(--lc-x) * 1%);
border-radius: var(--border-radius, 0);
padding: .75rem;
box-sizing: border-box;
background: #ddd;
color: #111;
font-size: large;
transform: translate(-50%, -50%);
z-index: 0;
}
#box, #ghost {
min-width: 10vmax;
max-width: 15vmax;
min-height: 10vmax;
max-height: 20vmax;
}
section, h1 {
padding: 1rem;
margin: 0;
}
code {
background: #222;
color: #2a3;
font-family: monospace;
padding: 0.1rem;
}
#credits {
position: absolute;
bottom: 0;
right: 0;
padding: 0.5rem 1rem;
font-family: monospace;
font-weight: bold;
color: #140
}
</style>
</head>
<body>
<main id="scene" class="light-source">
<article>
<h1>luminosity.css: Directed element shadows and filter light source demo</h1>
<section>
This <code>main</code> element has the <code>.light-source</code> class.
Edit the default parameters below to move the light source around to see how shadows are affected.
You can also edit the content of the divs themselves!
</section>
<div contenteditable="true" class="light-effect" id="box">
I'm a <code>#box</code> with text, lorem ipsum and so on.
</div>
<div contenteditable="true" class="light-effect" id="shape">
This div has a weird <code>#shape</code> and wants an equally weird shadow 🤩
<p>The <code>box-shadow</code> property will honor the <code>--border-radius</code> shape.</p>
</div>
<div contenteditable="true" id="ghost">
Without the <code>.light-effect</code> class, this <code>#ghost</code> div is not affected by the light source.
</div>
<section id="credits">
made with ☕ by <a href="https://github.com/MaximeIJ/luminosity-css" title="@maximeij/luminosity-css github repository" target="_blank">maximeij</a>
</section>
</article>
</main>
</body>
<footer>
<style spellcheck="false" contenteditable="true">
main {
--lc-light-on: #fff3;
--lc-light-off: #0004;
--lc-light-x: 50;
--lc-light-y: 0;
--lc-light-z: 10;
--lc-light-m: 0;
--lc-shadow-color: #0005;
--lc-shadow-sensitivity: 0.05px;
}
</style>
<style spellcheck="false" contenteditable="true">
#box {
--lc-x: 20;
--lc-y: 33;
}
#ghost {
--lc-x: 50;
--lc-y: 67;
}
</style>
<style spellcheck="false" contenteditable="true">
#shape {
--lc-x: 75;
--lc-y: 33;
--border-radius: 15% 42px 91px 4px / 32px 8% 15px 22px;
width: min(30vw, 28rem);
height: max(13vmin, 10rem);
}
</style>
<!-- checkbox -->
<label for="light-source-track">
<input type="checkbox" id="light-source-track"> Track light source with cursor
</label>
</footer>
<script lang="javascript">
function updatedLightPosition(event) {
const sceneElement = document.getElementById('scene');
sceneElement.style.setProperty('--lc-light-x', event.clientX / sceneElement.clientWidth * 100);
sceneElement.style.setProperty('--lc-light-y', event.clientY / sceneElement.clientHeight * 100);
}
document.getElementById('light-source-track').addEventListener('change', function(e) {
const sceneElement = document.getElementById('scene');
if (e.target.checked) {
sceneElement.addEventListener('mousemove', updatedLightPosition);
} else {
sceneElement.removeEventListener('mousemove', updatedLightPosition);
sceneElement.style.removeProperty('--lc-light-x');
sceneElement.style.removeProperty('--lc-light-y');
}
});
</script>
</html>