<div class="wrapper">
<div class="gameboy">
<div class="extra"><span>dot matrix with stereo sound</span></div>
<a href="#"><div class="plus">+</div></a>
<a href="#"><div class="select"><span>select</span></div></a>
<a href="#"><div class="start"><span>start</span></div></a>
<a href="#"><div class="buttonA"></div></a>
<a href="#"><div class="buttonB"></div></a>
<div class="speaker"></div>
</div>
<div class="display">
<span>nintendo<sup>®</sup></span>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Coda+Caption:800);
body {
background: #333;
margin: 0 auto;
padding: 40px;
}
.wrapper {
width: 240px;
height: 300px;
margin: 0 auto;
}
.gameboy {
background: #dddddd -webkit-linear-gradient(#dddddd, #eeeeee);
width: 250px;
height: 250px;
border-radius: 48px;
box-shadow: 5px 10px 3px #cccccc inset, 3px 3px 25px black;
}
.gameboy:before {
content: "";
width: 140px;
height: 0px;
position: absolute;
margin: 0 0 0 50px;
border-left: solid 5px transparent;
border-right: solid 5px transparent;
border-bottom: solid 11px #333333;
}
.gameboy:after {
content: "";
background: #565662;
width: 198px;
height: 117px;
position: absolute;
margin: 30px 0 0 26px;
border-radius: 8px 8px 25px 8px;
box-shadow: 0 0 4px black inset;
}
.display {
background: -webkit-linear-gradient(#516d23, #75942c);
width: 145px;
height: 86px;
position: absolute;
margin: -204px 0 0 53px;
box-shadow: 0 0 4px black inset;
}
.display:before {
background: -webkit-linear-gradient(top right, rgba(255, 255, 255, 0.1) 55%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 100%);
content: "";
width: 196px;
height: 117px;
margin: -18px 0 0 -26px;
position: absolute;
border-radius: 8px 8px 25px 8px;
z-index: 9999;
}
span {
color: #222222;
font-size: 18px;
font-family: "Coda Caption", sans-serif;
font-style: normal;
text-transform: capitalize;
margin: 30px 0 0 25px;
position: absolute;
}
sup {
font-size: 11px;
font-family: sans-serif;
}
.extra {
background: #911427;
width: 6px;
height: 6px;
position: absolute;
margin: 58px 0 0 37px;
border-radius: 50%;
box-shadow: 0 0 1px black;
z-index: 99998;
}
.extra:before {
background: #565662;
content: "";
width: 65px;
height: 2px;
position: absolute;
margin: -23px 0 0 -3px;
border-top: solid 2px #d10277;
border-bottom: solid 2px #1e2969;
}
.extra:after {
background: #565662;
content: "";
width: 16px;
height: 2px;
position: absolute;
margin: -23px 0 0 165px;
border-top: solid 2px #d10277;
border-bottom: solid 2px #1e2969;
z-index: 99998;
}
.extra span {
color: white;
font-family: "Arial", sans-serif;
font-size: 5px;
width: 110px;
position: absolute;
margin: -23px 0 0 70px;
text-transform: uppercase;
}
.plus {
color: #333333;
font-weight: bold;
font-size: 71px;
position: absolute;
margin: 140px 0 0 33px;
-webkit-text-stroke: 14px #999999;
text-shadow: -2px -2px 5px black;
}
.plus:before {
content: "+";
color: #333333;
font-weight: bold;
font-size: 76px;
position: absolute;
margin: -2px 0 0 -1px;
-webkit-text-stroke: 8px #333333;
}
.select {
background: linear-gradient(#777777, #ffffff);
width: 34px;
height: 16px;
position: absolute;
margin: 205px 0 0 80px;
border-radius: 8px;
transform: rotate(-28deg);
box-shadow: 0 0 1px #555555 inset;
}
.select:before {
background: linear-gradient(#888888, #666666);
content: "";
width: 26px;
height: 8px;
position: absolute;
margin: 3px 0 0 3px;
border: solid 1px #444444;
border-radius: 5px;
z-index: 99996;
}
.start {
background: linear-gradient(#777777, #ffffff);
width: 34px;
height: 16px;
position: absolute;
margin: 205px 0 0 120px;
border-radius: 8px;
transform: rotate(-28deg);
box-shadow: 0 0 1px #555555 inset;
}
.start:before {
background: linear-gradient(#888888, #666666);
content: "";
width: 26px;
height: 8px;
position: absolute;
margin: 3px 0 0 3px;
border: solid 1px #444444;
border-radius: 5px;
z-index: 99996;
}
.select span, .start span {
color: #1e2969;
font-family: "Arial", sans-serif;
font-size: 6px;
font-weight: bold;
width: 110px;
position: absolute;
margin: 16px 0 0 5px;
text-transform: uppercase;
-webkit-font-smoothing: subpixel-antialiased;
}
.buttonA {
background: linear-gradient(#666666, #ffffff);
width: 36px;
height: 36px;
position: absolute;
margin: 175px 0 0 157px;
border-radius: 50%;
box-shadow: 0 0 1px #444444;
}
.buttonA:before {
background: linear-gradient(#bd0055, #a10254);
content: "";
width: 30px;
height: 30px;
position: absolute;
margin: 3px 0 0 3px;
border-radius: 50%;
box-shadow: 1px 1px 2px black;
}
.buttonB {
background: linear-gradient(#666666, #ffffff);
width: 36px;
height: 36px;
position: absolute;
margin: 155px 0 0 197px;
border-radius: 50%;
box-shadow: 0 0 1px #444444;
}
.buttonB:before {
background: linear-gradient(#bd0055, #a10254);
content: "";
width: 30px;
height: 30px;
position: absolute;
margin: 3px 0 0 3px;
border-radius: 50%;
box-shadow: 1px 1px 2px black;
}
.speaker {
background: linear-gradient(#cccccc, #444444);
width: 30px;
height: 6px;
position: absolute;
margin: 220px 0 0 193px;
transform: rotate(61deg);
}
.speaker:before {
background: linear-gradient(#cccccc, #444444);
content: "";
width: 30px;
height: 6px;
position: absolute;
margin: -10px 0 0 0;
}
.speaker:after {
background: linear-gradient(#cccccc, #444444);
content: "";
width: 30px;
height: 6px;
position: absolute;
margin: -20px 0 0 0;
}
::selection {
background: purple;
}
/*
===============================================
Pure CSS Nintendo Gameboy iOS icon
===============================================
Inspired by William Minty's Gameboy Icon http://dribbble.com/shots/670026-Gameboy-Icon
===============================================
Created by Avaz Bokiev
02/08/2012
===============================================
*/
(function($) {
$.fn.drags = function(opt) {
opt = $.extend({handle:"",cursor:"move"}, opt);
if(opt.handle === "") {
var $el = this;
} else {
var $el = this.find(opt.handle);
}
return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
if(opt.handle === "") {
var $drag = $(this).addClass('draggable');
} else {
var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
}
var z_idx = $drag.css('z-index'),
drg_h = $drag.outerHeight(),
drg_w = $drag.outerWidth(),
pos_y = $drag.offset().top + drg_h - e.pageY,
pos_x = $drag.offset().left + drg_w - e.pageX;
$drag.css('z-index', 1000).parents().on("mousemove", function(e) {
$('.draggable').offset({
top:e.pageY + pos_y - drg_h,
left:e.pageX + pos_x - drg_w
}).on("mouseup", function() {
$(this).removeClass('draggable').css('z-index', z_idx);
});
});
e.preventDefault(); // disable selection
}).on("mouseup", function() {
if(opt.handle === "") {
$(this).removeClass('draggable');
} else {
$(this).removeClass('active-handle').parent().removeClass('draggable');
}
});
}
})(jQuery);
$('.wrapper').drags();
Also see: Tab Triggers