grid-invader

In this example below you will see how to do a grid-invader with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 1zm0, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1zm0 ©
  • HTML
  • CSS
  • JavaScript
    <body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div id="container">
  <div id='space-invader'></div>
  </div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>

/*Downloaded from https://www.codeseek.co/1zm0/grid-invader-RMGbvz */
    body {
  margin: 5px;
  padding: 0;
  border-box: box-sizing;
  top: 0;
  left: 0;
  display: grid;
  background-color: #26C6DA;
  grid-template-columns: 1fr 1fr 1fr 5px 10px 20px 40px 80px 40px 20px 10px 5px 1fr 1fr 1fr;
  grid-template-rows:  1fr 1fr 1fr 5px 10px 20px 40px 80px 40px 20px 10px 5px 1fr 1fr 1fr;
  grid-gap: 10px;
}

div {
  background-color: white;
  border: dotted 1px black;
}

#space-invader { 
  box-shadow: 
    0 0 0 1em red, 
    0 1em 0 1em red,
    -2.5em 1.5em 0 .5em red,
    2.5em 1.5em 0 .5em red,
    -3em -3em 0 0 red,
    3em -3em 0 0 red,
    -2em -2em 0 0 red,
    2em -2em 0 0 red,
    -3em -1em 0 0 red,
    -2em -1em 0 0 red,
    2em -1em 0 0 red,
    3em -1em 0 0 red,
    -4em 0 0 0 red,
    -3em 0 0 0 red,
    3em 0 0 0 red,
    4em 0 0 0 red,
    -5em 1em 0 0 red,
    -4em 1em 0 0 red,
    4em 1em 0 0 red,
    5em 1em 0 0 red,
    -5em 2em 0 0 red,
    5em 2em 0 0 red,
    -5em 3em 0 0 red, 
    -3em 3em 0 0 red,
    3em 3em 0 0 red,
    5em 3em 0 0 red,
    -2em 4em 0 0 red,
    -1em 4em 0 0 red,
    1em 4em 0 0 red,
    2em 4em 0 0 red; 
  background: red; 
  width: 1em; 
  height: 1em; 
  border: none;
}

#space-invader:hover {
    box-shadow: 
    0 0 0 .5em blue, 
    0 .5em 0 .5em blue,
    -1.25em .75em 0 .25em blue,
    2.5em 1.5em 0 .5em blue,
    -1.5em -1.5em 0 0 blue,
    1.5em -1.5em 0 0 blue,
    -1em -1em 0 0 blue,
    1em -1em 0 0 blue,
    -1.5em -.5em 0 0 blue,
    -1em -.5em 0 0 blue,
    1em -em 0 0 blue,
    3em -1em 0 0 blue,
    -4em 0 0 0 blue,
    -3em 0 0 0 blue,
    3em 0 0 0 blue,
    4em 0 0 0 blue,
    -5em 1em 0 0 blue,
    -4em 1em 0 0 blue,
    4em 1em 0 0 blue,
    5em 1em 0 0 blue,
    -5em 2em 0 0 blue,
    5em 2em 0 0 blue,
    -5em 3em 0 0 blue, 
    -3em 3em 0 0 blue,
    3em 3em 0 0 blue,
    5em 3em 0 0 blue,
    -2em 4em 0 0 blue,
    -1em 4em 0 0 blue,
    1em 4em 0 0 blue,
    2em 4em 0 0 blue; 
  background: blue; 
  opacity: .25;
  width: 1em; 
  height: 1em; 
  border: none;
  transition: .5s ease-in-out;
}


/*Downloaded from https://www.codeseek.co/1zm0/grid-invader-RMGbvz */
    

Comments