Skip to content

Instantly share code, notes, and snippets.

@signalwerk

signalwerk/black-smearing.html

Last active June 8, 2019 13:54
Show Gist options
  • Save signalwerk/a4084f47fb6b56f79ca33055dd2ea9a3 to your computer and use it in GitHub Desktop.
Save signalwerk/a4084f47fb6b56f79ca33055dd2ea9a3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
black-smearing.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Black smearing</title>
<link href="https://fonts.googleapis.com/css?family=Work+Sans:100" rel="stylesheet">
<style>
html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
background-color: #000;
font-size: 15px;
color: white;
line-height: 1.5rem;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}
.content {
margin: 0 auto;
padding: 1rem;
text-align: center;
}
.spacer {
height: 40rem;
}
.circle {
width: 8rem;
height: 8rem;
border-radius: 50%;
margin: 3rem auto;
position: relative;
}
.box {
position: absolute;
margin: 0 auto;
margin-top: 2rem;
margin-left: 2rem;
width: 4rem;
height: 4rem;
}
.circle--color-A {
background-color: #a7a5a8;
}
.text--color-A {
color: #a7a5a8;
}
.circle--color-B {
background-color: #353336;
}
.text--color-B {
color: #353336;
}
.content .box {
background-color: #000;
}
.content--color-B {
background-color: #060606;
}
.content--color-B .box {
background-color: #060606;
}
.text {
font-family: 'Work Sans', sans-serif;
font-weight: 100;
font-size: 3rem;
text-align: center;
margin: 3rem 0;
}
</style>
</head>
<body>
<!-- page content -->
<div class="content">
<p>Test for black smearing on OLED <br />2019 · Stefan Huber</p>
</div>
<div class="content">
<p>Black background · <code>#000000</code></p>
<div class="circle circle--color-A"><div class="box"></div></div>
</div>
<div class="content content--color-B">
<p>Nearly black background · <code>#060606</code></p>
<div class="circle circle--color-A"><div class="box"></div></div>
</div>
<div class="content">
<p>Black background · <code>#000000</code></p>
<div class="circle circle--color-B"><div class="box"></div></div>
</div>
<div class="content content--color-B">
<p>Nearly black background · <code>#060606</code></p>
<div class="circle circle--color-B"><div class="box"></div></div>
</div>
<div class="content">
<p>Black background · <code>#000000</code></p>
<div class="text text--color-A">Test</div>
</div>
<div class="content content--color-B">
<p>Nearly black background · <code>#060606</code></p>
<div class="text text--color-A">Test</div>
</div>
<div class="content">
<p>Black background · <code>#000000</code></p>
<div class="text text--color-B">Test</div>
</div>
<div class="content content--color-B">
<p>Nearly black background · <code>#060606</code></p>
<div class="text text--color-B">Test</div>
</div>
<div class="spacer"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment