GameBoy CSS Illustration

Developer
Jose Sentis
Size
3,880 Kb
Views
32,384
  1. GameBoy CSS Illustration Previews
  2. GameBoy CSS Illustration HTML Codes
  3. GameBoy CSS Illustration CSS Codes
  4. GameBoy CSS Illustration JS Codes

How do I make an gameboy css illustration?

Illustration and animation of a retro GameBoy using CSS and JavaScript. What is a gameboy css illustration? How do you make a gameboy css illustration? This script and codes were developed by Jose Sentis on 08 September 2022, Thursday.

GameBoy CSS Illustration Previews
IQ Test

GameBoy CSS Illustration - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>GameBoy CSS Illustration</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="gameboy"> <div class="top"> <hr> <hr class="left"> <hr class="right"> </div> <div class="screen-border"> <div class="screen background"> </div> <div class="screen front off"> <span class="text off">Nintendo<span class="registered">&reg;</span></span> </div> <span class="battery-light off"></span> <span class="battery-label label">BATTERY</span> </div> <div class="controls"> <div class="company-name"> Nintendo <span class="name">game boy</span><span class="registered">TM</span> </div> <div class="button-container"> <div class="button b"> </div> <div class="button a"> </div> </div> <div class="arrow-container"> <div class="arrow vertical"> </div> <span></span> <div class="arrow horizontal"> </div> </div> <div class="label-container label-button"> <span class="label b">	B	</span> <span class="label a">	A	</span> </div> <div class="menu-container select"> <div class="menu-button select"> </div> </div> <div class="menu-container start"> <div class="menu-button start"> </div> </div> <div class="label-container label-menu"> <span class="label select">	select	</span> <span class="label start">	start	</span> </div> </div> <div class="speakers"> <span class="speaker"></span> <span class="speaker"></span> <span class="speaker"></span> <span class="speaker"></span> <span class="speaker"></span> <span class="speaker"></span> </div>
</div>
<div id="shadow"></div>
<div id="switch">ON/OFF</div>
<p id="signature">Made with &#9825; by <a href="http://www.josesentis.com" target="_blank">Jose Sentis</a></p>
</body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

