nilskoppelmann/README.md

## README.md

      
    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; [...] }

  
## 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>

## 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;
}
	<!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>
	/* 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;
	}