Oooh – it’s Halloween!

In this example below you will see how to do a Oooh – it’s Halloween! with some HTML / CSS and Javascript

Ghostly text effect achieved by animating text-shadows on three layers. Pure CSS, no JavaScript. Play with the values and timings to create your own!

Thumbnail
This awesome code was written by 2kool2, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 2kool2 ©
  • 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;
}

Comments