GameBoy CSS Illustration - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);
html,
body {	margin: 0;	padding: 0;	position:relative
}
body {	background-color: #EFEFEF;
}
.gameboy {	position: relative;	border-radius: 8px;	display: block;	background-color: rgb(212, 212, 212);	color: rgb(37, 33, 142);	border-bottom-right-radius: 60px;	overflow: hidden;	box-shadow: inset -2px -2px 20px rgb(108, 118, 128), inset 5px 5px 19px #fff, -1px -1px 2px rgb(108, 118, 128);	width: 276px;	height: 443px;	margin: 0 auto;	margin-top: 30px;
}
#shadow {	content: '';	width: 295px;	height: 245px;	border-radius: 100%;	background-image: radial-gradient(rgba(181, 181, 181, 1) 37%, rgba(181, 181, 181, 0.3) 60%, transparent 72%);	position: relative;	transform: rotateX(77deg);	display: block;	margin: 0 auto;	top: -88px;
}
.top {	margin-top: 15px;
}
.top hr {	height: 2px;
}
.top .left {	width: 17px;	position: absolute;	top: -2px;	left: 22px;	-ms-transform: rotate(90deg);	-webkit-transform: rotate(90deg);	-o-transform: rotate(90deg);	transform: rotate(90deg);	border-left: 0;	border-right: 0;
}
.top .right {	width: 17px;	position: absolute;	top: -2px;	left: 250px;	-ms-transform: rotate(90deg);	-webkit-transform: rotate(90deg);	-o-transform: rotate(90deg);	transform: rotate(90deg);	border-left: 0;	border-right: 0;
}
.screen-border {	position: relative;	height: 144px;	display: inline-block;	border-radius: 8px;	border-bottom-right-radius: 40px;	padding: 23px 38px;	background-color: rgb(108, 118, 128);	box-shadow: inset 0px 0px 3px #000, inset 1px 1px 2px #fff, -1px -1px 0px #000;	margin: 0px 20px;
}
.battery-light {	width: 8px;	height: 8px;	border-radius: 4px;	display: inline-block;	background-color: rgb(107, 121, 0);	box-shadow: inset 2px 2px 4px #000;	position: relative;	top: -108px;	left: -26px;	transition: all 0.4s ease-in;
}
.battery-light.off {	background-color: rgb(107, 121, 0);	box-shadow: inset 2px 2px 6px #000;
}
.battery-light.on {	background-color: rgb(237, 61, 31);	box-shadow: inset 1px 0px 3px #000, inset 0px 1px 2px #fff;
}
.battery-label.label {	text-transform: uppercase;	color: rgb(212, 212, 212);	font-size: 4px;	font-weight: normal;	letter-spacing: -0.2px;	position: relative;	top: -98px;	left: -45px;
}
.screen {	width: 160px;	height: 144px;	line-height: 144px;	text-align: center;	box-shadow: inset 3px 3px 8px #000;	color: #000;	transition: all 0.6s ease-in;
}
.screen.background {	background-color: rgb(27, 31, 7);
}
.screen.front {	position: absolute;	top: 23px;	background-color: rgb(107, 121, 0);
}
.screen.front.on {	visibility: visible;
}
.screen.front.off {	visibility: hidden;
}
.screen .text {	font-family: 'Press Start 2P', cursive;	font-size: 11px;	position: relative;	transition: top 2s ease-out;
}
.screen .text.on {	visibility: visible;	top: 8px;
}
.screen .text.off {	visibility: hidden;	top: -55px;
}
.screen .text .registered {	position: relative;	top: -5px;	font-size: 8px;
}
.controls {	height: 130px;	padding: 0px 20px;
}
.company-name {	font-family: 'Press Start 2P', cursive;	font-size: 6px;	margin-top: 5px;
}
.company-name .name {	text-transform: uppercase;	font-size: 8px;
}
.company-name .registered {	font-size: 5px;	text-transform: uppercase;
}
.button-container {	display: inline-block;	padding: 6px 1px 2px 1px;	border-radius: 20px;	box-shadow: inset 20px 20px 30px rgb(197, 194, 195);	-ms-transform: rotate(-30deg);	-webkit-transform: rotate(-30deg);	-o-transform: rotate(-30deg);	transform: rotate(-30deg);	position: relative;	top: 37px;	right: -150px;
}
.button {	width: 28px;	height: 28px;	border-radius: 14px;	background-color: rgb(151, 40, 96);	box-shadow: inset 0px 0px 2px #000, inset 2px 0px 5px #fff, 2px 1px 6px #000;	margin: 0px 6px;	display: inline-block;
}
.arrow-container {	box-shadow: inset 20px 20px 30px rgb(197, 194, 195);	display: inline-block;	border-radius: 40px;	position: relative;	top: 25px;	left: -90px;	height: 80px;	width: 80px;
}
.arrow-container span {	display: inline-block;	width: 19px;	height: 19px;	position: absolute;	box-shadow: inset -1px -1px 6px rgba(255, 255, 255, 0.3), inset 1px -1px 2px rgba(0, 0, 0, 0.3);	border-radius: 11px;	top: 30px;	left: 30px;	z-index: 1000;
}
.arrow {	width: 60px;	height: 20px;	background-color: rgb(51, 51, 51);	display: inline-block;	border-radius: 2px;
}
.arrow.vertical {	-ms-transform: rotate(-90deg) translate(-28px, 10px);	-webkit-transform: rotate(-90deg) translate(-28px, 10px);	-o-transform: rotate(-90deg) translate(-28px, 10px);	transform: rotate(-90deg) translate(-28px, 10px);
}
.arrow.horizontal {	-ms-transform: translate(10px, 5px);	-webkit-transform: translate(10px, 5px);	-o-transform: translate(10px, 5px);	transform: translate(10px, 5px);
}
.label-container {	display: inline-block;	padding: 6px 1px 2px 1px;	border-radius: 20px;	position: relative;
}
.label {	font-family: 'Press Start 2P', cursive;
}
.label.a {	margin-left: 25px;
}
.label-button {	-ms-transform: rotate(-30deg);	-webkit-transform: rotate(-30deg);	-o-transform: rotate(-30deg);	transform: rotate(-30deg);	top: 52px;	left: 9px;
}
.label-button .label {	font-size: 8px;
}
.label-menu {	-ms-transform: rotate(-30deg);	-webkit-transform: rotate(-30deg);	-o-transform: rotate(-30deg);	transform: rotate(-30deg);	top: 32px;	left: 88px;
}
.label-menu .label {	font-size: 6px;
}
.label-menu .select {	top: -20px;	left: -4px;	position: relative;
}
.menu-container {	position: relative;	box-shadow: inset 9px 6px 10px rgb(197, 194, 195), inset 2px 2px 6px #fff;	height: 7px;	width: 28px;	padding: 5px;	border-radius: 8px;	-ms-transform: rotate(-30deg);	-webkit-transform: rotate(-30deg);	-o-transform: rotate(-30deg);	transform: rotate(-30deg);	margin: 0px auto;
}
.menu-container.select {	top: 53px;	left: -25px;
}
.menu-container.start {	top: 35px;	left: 15px;
}
.menu-button {	height: 7px;	width: 28px;	border-radius: 5px;	background-color: rgb(108, 118, 128);	box-shadow: inset 0px 0px 1px #000, inset 1px 1px 4px #fff, 1px 1px 3px #000;
}
.speakers {	position: relative;	bottom: -5px;	left: 151px;	-ms-transform: rotate(-45deg);	-webkit-transform: rotate(-45deg);	-o-transform: rotate(-45deg);	transform: rotate(-30deg);	display: inline-block;	padding: 21px 35px;	background: linear-gradient(transparent, transparent, transparent, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4));
}
.speaker {	box-shadow: inset 2px 1px 2px rgba(0, 0, 0, 0.8), inset 1px 1px 6px rgba(0, 0, 0, 0.4), 1px 1px 2px #fff;	width: 6px;	height: 50px;	margin: 0px 1px 0px 2px;	display: inline-block;	border-radius: 5px;
}
#switch {	font-family: 'Press Start 2P', cursive;	position: relative;	top: -240px;	display: block;	margin: 0 auto;	width: 270px;	cursor: pointer;
}
#signature{	font-family: monospace;	font-size: 18px;	position: absolute;	right: 80px;	bottom: 80px;	color: #000;	font-weight: normal;
}
#signature a{	text-decoration: none;	color: rgb(37,33,142);	font-weight: bold;
}
#signature a:hover{	text-decoration: underline;
}

GameBoy CSS Illustration - Script Codes JS Codes

$('#switch').click(function() {	var light = $('.battery-light');	var text = $('.text');	var screen = $('.screen.front');	if ($(light).hasClass('off')) {	$(light).removeClass('off');	$(text).removeClass('off');	$(screen).removeClass('off');	$(light).addClass('on');	$(text).addClass('on');	$(screen).addClass('on');	} else {	$(light).removeClass('on');	$(text).removeClass('on');	$(screen).removeClass('on');	$(light).addClass('off');	$(text).addClass('off');	$(screen).addClass('off');	}
});
GameBoy CSS Illustration - Script Codes
GameBoy CSS Illustration - Script Codes
Home Page Home
Developer Jose Sentis
Username j0zelito
Uploaded September 08, 2022
Rating 3
Size 3,880 Kb
Views 32,384
Do you need developer help for GameBoy CSS Illustration?

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!

Jose Sentis (j0zelito) Script Codes
Name
TweetBox with React JS
Refreshing CSS summer popsicles
Shoe Box CSS illustrated
CSS Summer vibes
Burger CSS Illustration
Old Cassette CSS illustration
Speaker CSS illustration and animation.
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!