Skip to content

Instantly share code, notes, and snippets.

@nilskoppelmann

nilskoppelmann/README.md

Last active December 20, 2015 15:59
Show Gist options
  • Save nilskoppelmann/6158386 to your computer and use it in GitHub Desktop.
Save nilskoppelmann/6158386 to your computer and use it in GitHub Desktop.
Download ZIP
Little Demonstration of what CSS3 can do.
Raw
README.md

CSS3retro

a CSS Snippetcollection

This Snippetcollection contains a few nice ways to use CSS3 to get astounding RETRO Gaming Symbols.

Usage

include the styles.css file in your HTML-Head just like that:

<link rel="stylesheet" href="https://github.com/nilsology/css3retro/master/css/styles.css" type="text/css">

then add the following in your HTML-Body at the position you want it to appear:

here is a list of available classes:

  • pacman

  • pacman-row

  • invader

especially for pacman-row:

<div class="pacman-row">

<div class="pacman center"></div>

<div class="circle right"></div>

<div class="circle right"></div>

</div>

add as many as your screen fits, but:

keep in mind, that you might have to change the width of .pacman-row { width: auto; [...] }

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3Retro Demonstration</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<meta name="description" content="Snippetcollection containing retro-gaming symbols in CSS3">
<meta name="author" content="Nilsology">
</head>
<body>
<h1>CSS3retro</h1>
<!-- Pacman -->
<h3>Pacman</h3>
<div class="pacman"></div>
<!-- Pacman Row -->
<h3>Pacman Row</h3>
<div class="pacman-row">
<div class="pacman center"></div>
<div class="circle right"></div>
<div class="circle right"></div>
<div class="circle right"></div>
<div class="circle right"></div>
<div class="circle right"></div>
<div class="circle right"></div>
</div>
<!-- Spaceinvader -->
<h3>Spaceinvader</h3>
<div class="invader"></div>
</body>
</html>
Raw
styles.css
/* Pacman */
.right { float: right; }
.center { margin: 0 auto; }
.pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid #1D1F1D;
border-left: 60px solid #1D1F1D;
border-bottom: 60px solid #1D1F1D;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
.circle {
width: 25px;
height: 25px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
/* Pacman Row */
.pacman-row { width: auto; position: relative; } /* change `width` if needed */
.pacman-row .circle { position: relative; top: -68px; right: 25px; margin: 0 7px; background-color: black; }
.pacman-row .circle:nth-child(even) { background-color: #1D1F1D!important; }
.pacman-row .circle:nth-child(odd) { background-color: black!important; }
/* SpaceInvader */
.invader {
box-shadow: 0 0 0 1em #1D1F1D, 0 1em 0 1em #1D1F1D,
-2.5em 1.5em 0 .5em #1D1F1D,
2.5em 1.5em 0 .5em #1D1F1D,
-3em -3em 0 0 #1D1F1D,
3em -3em 0 0 #1D1F1D,
-2em -2em 0 0 #1D1F1D,
2em -2em 0 0 #1D1F1D,
-3em -1em 0 0 #1D1F1D,
-2em -1em 0 0 #1D1F1D,
2em -1em 0 0 #1D1F1D,
3em -1em 0 0 #1D1F1D,
-4em 0 0 0 #1D1F1D,
-3em 0 0 0 #1D1F1D,
3em 0 0 0 #1D1F1D,
4em 0 0 0 #1D1F1D,
-5em 1em 0 0 #1D1F1D,
-4em 1em 0 0 #1D1F1D,
4em 1em 0 0 #1D1F1D,
5em 1em 0 0 #1D1F1D,
-5em 2em 0 0 #1D1F1D,
5em 2em 0 0 #1D1F1D,
-5em 3em 0 0 #1D1F1D,
-3em 3em 0 0 #1D1F1D,
3em 3em 0 0 #1D1F1D,
5em 3em 0 0 #1D1F1D,
-2em 4em 0 0 #1D1F1D,
-1em 4em 0 0 #1D1F1D,
1em 4em 0 0 #1D1F1D,
2em 4em 0 0 #1D1F1D;
background: #1D1F1D;
width: 1em;
height: 1em;
overflow: hidden;
margin: 50px 0 70px 65px;
position: relative;
top: 25px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment