Item: Oooh &#x2013; it&#x2019;s Halloween!
Rating: 3.4
Author: 2kool2

2 Downloads
31 Views
Tweet
Download Now View Demo

HTML
CSS

<!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> &mdash; <a class=myStuff_lnk target=_blank title="[new window]" href="https://codepen.io/2kool2/pens/popular/?grid_type=list#">Popular pens</a> &mdash; <a class=myStuff_lnk target=_blank title="[new window]" href="https://codepen.io/2kool2/pens/public/?grid_type=list#">Latest pens</a> &mdash; <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;
}