CSS3 only classic Gameboy

Developer
Kevin Gimbel
Size
6,134 Kb
Views
34,408
  1. CSS3 only classic Gameboy Previews
  2. CSS3 only classic Gameboy HTML Codes
  3. CSS3 only classic Gameboy CSS Codes
  4. CSS3 only classic Gameboy JS Codes

How do I make an css3 only classic gameboy?

Made this to work around a bit with CSS (and CSS3). Helped me a lot at all and was fun. Feel free to give critic and tips.. What is a css3 only classic gameboy? How do you make a css3 only classic gameboy? This script and codes were developed by Kevin Gimbel on 11 August 2022, Thursday.

CSS3 only classic Gameboy Previews
IQ Test

CSS3 only classic Gameboy - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 only classic Gameboy</title> <link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">	<div class="gb-body">	<div class="gb-display-border">	<div class="display-header-text-first-border"></div>	<div class="display-header-text-second-border"></div>	<h5 class="display-header-text">DOT MATRIX WITH STEREO SOUND</h5>	<div class="display-header-text-after-first-border"></div>	<div class="display-header-text-after-second-border"></div>	<div class="battery-led"></div>	<div class="battery-led-text">BATTERY</div>	<div class="gb-display">	<h2>The Legend of CSS</h2>	<h4 class="blink">Press Start</4>	</div><!-- gb-display -->	</div><!-- gb-display-border -->	<div class="gb-controls">	<div class="controls"> <div class="control up"> <div class="arrow-up"></div> </div> <div class="control right"> <div class="arrow-right"></div> </div> <div class="control center"> <div class="inner-circle"></div> </div>	<div class="control down"> <div class="arrow-down"></div> </div> <div class="control left"> <div class="arrow-left"></div> </div>	</div>	<div class="b-button" id="a-button"></div>	<div class="b">	B	</div>	<div class="a-button" id="a-button"></div>	<div class="a">	A	</div>	<div class="select-button" id="select-button"></div>	<div class="select">	SELECT	</div>	<div class="start-button" id="start-button"></div>	<div class="start">	START	</div>	</div><!-- gb-controls -->	<div class="funnel f1"></div>	<div class="funnel f2"></div>	<div class="funnel f3"></div>	<div class="funnel f4"></div>	<div class="funnel f5"></div>	<div class="funnel f6"></div>	</div><!-- gb-body-->	</div><!-- wrapper --> <div class="credit"> <p>2013 by <a href="http://twitter.com/_kevinatari">Kevin Gimbel</a>. Feel free to create new things based on it </p>
</div> <!-- credit --> <script src="js/index.js"></script>
</body>
</html>

CSS3 only classic Gameboy - Script Codes CSS Codes

