HTML


<webbeloz>
 <div class="staff-onts-box">
   <div class="brand">
   <i class="icon-staff"></i>
   </div>
  </div>
</webbeloz>


CSS


/*
* Staff-onts(kit) Icon Fonts + CSS3 Effect / Sheen
* CSS / Passion! - 14/08/Sep - (Original)
*/
html, body{
  height:100%;
  margin:0;
}
body {
  width:100%;
  background-color:rgba(22,22,22,.97)
}
.staff-onts-box:before{
  content: 'webbeloz';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 1.25rem;
  display: block;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 250%;
  color: rgba(255,255,255,.055);
  text-shadow: 0 -1px rgba(0,0,0,0.79);
  font-family: "Century Gothic",
 "Apple Gothic", AppleGothic,
 "URW Gothic L", "Avant Garde",
 Futura, sans-serif
}

@font-face {
  font-family: "staff-onts";
  src: url("http://webbeloz.it/fonts/staff-onts.eot?48387085");
  src: url("http://webbeloz.it/fonts/staff-onts.eot?48387085#iefix") format('embedded-opentype'),
	url("http://webbeloz.it/fonts/staff-onts.woff?48387085") format('woff'),
	url("http://webbeloz.it/fonts/staff-onts.ttf?48387085") format('truetype'),
	url("http://webbeloz.it/fonts/staff-onts.svg?48387085#staff-onts") format('svg');
  font-weight: normal;
  font-style: normal;
}

.icon-staff {
  text-shadow:0 2px 2px #000;
}
.icon-staff:before { content: '\e714'; }

[class^="icon-"],
[class*=" icon-"] {
  font-family: staff-onts;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
}

webbeloz {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 10rem;
  height: 9rem;
  background-color:rgba(0,0,0,.29);
  border-radius: 50%;
  -webkit-box-shadow:inset 0 1px 2px #000, 0px 10px 1px -10px #333;
  -moz-box-shadow:inset 0 1px 2px #000, 0px 10px 1px -10px #333;
  -o-box-shadow:inset 0 1px 2px #000, 0px 10px 1px -10px #333;
  box-shadow:inset 0 1px 2px #000, 0px 10px 1px -10px #333;
}
.staff-onts-box{
  display:block;
  margin: 50px auto 55px;
  text-align: center;
  width: 100%;
}
.staff-onts-box:hover:before {
  color:rgba(255,255,255,.069);
  text-shadow: 0 -1px rgba(0,0,0,0.89);
}
.brand {
    position: relative;
    z-index: 0;
    display: inline-block;
    -webkit-transform: scale(1,1.5);
    -moz-transform: scale(1,1.5);
    -ms-transform: scale(1,1.5);
    -o-transform: scale(1,1.5);
    transform: scale(1,1.5);
    width: 52px;
    height: 21px;
    font-size: 250%;
    font-weight: 200;
    color: rgba(7,138,161,.7);
    padding :0px 7px 21px 0;
    padding-left: 15px !important;
    margin: 0;
    border-radius: 50%;
    -webkit-box-shadow: inset 0 2px 10px #141414;
    -moz-box-shadow: inset 0 2px 10px #141414;
    -o-box-shadow: inset 0 2px 10px #141414;
    box-shadow: inset 0 0px 0px #141414;
    text-decoration: none;
    background-repeat: no-repeat;
    background-image: -webkit-linear-gradient(
    top left,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.2) 37%,
    rgba(255, 255, 255, 0.8) 45%,
    rgba(255, 255, 255, 0.0) 50%
    ),
    linear-gradient(
    rgba(0,0,0,.9), rgba(101,169,215,.08)
    );
    background-image:-moz-linear-gradient(
    0 0,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.2) 37%,
    rgba(255, 255, 255, 0.8) 45%,
    rgba(255, 255, 255, 0.0) 50%
    ),
    -moz-linear-gradient(
    rgba(0,0,0,.41), rgba(101,169,215,.08)
    );
    background-image:-o-linear-gradient(
    0 0,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.2) 37%,
    rgba(255, 255, 255, 0.8) 45%,
    rgba(255, 255, 255, 0.0) 50%
    ),
    linear-gradient(
    rgba(0,0,0,.9), rgba(101,169,215,.08)
    );
    background-image:linear-gradient(
    0 0,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.2) 37%,
    rgba(255, 255, 255, 0.8) 45%,
    rgba(255, 255, 255, 0.0) 50%
    ),
    linear-gradient(
    rgba(0,0,0,.9), rgba(101,169,215,.08)
    );
    -webkit-box-shadow:inset 0 2px 12px #000;
    -moz-box-shadow:inset 0 2px 12px #000;
    -o-box-shadow:inset 0 2px 12px #000;
    box-shadow:inset 0 2px 12px #000;
    background-position:-100px -100px, 0 0;
    -moz-background-size:250% 250%, 100% 100%;
    background-size:250% 250%, 100% 100%;
    -webkit-transition:background-position 980ms ease, opacity 250ms ease-in-out;
       -moz-transition:background-position 980ms ease, opacity 250ms ease-in-out;       
         -o-transition:background-position 980ms ease, opacity 250ms ease-in-out;
            transition:background-position 980ms ease, opacity 250ms ease-in-out;
    }
.brand:hover,
.brand:focus {
    cursor:none !important;
    background-position:0 0, 0 0;
    -webkit-transition-duration:795ms;
    -moz-transition-duration:795ms;
    -o-transition-duration:795ms;
    transition-duration:795ms;
    }
.brand:active {}


JS




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