<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Oooh – it’s Halloween!</title>
<script src="//use.edgefonts.net/emilys-candy.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class=heading data-attr-text="Oooh – it’s Halloween!">Oooh – it’s Halloween!</h1>
<p class=strapline>Have a play with the values and timings to create your own</p>
<p class=myStuff><style>.myStuff{z-index:10;font-weight:100;color:#777;font-size:16px;position:fixed;line-height:1.5;width:100vw;bottom:0;margin:0;background-color:rgba(0,0,0,.75);padding:.125em;text-align:center}.myStuff_lnk,.myStuff_lnk:visited{color:#ddd;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);transition:all .3s ease-out}.myStuff_lnk:focus,.myStuff_lnk:hover{color:#fff;border-bottom-color:rgba(255,255,255,1)}</style><a class=myStuff_lnk target=_blank title="[LinkedIn - new window]" href="https://www.linkedin.com/in/mikefoskett">Mike Foskett</a> — <a class=myStuff_lnk target=_blank title="[new window]" href="https://codepen.io/2kool2/pens/popular/?grid_type=list#">Popular pens</a> — <a class=myStuff_lnk target=_blank title="[new window]" href="https://codepen.io/2kool2/pens/public/?grid_type=list#">Latest pens</a> — <a class=myStuff_lnk target=_blank title="[new window]" href="https://websemantics.uk/">webSemantics</a></p>
</body>
</html>
/*Downloaded from https://www.codeseek.co/2kool2/oooh-andx2013-itandx2019s-halloween-JredBb */
/* Fluid-responsive font calculator: https://websemantics.uk/tools/responsive-font-calculator/ */
@media (min-width: 20em) {
:root {
font-size: calc(1rem + ((1vw - 0.2em) * 3));
box-sizing: border-box;
}
}
@media (min-width: 120em) {
:root {
font-size: 4em;
}
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
position: relative;
margin: 0;
color: #fff;
background-color: #112;
font-family: sans-serif;
font-size: 1rem;
text-align: center;
min-height: 100vh;
}
.heading {
color: #000;
/* color: #fff; */
position: absolute;
z-index: 1;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
margin: 0;
padding: 0 1rem;
font-family: emilys-candy, san-serif;
font-size: 2.5rem;
font-weight: 100;
}
.heading::before,
.heading::after {
content: attr(data-attr-text);
position: absolute;
width: 100%;
padding: 0 1rem;
z-index: -1;
top:0;
left: 0;
}
/* Back layer */
.heading::before {
animation: textGhostingBefore 4s ease-out infinite alternate;
}
@keyframes textGhostingBefore {
0% {text-shadow: -0.5em -0.5em 0.5em hsla(0, 0%, 100%, 0.25);}
50% {text-shadow: 0 -0.25em 0.125em hsla(0, 0%, 100%, 0.5);}
100% {text-shadow: 0.5em -0.5em 0.5em hsla(0, 0%, 100%, 0.25);}
}
/* Middle layer */
.heading::after {
animation: textGhostingAfter 4s ease-in infinite alternate;
}
@keyframes textGhostingAfter {
0% {text-shadow: -0.25em -0.25em 0.25em hsla(0, 0%, 100%, 0.5);}
50% {text-shadow: 0 -0.125em 0.125em hsla(0, 0%, 100%, 0.25);}
100% {text-shadow: 0.25em -0.25em 0.25em hsla(0, 0%, 100%, 0.5);}
}
/* Front layer */
.heading {
animation: textGhosting 3s ease-in-out infinite alternate;
}
@keyframes textGhosting {
0% {text-shadow: 0.125em -0.125em 0.125em #fff;}
50% {text-shadow: 0 0 0.5em #fff;}
100% {text-shadow: -0.125em -0.125em 0.125em #fff;}
}
.strapline {
color: #3d742c;
position: absolute;
z-index: 1;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
font-family: emilys-candy, san-serif;
font-size: 1rem;
width: 100%;
max-width: 22rem;
margin: 0 auto;
padding: 0 1rem;
text-shadow: 0 2px 2px #000;
letter-spacing: 0.05em;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
![FAQ using ARIA attributes to meet WCAG 2 level AA [without a button]](https://codepen.io/2kool2/pen/RJaBYP/image/small.png)
