HTML


<!-- HTML -->
<div id="wrrap">
  <div class="berghem">Risultato immediato! <span>Good training ground.</span></div></div>
  <div class="berghem1 span"></div>
  <div class="berghem2 span"></div>
  <div class="berghem3 span"></div>

<!-- (+) Preview while editing auto-Off -->
<!-- (+) Switching On/Off to preview -->
<!-- (+) OK, Motion working / theme switch.. -->
<!-- (+) Empty / Reset ( ALL ) after On /Off -->
<!-- (+) Responsive Code Box / line wrap/true -->
<!-- (?+) SASS /Compass /& more... NEXT! -->


CSS


/* CSS */
/*html, body {
 min-height: 100%;
  height: auto !important;
 height: 100%} fix all height ! without... */
body{
 background:lightblue;
  margin:0;
   padding:0;
   border:0px none;
   width:100%}

#wrrap{
  position:absolute;
  top:45%;left:50px;
  margin:-2px 0 0 0}

.berghem1 {position:absolute;left:25px;top:16.5%;margin-top:-100px }
.berghem2 {position:absolute;left:95px;top:49.5%;margin-top:-100px }
.berghem3 {position:absolute;left:25px;bottom:16.5%;margin-bottom:-100px }

.berghem1,
.berghem2,
.berghem3 {
  width:200px;
  height:200px;
  background-color:rgba(0,0,0,.15);
  border-radius:50%;
  display:table;
  /*display: inline-block;
   vertical-align: middle;    
  line-height: normal;*/
display:none; }

.span {
    background:         radial-gradient( 5px -9px, circle, rgba(255,255,255,.25) 38%, silver 96px );
    background:    -moz-radial-gradient( 5px -9px, circle, rgba(255,255,255,.25) 38%, silver 96px );
    background:     -ms-radial-gradient( 5px -9px, circle, rgba(255,255,255,.25) 38%, silver 96px );
    background:      -o-radial-gradient( 5px -9px, circle, rgba(255,255,255,.25) 38%, silver 96px );
    background: -webkit-radial-gradient( 5px -9px, circle, rgba(255,255,255,.25) 38%, silver 96px );
    background-color: silver;
    border: 1px solid white;
    -webkit-border-radius: 50%;
    -mz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    box-shadow: 1px 1px 1px #555;
    color: white;
  line-height:200px;
   height: 200px; 
   padding: 4px 3px 0 3px;
  text-align: center;
 min-width: 200px;
}

.berghem:before {
 content:"";
  position:absolute;
   top:0;
   right:290px;
   width: 0;
   height: 0;
  border-top: 50px solid transparent;
 border-right: 50px solid orange;
border-bottom: 50px solid transparent;
}
.berghem {
display:none;
background-color:orange;
height: 90px;
 width: 280px;
  position:relative;
  float:left;
   text-align: left;
   line-height:44px;
   padding: 5px;
   margin:0px;
  color: white;
  font-size:140%;
 text-shadow:0 1px 0 black;
 font-family:"Century Gothic",
"Apple Gothic", AppleGothic,
"URW Gothic L", "Avant Garde",
Futura, sans-serif;
}
span:after {
    content:"a";
    white-space: pre;
}


JS


/* JS */
$(document).ready(function() {

    $.Deferred(function($wblz) {

       $wblz
       .pipe(function() { return $('.berghem1').delay(700).
         fadeIn().html('HTML / box') })
       .pipe(function() { return $('.berghem2').delay(1500).
         fadeIn().html('CSS / box') })
    })
    .resolve()
    .then(
        $('.berghem3').delay(3000).
          fadeIn().html('JS / box'),

        $('.berghem').delay(850).fadeIn('slow').
          animate({'left':'350px'}, 800)
    );
});
// Move / keypress
// move
setInterval(moveBerghem, 20);
var keys = {}

$(document).keydown(function(b) {
    keys[b.keyCode] = true;
});

$(document).keyup(function(b) {
    delete keys[b.keyCode];
});


function moveBerghem() {
    for (var direction in keys) {
        if (!keys.hasOwnProperty(direction)) continue;
        if (direction == 37) {
            $(".berghem").animate({left: "-=5"}, 0);                
        }
        if (direction == 38) {
            $(".berghem").animate({top: "-=5"}, 0);  
        }
        if (direction == 39) {
            $(".berghem").animate({left: "+=5"}, 0);  
        }
        if (direction == 40) {
            $(".berghem").animate({top: "+=5"}, 0);  
        }
    }
}



CodePlay Playground as you play with the keyboard:

Console

The CodePlay Code Box Editors Playground is very simple to use, anyone can directly interact with a minimum of knowledge of HTML experience, live an idea or a project. We believe that only 5% of the developers has the full capacity and knowledge of each key on the keyboard. Therefore we decided to put together a single command from the Key [Esc] == 27.
For every need and every situation the keyboard [Esc] key fixes and puts in place the Original Initial Code Box Editors.
All this without losing the contents of each Box Editors .
!Enjoy your CodePlay.


CodePlay Playground is a project based on WordPress entirely revised to have a clean and dynamic HTML output.

Editor:

- [Esc] To reset the Box Editors and the closure of any open window overlay, including the Output (FULL) Preview.

New! - Double Click to Expand /Open & Close All Box Editors

New! - Ctrl + Up/Down to Show /Hide the Footer Bar. This allows hide footer bar when you want, + ESC to Back.

New! - Preview in Full page is now also possible via dblClick on the Vertical Drag-bar. Each keyboard action can be Reset via the ESC button.


Ex.
- Close this? [Esc], or a Click outside.


Front End User - New /Save Post is Now Open, Register *required.
New Play Now