<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blur / Focus</title>
<style>
* {
-webkit-transition: .8s;
-moz-transition: .8s;
-ms-transition: .8s;
transition: .8s;
}
body {
height: auto;
font-family: "Open Sans", sans-serif;
}
h1 {
font-size: 80px;
padding: 80px 40px;
text-align: center;
text-rendering: optimizeLegibility;
}
body.focus {
background-color: #D2D2D2;
color: #020202;
}
#focus {
color: #020202;
letter-spacing: .1em;
text-shadow: 4px 4px 16px #202020;
filter: DropShadow(color=#202020, offX=2, offY=2, positive=1);
}
body.blur {
background-color: #2D2D2D;
color: #D2D2D2;
}
#blur {
color: #202020;
letter-spacing: .1em;
text-shadow: 4px 4px 16px #020202;
filter: DropShadow(color=#020202, offX=2, offY=2, positive=1);
}
.focus #focus,
.blur #blur {
display: block;
}
.focus #blur,
.blur #focus {
display: none;
}
a {
width: 180px;
margin: auto;
padding: 14px;
display: block;
font-size: 14px;
text-align: center;
text-decoration: none;
}
.focus a {
border: 2px solid #202020;
color: #202020;
}
.blur a {
border: 2px solid #D2D2D2;
color: #D2D2D2;
}
</style>
</head>
<body class="focus">
<h1 id="focus">FOCUS</h1>
<h1 id="blur">BLUR</h1>
<a href="#">I N T R O</a>
<h2 align="center">Web</h2>
<h4 align="center">ScriptShow 2000 - 2016</h4>
<script>
window.onblur = function() {
document.title = "Blur";
document.body.className = "blur";
}
window.onfocus = function() {
document.title = "Focus";
document.body.className = "focus";
}
</script>
</body>
</html>