/* Codepen.io credits */
.credit { width: 500px; margin: 20px auto; padding: 10px 0px; background: #f1f1f1; color: #000000; font-size: 0.7em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6);
}
a { color: #227799; text-decoration: none;
}
a:hover { color: #222222; border: none;
}
/* Basic CSS */
* { margin: 0px; padding: 0px; position: relative;
}
body { background: #363647; color: #C0C0C0; font-family: Arial, Helvetica, 'Press Start 2P' sans-serif; font-size: 12px;
}
h1, h2, h3 { color: #0F380F; padding: 10px 50px; font-family: 'Press Start 2P';
}
h4 { color: #0F380F; padding: 30px 0px; text-align: center; text-transform: uppercase; font-family: 'Press Start 2P';
}
h5 { font-family: Arial, Helvetica, sans-serif;
}
p { color: #306230; padding: 5px 50px;
}
.wrapper { width: 500px; height: auto; margin: 50px auto;
}
/* GB Basics */
.gb-body { width: 100%; max-width: 500px; padding: 20px 0px 0px 0px; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JmYmFjNCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjYTY5ZmFjIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYmZiYWM0Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -moz-linear-gradient(90deg, #bfbac4, #a69fac, #bfbac4); background: -webkit-linear-gradient(90deg, #bfbac4, #a69fac, #bfbac4); background: linear-gradient(0deg, #bfbac4, #a69fac, #bfbac4); border: 1px solid #ccc; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.4); -webkit-border-radius: 12px; -webkit-border-bottom-right-radius: 75px; -moz-border-radius: 12px; -moz-border-radius-bottomright: 75px; border-radius: 12px; border-bottom-right-radius: 75px; -webkit-box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.5); border: 1px solid #8c8395;
}
.gb-display-border { width: 90%; max-width: 400px; height: auto; margin: 50px auto; padding: 10px 0px 30px 0px; background: #7A757E; -webkit-border-radius: 12px; -webkit-border-bottom-right-radius: 36px; -moz-border-radius: 12px; -moz-border-radius-bottomright: 36px; border-radius: 12px; border-bottom-right-radius: 36px; -webkit-box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.5); border: 1px solid #8c8395;
}
.gb-display { width: 90%; max-width: 250px; height: 200px; margin: 20px auto; padding: 20px 0px; background: #9BBC0F;
}
.battery-led { width: 10px; height: 10px; position: absolute; top: 130px; left: 30px; background: #222222; -webkit-border-radius: 180px; -moz-border-radius: 180px; border-radius: 180px;
}
.battery-led-text { position: absolute; top: 145px; left: 10px; font-size: 10px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;
}
.display-header-text { color: #BFBAC4; font-size: 10px; margin-left: 120px;
}
.display-header-text-first-border { content: ''; position: absolute; top: 12px; left: 20px; width: 95px; background: #BB0965; height: 2px;
}
.display-header-text-second-border { content: ''; position: absolute; top: 22px; left: 20px; width: 95px; background: #064780; height: 2px;
}
.display-header-text-after-first-border { content: ''; position: absolute; top: 12px; right: 20px; width: 30px; background: #BB0965; height: 2px;
}
.display-header-text-after-second-border { content: ''; position: absolute; top: 22px; right: 20px; width: 30px; background: #064780; height: 2px;
}
/* ---------------- BUTTONS ---------------- */
.gb-controls { height: 300px; width: 100%; max-width: 400px; margin: 0px auto 30px auto;
}
.controls { width: 100px; height: 100px; margin: 50px 0px 0px 30px;
}
.control { height: 33px; width: 33px; background: #222; position: absolute;
}
.up { top: 0px; left: 33px;
}
.right { top: 33px; right: 1px;
}
.down { top: 66px; left: 33px;
}
.left { top: 33px; left: 0px;
}
.center { top: 33px; left: 33px;
}
.arrow-up { width: 0; height: 0; margin: 0px 0px 8px 3px; border-left: 13px solid transparent; border-right: 13px solid transparent; border-bottom: 25px solid #272727; z-index: 1;
}
.arrow-down { width: 0; height: 0; margin: 8px 0px 0px 3px; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 25px solid #272727; z-index: 1;
}
.arrow-right { width: 0; height: 0; margin: 3px 0px 0px 8px; border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-left: 25px solid #272727; z-index: 1;
}
.arrow-left { width: 0; height: 0; margin: 3px 8px 0px 0px; border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-right: 25px solid #272727; z-index: 1;
}
.inner-circle { width: 30px; height: 30px; margin: 1px auto; border-radius: 360px; background: -webkit-radial-gradient(center, #333333, #222222); background: -moz-radial-gradient(center, #333333, #222222);
}
.steuerkreuz-zwei { height: 35px; width: 100px; background: #222; position: absolute; top: 32px; left: 0px;
}
.a, .b, .select, .start { color: #064780; font-size: 18px; font-weight: bold; font-family: Arial, sans-serfi;
}
.b { position: absolute; bottom: 170px; right: 110px; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg);
}
.b-button, .a-button { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RkNTk5OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2JiMDk2NSIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -moz-radial-gradient(#dd5999, #bb0965); background: -webkit-radial-gradient(#dd5999, #bb0965); background: radial-gradient(#dd5999, #bb0965); -webkit-border-radius: 180px; -moz-border-radius: 180px; border-radius: 180px;
}
.b-button { height: 40px; width: 40px; position: absolute; bottom: 195px; right: 120px;
}
.a-button { height: 40px; width: 40px; position: absolute; bottom: 225px; right: 55px;
}
.a { position: absolute; bottom: 200px; right: 50px; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg);
}
.select { position: absolute; bottom: 40px; left: 80px; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg);
}
.start { position: absolute; bottom: 40px; left: 185px; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg);
}
.select-button, .start-button { background: #7A757E; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
}
.select-button { width: 70px; height: 10px; position: absolute; bottom: 60px; left: 70px; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg);
}
.start-button { width: 70px; height: 10px; position: absolute; bottom: 60px; left: 170px; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg);
}
/* ------------- FUNNEL ----------- */
.funnel { width: 60px; height: 10px; background: #AEA9B3; position: absolute; border-bottom: 1px inset solid #000; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -webkit-transform: rotate(55deg); -moz-transform: rotate(55deg); box-shadow: 0px 1px 2px #333;
}
.f1 { right: 10px; bottom: 85px;
}
.f2 { right: 30px; bottom: 75px;
}
.f3 { right: 50px; bottom: 65px;
}
.f4 { right: 70px; bottom: 55px;
}
.f5 { right: 90px; bottom: 45px;
}
.f6 { right: 110px; bottom: 35px;
}

CSS3 only classic Gameboy - Script Codes JS Codes

/*
CSS3 Gameboy I made.
I'd say it's finished but still can be imporved.
Tell me what you think or what you'd make better.
*/
CSS3 only classic Gameboy - Script Codes
CSS3 only classic Gameboy - Script Codes
Home Page Home
Developer Kevin Gimbel
Username kevingimbel
Uploaded August 11, 2022
Rating 3
Size 6,134 Kb
Views 34,408
Do you need developer help for CSS3 only classic Gameboy?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin Gimbel (kevingimbel) Script Codes
Name
Register or Sponsor Prototype
Felixble Product Flags
Nerdli.st
ViewSwitcher
Alternative Image Classes in Markdown
A Pen by Kevin Gimbel
CSS3 only Turret from Portal
Pure CSS3 single element Link from TLOZ
.LANG
Chat UI - WIP
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!