No, amig@s, no se trata de una nueva consola de Nintendo. Esta creacion realizada por el diseñador web Avaz Bokiev, la vi el otro dia y me gusto, me hizo gracia, vaya. Como utilidad no se exactamente para que puede servir, pienso que alguien que tenga un blog dedicado a los videojuegos si que le encontrara algun uso, como por ejemplo de decoracion. El caso es que esta Gameboy clasica esta realizada completamente con CSS3, desde la carcasa hasta los botones, es decir, no contiene ningun tipo de imagen, todo es codigo. Ademas tambien ha utilizado jQuery para que podamos moverla por toda la pantalla con el cursor de nuestro raton.
ver codigo de la Gameboy<div class="wrappergameboy"><div class="gameboy"><div class="extra"><span>dot matrix with stereo sound</span></div><div class="plus">+</div><div class="select"><span>select</span></div><div class="start"><span>start</span></div><div class="buttonA"></div><div class="buttonB"></div><div class="speaker"></div></div><div class="display"><span class="spangameboy">nintendo<sup>®</sup></span></div></div>
<style>
@import url(http://fonts.googleapis.com/css?family=Coda+Caption:800);
.wrappergameboy {
width: 400px;
height: 300px;
margin-left: 0px;
}
.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;
}
.spangameboy {
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;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
(function() {
(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);
$('.wrappergameboy').drags();
})();
</script>
Ahora que estamos en plena competicion de futbol (la FIFA Copa Confederaciones), os voy a mostrar a modo de curiosidad algo relacionado con este tema y Google Maps. Con esta aplicacion tan conocida por todos, podemos observar a vista de satelite varios y famosos campos de futbol del globo terraqueo. En este caso he elegido 5 muy conocidos, con su codigo correspondiente por si quereis poner alguno en vuestro blog o web.
Curiosa y divertida aplicacion gratuita en formato flash en la que un conejo ve el cursor del raton, este le recuerda a una zanahoria y lo persigue. Una vez lo coge, se aferra a el y no lo suelta, a menos que lo zarandees, salgas de su radio y te lo quites de encima. Si lo quieres poner en tu blog o web, tan solo debes copiar el codigo de abajo y pegarlo alli donde desees mostrarlo. Para cambiar el tamaño, solo tienes que modificar los numeros indicados en color rojo.
Con Search-Cube podras hacer qualquier busqueda como si estuvieras en Google. La diferencia es que los resultados apareceran incrustandose formando un cubo 3D en formato flash, que podeis rotar con el raton y el teclado. Por ejemplo, yo puse REDEANDO y me salio el cubo que veis en la imagen de arriba. Un buscador muy novedoso que sorprende por su originalidad.
En Zazzle.es podras ver los doodles (esos logos conmemorativos) de Google transformados en camisetas, tazas o cualquier tipo de merchandising. En esta tienda online tienes cientos de doodles para escoger y elegir en qué producto deseas imprimirlo. Puedes dar un recorrido por año, viendo todos aquellos que Google ha creado en diferentes partes del mundo de acuerdo a la fecha. Una vez que escoges el doodle y el producto que deseas, solo queda agregarlo a tu carrito de compra.
