CSS3 dialog experiment

dabblet.css

/**
 * CSS3 dialog experiment
 */

html, body {
  margin      : 0;
  padding     : 0;
  width       : 100%;
  height      : 100%;
  font-family : 'Montserrat Alternates';
}

div { /* positioning */
  position    : absolute;
  width       : 500px;
  height      : 300px;
  top         : 50%;
  left        : 50%;
  margin      : -150px 0 0 -250px;
}

div { /* coloring */
  border        : 1px solid #ccc;
  background    : -webkit-linear-gradient(top, #eee, #ddd);
  border-radius : 12px;
  box-shadow    :
      inset  1px  1px 1px white
    , inset -1px -1px 1px #aaa
    , inset  0px  0px 10px white
    , 5px 9px 30px #aaa
  ;
}

div { /* text properties */
  line-height : 300px;
  text-align  : center;
  font-size   : 100px;
  font-weight : bold;
  color       : white;
  text-shadow : 1px 1px 9px #aaa;
}

div:before {
  content       : '';
  position      : absolute;
  width         : 450px;
  height        : 250px;
  top           : 25px;
  left          : 25px;
  border-radius : 6px;
  box-shadow    :
      inset  1px  1px 1px #aaa
    , inset -1px -1px 1px white
    , inset  0px  0px 10px #aaa
    , 5px 9px 30px white
  ;
}

/*
div:after {
  content       : '\00d7';
  width         : 25px;
  height        : 25px;
  font-size     : 25px;
  text-align    : center;
  line-height   : 25px;
  font-weight   : bold;
  color         : #eee;
  text-shadow   :
        0 -1px 1px #333
    ,  0  1px 1px #888;
  position      : absolute;
  right         : 3px;
  top           : 3px;
}
*/

dabblet.html

<link href='http://fonts.googleapis.com/css?family=Montserrat+Alternates:700' rel='stylesheet' type='text/css'>
<div>HELLO</div>

settings.json

{"view":"split","fontsize":"70","seethrough":"1","prefixfree":"1","page":"result"}