CSS is AWESOME

In this example below you will see how to do a CSS is AWESOME with some HTML / CSS and Javascript

...amazing & powerful! Don't you think? :P

Thumbnail
This awesome code was written by Rakeda, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Rakeda ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS is AWESOME</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Codystar|Megrim'>

      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
  background: url(http://neilcarpenter.com/demos/asfalt.png);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 45em;
  height: 35em;
  margin: auto;
  text-align: center;
  color: #fff;
  font-family: "arial";
  letter-spacing: 0.4em;
  overflow: hidden;
}

h1 {
  margin-right: 0.15em;
  font-weight: bold;
  font-size: 17em;
  font-family: "Megrim";
  color: #8e44ad;
  text-shadow: 0 0 0.1em black;
  letter-spacing: 0em;
  animation: space 1.5s forwards ease-out;
  animation-delay: 3.3s;
}
h1 span {
  display: inline-block;
}
h1 span:nth-child(1) {
  animation: fall 1s forwards ease-out alternate;
}
h1 span:nth-child(2) {
  animation: fall2 1.5s forwards ease-out alternate;
}
h1 span:nth-child(3) {
  animation: fall3 2s forwards ease-out alternate;
}

h2 {
  font-size: 3em;
  text-shadow: 0 1em 0.1em black;
  margin-bottom: 0.15em;
}
h2:nth-child(2) {
  animation: fall2 3.7s forwards ease-in-out alternate;
}
h2:nth-child(3) {
  font-size: 4.5em;
  animation: fall3 3.9s forwards ease-in-out alternate;
}
h2:nth-child(4) {
  font-size: 2.8em;
  animation: fall 4.2s forwards ease-in-out alternate;
}

@keyframes space {
  to {
    letter-spacing: -0.17em;
  }
}
@keyframes fall {
  0% {
    transform: translateY(-50em);
  }
}
@keyframes fall2 {
  0% {
    transform: translateX(-50em);
  }
}
@keyframes fall3 {
  0% {
    transform: translateX(50em);
  }
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <h1><span>I</span><span>Y</span><span>S</span></h1>
<h2>it's</h2>
<h2>your</h2>
<h2>space</h2>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Rakeda/css-is-awesome-AaoKd */
body {
  background: url(http://neilcarpenter.com/demos/asfalt.png);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 45em;
  height: 35em;
  margin: auto;
  text-align: center;
  color: #fff;
  font-family: "arial";
  letter-spacing: 0.4em;
  overflow: hidden;
}

h1 {
  margin-right: 0.15em;
  font-weight: bold;
  font-size: 17em;
  font-family: "Megrim";
  color: #8e44ad;
  text-shadow: 0 0 0.1em black;
  letter-spacing: 0em;
  animation: space 1.5s forwards ease-out;
  animation-delay: 3.3s;
}
h1 span {
  display: inline-block;
}
h1 span:nth-child(1) {
  animation: fall 1s forwards ease-out alternate;
}
h1 span:nth-child(2) {
  animation: fall2 1.5s forwards ease-out alternate;
}
h1 span:nth-child(3) {
  animation: fall3 2s forwards ease-out alternate;
}

h2 {
  font-size: 3em;
  text-shadow: 0 1em 0.1em black;
  margin-bottom: 0.15em;
}
h2:nth-child(2) {
  animation: fall2 3.7s forwards ease-in-out alternate;
}
h2:nth-child(3) {
  font-size: 4.5em;
  animation: fall3 3.9s forwards ease-in-out alternate;
}
h2:nth-child(4) {
  font-size: 2.8em;
  animation: fall 4.2s forwards ease-in-out alternate;
}

@keyframes space {
  to {
    letter-spacing: -0.17em;
  }
}
@keyframes fall {
  0% {
    transform: translateY(-50em);
  }
}
@keyframes fall2 {
  0% {
    transform: translateX(-50em);
  }
}
@keyframes fall3 {
  0% {
    transform: translateX(50em);
  }
}

Comments