2011-02-25 18:02:10

License: MIT License

Fork: 13

Fav: 22

View: 6723

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 41 lines
HTML 265 lines
CSS 1596 lines

UI付けてみた。forked from: 背景付けてみた。forked from: jsdo.pigg
jQuery v1.5.0

// forked from tsmallfield's "背景付けてみた。forked from: jsdo.pigg" http://jsdo.it/tsmallfield/pigg
// forked from GeckoTang's "jsdo.pigg" http://jsdo.it/GeckoTang/dOv6

})(jQuery);

<div class="avatar">
    
    <div class="hair">
        <div class="parts"></div><div class="parts"></div>
        <div class="parts"></div><div class="parts"></div>
        <div class="parts"></div><div class="parts"></div>
        <div class="parts"></div><div class="parts"></div>
        <div class="parts"></div><div class="parts"></div>
    </div>
    
    <div class="face">
        
        <div class="nose"></div>
        
        <div class="eye left"><div class="parts"></div></div>
        <div class="eye right"><div class="parts"></div></div>
        
        <div class="ear left"><div class="parts"></div></div>
        <div class="ear right"><div class="parts"></div></div>
        
        <div class="mouth"></div>
        
        <div class="cheek left"></div>
        <div class="cheek right"></div>
    </div>
    
    <div class="body">
        
        <div class="cloth">
            <div class="parts"></div><div class="parts"></div>
            <div class="parts"></div><div class="parts"></div>
        </div>
        
        <div class="arm left"><div class="parts"></div></div>
        <div class="arm right"><div class="parts"></div></div>
        
        <div class="leg left"><div class="parts"></div></div>
        <div class="leg right"><div class="parts"></div></div>
    </div>
    
    <div class="decoration">
        <div class="parts"></div><div class="parts"></div>
        <div class="parts"></div><div class="parts"></div>
    </div>
    
    <div class="shadow"></div>
</div>

<div id="wrapper">
  
  <section id="sky">
    
    
    <s class="sun">
      <u></u>
      <n></n>
    </s>
    
    
    <c class="clouds">
      <l></l>
      <o></o>
      <u></u>
      <d></d>
      <s></s>
    </c>
    
    
    <c class="clouds">
      <l></l>
      <o></o>
      <u></u>
      <d></d>
      <s></s>
    </c>
    
    
    <c class="clouds">
      <l></l>
      <o></o>
      <u></u>
      <d></d>
      <s></s>
    </c>
    
    
    <c class="clouds">
      <l></l>
      <o></o>
      <u></u>
      <d></d>
      <s></s>
    </c>
    
    
    <r class="rainbow">
      <a></a>
      <i></i>
      <n></n>
      <b></b>
      <o></o>
      <w></w>
    </r>
    
  </section>
  
  <section id="ground">
  
    
    <m class="mountain">
      <o></o>
      <u></u>
      <n></n>
      <t></t>
      <a></a>
      <i></i>
      <n></n>
    </m>
    
    
    <t class="tree">
      <r></r>
      <e></e>
      <e></e>
    </t>
    
    
    <t class="tree">
      <r></r>
      <e></e>
      <e></e>
    </t>
    
    
    <t class="tree">
      <r></r>
      <e></e>
      <e></e>
    </t>
    
    
    <t class="tree">
      <r></r>
      <e></e>
      <e></e>
    </t>
    
    
    <t class="tree">
      <r></r>
      <e></e>
      <e></e>
    </t>
    
    
    <t class="tree">
      <r></r>
      <e></e>
      <e></e>
    </t>
    
    
    <t class="tree">
      <r></r>
      <e></e>
      <e></e>
    </t>
    
    
    <t class="tree">
      <r></r>
      <e></e>
      <e></e>
    </t>
    
    
    <t class="tree">
      <r></r>
      <e></e>
      <e></e>
    </t>
    
    
    <t class="tree">
      <r></r>
      <e></e>
      <e></e>
    </t>
    
    
    <t class="tree">
      <r></r>
      <e></e>
      <e></e>
    </t>
    
    
    <t class="tree">
      <r></r>
      <e></e>
      <e></e>
    </t>
    
    
    <t class="tree">
      <r></r>
      <e></e>
      <e></e>
    </t>
    
    
    <t class="tree">
      <r></r>
      <e></e>
      <e></e>
    </t>
    
    
    <f class="fence">
      <e></e>
      <n></n>
      <c></c>
      <e></e>
    </f>
    
    
    <f class="fence">
      <e></e>
      <n></n>
      <c></c>
      <e></e>
    </f>
    
  </section>
  
  <div id="zzz"></div>
  
  
  <m class="moon">
    <o></o>
    <o></o>
    <n></n>
  </m>
  
  <section id="zoo"></section>

</div>

<form id="commentbox">
  <div><input type="text" class="textbox" id="comment" name="comment" /></div>
  <div id="voice-mode">
    <input type="radio" name="voicemode" data-mode="T" title="Talk" value="talk" checked="checked" />
    <input type="radio" name="voicemode" data-mode="S" title="Shout" value="shout" />
    <input type="radio" name="voicemode" data-mode="M" title="Mind" value="mind" />
  </div>
</form>
</div>

UI付けてみた。forked from: 背景付けてみた。forked from: jsdo.pigg
YUI 3 CSS Reset

/*
 * Avatar
 */
div:hover {
    xoutline:1px solid rgba(255,0,0,0.5);
}

.avatar{
    position:relative;
    width:80px;
    height:120px;
    margin:30px auto 0px;
    -webkit-user-select:none;
}
/*
 * Face
 */
    .avatar .face{
        position:absolute;
        top:0;
        left:0;
        width:80px;
        height:70px;
        z-index:3;
        border-radius:40px 40px 30px 30px / 40px 40px 30px 30px;
        background:#f9e6ad;
    }
    /*
     * Eye
     */
        .avatar .face .eye{
            position:absolute;
            top:38px;
            width:10px;
            height:10px;
            background:#000;
            border-radius:5px;
      
      /* Anim */
      -webkit-animation-name: wink;
      -webkit-animation-property: all;
      -webkit-animation-duration: 5s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
        }
        .avatar .face .eye:before{
            content:'';
            display:block;
            position:absolute;
            top:2px;
            left:2px;
            width:2px;
            height:2px;
            border-radius:1px;
            background:#fff;
        }
            .avatar .face .eye.left {left:18px;}
            .avatar .face .eye.right{right:18px;}
                .avatar .face .eye .parts{
                    position:absolute;
                    top:-1px;
                    width:24px;
                    height:10px;
                    border-top:2px solid #000;
                    border-radius:10px 10px 0 0 / 10px 10px 0 0;
                }
                    .avatar .face .eye.left  .parts{left:-8px; -webkit-transform:rotate(-5deg);}
                    .avatar .face .eye.right .parts{right:-8px; -webkit-transform:rotate(5deg);}
    
    
    @-webkit-keyframes "wink" {
      96% {
              top:38px;
               height:10px;
      }
      98% {
              top:47px;
        height:1px;
      }
      100% {
              top:38px;
              height:10px;
      }
    }
    /*
     * Nose
     */
        .avatar .face .nose{
            position:absolute;
            top:48px;
            left:34px;
            width:12px;
            height:10px;
            border-top:2px solid #e69e51;
            border-radius:10px 10px 0 0 / 10px 10px 0 0;
        }
    /*
     * Mouth
     */
       .avatar .face .mouth{
           position:absolute;
           top:52px;
           left:30px;
           width:20px;
           height:6px;
           border-bottom:2px solid #e67151;
           border-radius:0px 0px 10px 10px / 0px 0px 10px 10px;
       }
     
     .avatar .face .mouth.talk {
       display:block;
       content:"";
           position:absolute;
           top:56px;
           left:33px;
           width:14px;
           height:6px;
           background-color:#e67151;
           border-radius:0px 0px 8px 8px;
       
      /* Anim */
      -webkit-animation-name: shabetta;
      -webkit-animation-property: all;
      -webkit-animation-duration: 1.1s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
     }
     
     /**
      * 口パク forked from: しゃべる（chromeのみ） forked from: 植毛済み forked from: CSS3のミサワ
      * http://jsdo.it/GeckoTang/cL9u
    */
     @-webkit-keyframes "shabetta" {
      0% {
           height:6px;
      }
      25% {
           height:0px;
      }
      45% {
           height:6px;
      }
      50% {
           height:0px;
      }
      75% {
           height:6px;
      }
    }

/*
     * Cheek
     */
       .avatar .face .cheek{
           position:absolute;
            top:49px;
            width:10px;
            height:10px;
            border-radius:10px;
            background:rgba(255,110,80,0.4);
            -webkit-box-shadow:0 0 5px rgba(255,110,80,0.4);
        }
       .avatar .face .cheek.left{left:10px;}
       .avatar .face .cheek.right{right:10px;}
    /*
     * Ear
     */
       .avatar .face .ear {
            position:absolute;
            top:38px;
            width:10px;
            height:10px;
            background:#f9e6ad;
            z-index:-1;
        }
       .avatar .face .ear:before{
           content:'';
           position: absolute;
           top: 3px;
           left:2px;
           display:block;
           width:6px;
           height:6px;
           border-radius:3px;
           background:#e2b37b;
        }
        .avatar .face .ear.left {
            left:-4px;
            -webkit-transform:rotate(15deg);
            border-radius:5px 0px 0px 5px / 5px 0px 0px 5px;
        }
       .avatar .face .ear.right {
            right:-4px;
            -webkit-transform:rotate(-15deg);
            border-radius:0px 5px 5px 0px / 0px 5px 5px 0px;
        }
    /*
     * Hair
     */
       .avatar .hair {
            position:absolute;
            top:0;
            left:0;
            width:80px;
            height:80px;
        }
       .avatar .hair .parts{
            position:absolute;
            display:block;
            width:50px;
            height:50px;
        }
        /* left - sideburn */
       .avatar .hair .parts:nth-of-type(1){
           top:17px;
           left:0px;
           width:10px;
           height:50px;
           background:#381e00;
           border-radius:10px 0px 0px 10px /  25px 0px 0px 25px;
           -webkit-transform-origin:top left;
           -webkit-transform:scaleX(.6);
           z-index:4;
        }
        /* right - sideburn */
       .avatar .hair .parts:nth-of-type(2){
           top:17px;
           right:0px;
           width:10px;
           height:50px;
           background:#381e00;
           border-radius:0px 10px 10px 0px /  0px 25px 25px 0px;
           -webkit-transform-origin:top right;
           -webkit-transform:scaleX(.6);
           z-index:4;
        }
        /* left - front */
       .avatar .hair .parts:nth-of-type(3){
           top:-12px;
           left:-5px;
           width:45px;
           height:45px;
           background:#381e00;
           border-radius:45px 0px 0px 0px / 45px 0px 0px 0px;
           -webkit-transform:rotate(5deg);
            z-index:5;
        }
        /* right - front side */
       .avatar .hair .parts:nth-of-type(4){
           top:-12px;
           right:-5px;
           width:45px;
           height:45px;
           background:#381e00;
           border-radius:45px 45px 0px 0px / 0px 45px 0px 0px;
           -webkit-transform:rotate(-5deg);
           z-index:5;
        }
       .avatar .hair .parts:nth-of-type(4):before{
            content:'';
            position:absolute;
            top:20px;
            left:25px;
            z-index:5;
            display:block;
            width:10px;
            height:10px;
            border-radius:5px;
            background:rgba(255,255,255,0.5);
        }
        /* back side */
        .avatar .hair .parts:nth-of-type(5){
           top:-5px;
           left:-5px;
           width:90px;
           height:70px;
           background:#381e00;
           border-radius:45px 45px 20px 20px / 45px 45px 20px 20px;
           z-index:-1;
           -webkit-transform:scaleX(1.08) scaleY(1);
        }
        .avatar .hair .parts:nth-of-type(5):before{
            content:'';
            position:absolute;
            top:-15px;
            left:30px;
            display:block;
            width:30px;
            height:30px;
            background:#220a00;
            border-radius:15px;
            z-index:1;
        }
        .avatar .hair .parts:nth-of-type(5):after{
            content:'';
            position:absolute;
            top:-8px;
            left:25px;
            display:block;
            width:40px;
            height:40px;
            background:#72cb4f;
            z-index:2;
            border-radius:20px;
        }
/*
 * Body
 */
.avatar .body {
    position:absolute;
    top:65px;
    left:25px;
    width:30px;
    height:36px;
    border-radius:15px 15px 0px 0px / 18px 18px 0px 0px;
    background:rgba(255,120,120,1);
}
    /*
     * Arm
     */
    .avatar .body .arm{
        position:absolute;
        top:9px;
        width:16px;
        height:25px;
        background:#ccc;
        z-index:-1;
        background:rgba(255,120,120,1);
        -webkit-transform-origin:top center;
    }
    .avatar .body .arm.left{
        left:1px;
        border-radius:10px 0px 6px 10px / 10px 0px 6px 10px;
        -webkit-transform:rotate(45deg);
    }
    .avatar .body .arm.right{
        right:1px;
        border-radius:0px 10px 10px 6px / 0px 10px 10px 6px;
        -webkit-transform:rotate(-45deg);
    }
    .avatar .body .arm .parts{
        position:absolute;
        bottom:-3px;
        background:#f9e6ad;
        width:12px;
        height:12px;
        z-index:3;
        border-radius:6px;
    }
    .avatar .body .arm.left .parts{
        left:2px;
    }
    .avatar .body .arm.right .parts{
        right:2px;
    }
    /*
     * Legs
     */
    .avatar .body .leg{
        position:absolute;
        top:33px;
        width:12px;
        height:10px;
        z-index:-1;
        background:rgba(255,100,120,1);
    }
    .avatar .body .leg.left{
        left:3px;
        border-radius:0 0 0 12px / 0 0 0 10px;
    }
    .avatar .body .leg.right{
        right:3px;
        border-radius:0 0 12px 0 / 0 0 10px 0;
    }
        .avatar .body .leg .parts{
            position:absolute;
            bottom:-3px;
            width:14px;
            height:6px;
            background:#f9e6ad;
            border-radius:5px 5px 0 0 / 5px 5px 0 0;
        }
        .avatar .body .leg.left .parts{
           left:-2px;
        }
        .avatar .body .leg.right .parts{
            right:-2px;
        }

/*
 * Anim
 */
.avatar {
    -webkit-transition:all 0.3s ease-out;
}
.avatar:hover {
    -webkit-transform:translateY(-10px);
}

.avatar .face .eye,
.avatar .face .eye .parts{
    -webkit-transition:all 0.3s ease-out;
}
.avatar:hover .face .eye.left .parts{
    -webkit-transform:translateY(-2px) rotate(7deg);
}
.avatar:hover .face .eye.right .parts{
    -webkit-transform:translateY(-2px) rotate(-7deg);
}

.avatar .body .arm{
    -webkit-transition:all 0.3s ease-out;
}
.avatar:hover .body .arm.left{
    -webkit-transform:translateX(1px) translateY(4px) rotate(70deg);
}
.avatar:hover .body .arm.right{
    -webkit-transform:translateX(-1px) translateY(4px) rotate(-70deg);
}

.avatar .body .leg{
    -webkit-transition:all 0.3s ease-out;
}
    .avatar .body .leg.left{
        -webkit-transform-origin:top right;
    }
    .avatar .body .leg.right{
        -webkit-transform-origin:top left;
    }

.avatar:hover .body .leg.left{
        -webkit-transform:translateX(-2px) translateY(3px) rotate(35deg);
    }
    .avatar:hover .body .leg.right{
        -webkit-transform:translateX(2px) translateY(3px) rotate(-35deg);
    }

/*
* Avatar #small_50
*/
#small_50.avatar{
    -webkit-transform: scale(.5) translateY(0px) ;
}
#small_50.avatar:hover{
    -webkit-transform: scale(.8) translateY(-10px) ;
}

/**
 *  Background & shadow added by tsmallfield
 *  @see http://jsdo.it/tsmallfield/counting_sheep2
 */
/*------------------------------------------------
        位置指定
------------------------------------------------*/
.avatar{
  position: absolute;
  top: 252px;
  left: 232px;
  margin-left: -40px;
  margin-top: -60px;
  z-index: 100;
}
.avatar .shadow{
  position: absolute;
  top: 107px;
  left: 15px;
  width: 50px;
  height: 10px;
  background-color: #000;
  -webkit-border-radius: 200px / 50px;
  -moz-border-radius:    200px / 50px;
  border-radius:         200px / 50px;
  -webkit-box-shadow: 0 0 5px #000;
  -moz-box-shadow:    0 0 5px #000;
  box-shadow:         0 0 5px #000;
  opacity: .15;
  -webkit-transition:all 0.3s ease-out;
  z-index: -2;
}
.avatar:hover .shadow{
  -webkit-transform: scale(.8) translateY(10px);
}
/*------------------------------------------------
        リセット
------------------------------------------------*/
#wrapper *{
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border-style: none;
  text-decoration: none;
}
#wrapper *:before,
#wrapper *:after{
  position: absolute;
  display: block;
  content: "";
}
/*
script,
style{
  display: none;
}*/
/*------------------------------------------------
          body
------------------------------------------------*/
body{
  overflow: hidden;
}
#wrapper{
  position: absolute;
  top: 0;
  left: 0;
  width: 465px;
  height: 465px;
  background-color: #690;
  overflow: hidden;
}
#wrapper #sky{
  width: 100%;
  height: 70px;
  padding: 30px 0;
  background-color: #6cf;
  background: -moz-linear-gradient(top, #6cf, #fff);
  background: -webkit-gradient(linear, left top, left bottom, from(#6cf), to(#fff));
  border-top: 5px solid #36c;
}
#wrapper #ground{
  top: 135px;
  width: 100%;
  height: 325px;
  background-color: #690;
  background: -moz-linear-gradient(top, #9c3, #690);
  background: -webkit-gradient(linear, left top, left bottom, from(#9c3), to(#690));
  border-bottom: 5px solid #360;
}
#wrapper #zoo{
  top: 135px;
  right: 60px;
  bottom: 20px;
  left: 30px;
}
/*------------------------------------------------
          C.L.O.U.D.S.
------------------------------------------------*/
#wrapper c.clouds l,
#wrapper c.clouds o,
#wrapper c.clouds d,
#wrapper c.clouds s,
#wrapper c.clouds:before,
#wrapper c.clouds:after,
#wrapper c.clouds *:before,
#wrapper c.clouds *:after{
  width: 30px;
  height: 30px;
  background-color: #fff;
  -webkit-border-radius: 15px;
  -moz-border-radius:    15px;
  border-radius:         15px;
}
#wrapper c.clouds,
#wrapper c.clouds u{
  top: 25px;
  width: 120px;
  height: 30px;
  background-color: #fff;
  -webkit-border-radius: 15px;
  -moz-border-radius:    15px;
  border-radius:         15px;
  z-index: 5;
}
/*----- 中 -----*/
#wrapper c.clouds:nth-of-type(1){
  top: 15px;
  left: -40px;
}
#wrapper c.clouds:nth-of-type(2){
  top: 10px;
  right: 70px;
}
#wrapper c.clouds:nth-of-type(1),
#wrapper c.clouds:nth-of-type(2){
  -webkit-transform: scale(.5, .5);
  -moz-transform:    scale(.5, .5);
  transform:         scale(.5, .5);
}
/*----- 大 -----*/
#wrapper c.clouds:nth-of-type(3){
  top: 65px;
  left: -10px;
}
#wrapper c.clouds:nth-of-type(4){
  top: 55px;
  right: 75px;
}
#wrapper c.clouds:nth-of-type(3),
#wrapper c.clouds:nth-of-type(4){
  -webkit-transform: scale(.25, .25);
  -moz-transform:    scale(.25, .25);
  transform:         scale(.25, .25);
}
/*----- 1個目(上側：時計回り) -----*/
#wrapper c.clouds:before{
  top: -6px;
  left: 13px;
}
#wrapper c.clouds:after{
  top: -10px;
  left: 35px;
}
#wrapper c.clouds l{
  top: -10px;
  left: 57px;
}
#wrapper c.clouds l:before{
  top: 4px;
  left: 21px;
}
/*----- 1個目(下側：時計回り)-----*/
#wrapper c.clouds l:after{
  top: 16px;
  left: 21px;
}
#wrapper c.clouds o{
  top: 10px;
  left: 57px;
}
#wrapper c.clouds o:before{
  left: -22px;
}
#wrapper c.clouds o:after{
  top: -4px;
  left: -44px;
}
/*----- 2個目(本体) -----*/
#wrapper c.clouds u,
#wrapper c.clouds d,
#wrapper c.clouds s{
  margin-top: 0;
  margin-left: 220px;
}
/*----- 2個目(上側：時計回り) -----*/
#wrapper c.clouds u:before{
  top: -6px;
  left: 13px;
}
#wrapper c.clouds u:after{
  top: -10px;
  left: 35px;
}
#wrapper c.clouds d{
  top: 15px;
  left: 59px;
}
#wrapper c.clouds d:before{
  top: 4px;
  left: 22px;
}
/*----- 2個目(下側：時計回り) -----*/
#wrapper c.clouds d:after{
  top: 16px;
  left: 22px;
}
#wrapper c.clouds s{
  top: 36px;
  left: 59px;
}
#wrapper c.clouds s:before{
  left: -22px;
}
#wrapper c.clouds s:after{
  top: -4px;
  left: -42px;
}
/*------------------------------------------------
          T.R.E.E.
------------------------------------------------*/
/*----- trunk -----*/
#wrapper t.tree{
  top: 10px;
  width: 3px;
  height: 20px;
  margin-left: -3px;
  background-color: #c93;
  border-right: 3px solid #960;
  border-left: 1px solid #960;
  -webkit-transform: scale(.5, .5);
  -moz-transform:    scale(.5, .5);
  transform:         scale(.5, .5);
}
/*----- position -----*/
#wrapper t.tree:nth-of-type(1) { top: 10px; left:  1%; }
#wrapper t.tree:nth-of-type(2) { top: 15px; left:  5%; }
#wrapper t.tree:nth-of-type(3) { top: 10px; left:  9%; }
#wrapper t.tree:nth-of-type(4) { top: 15px; left: 13%; }
#wrapper t.tree:nth-of-type(5) { top: 10px; left: 17%; }
#wrapper t.tree:nth-of-type(6) { top: 15px; left: 21%; }
#wrapper t.tree:nth-of-type(7) { top: 10px; left: 25%; }
#wrapper t.tree:nth-of-type(8) { top: 10px; left: 75%; }
#wrapper t.tree:nth-of-type(9) { top: 15px; left: 79%; }
#wrapper t.tree:nth-of-type(10){ top: 10px; left: 83%; }
#wrapper t.tree:nth-of-type(11){ top: 15px; left: 87%; }
#wrapper t.tree:nth-of-type(12){ top: 10px; left: 91%; }
#wrapper t.tree:nth-of-type(13){ top: 15px; left: 95%; }
#wrapper t.tree:nth-of-type(14){ top: 10px; left: 99%; }
/*----- leaves -----*/
#wrapper t.tree:before,
#wrapper t.tree:after,
#wrapper t.tree r,
#wrapper t.tree r:before,
#wrapper t.tree r:after,
#wrapper t.tree e,
#wrapper t.tree e:before,
#wrapper t.tree e:after{
  width: 10px;
  height: 10px;
  background-color: #81b41c;
  border-right:  1px solid #5c8f0f;
  border-bottom: 1px solid #5c8f0f;
  -webkit-border-radius: 5px;
  -moz-border-radius:    5px;
  border-radius:         5px;
}
#wrapper t.tree:before{
  bottom: 30px;
  left: -3px;
}
#wrapper t.tree:after{
  bottom: 20px;
  left: -13px;
}
#wrapper t.tree r{
  top: -10px;
  left: 8px;
}
#wrapper t.tree r:before{
  top: -7px;
  left: -3px;
}
#wrapper t.tree r:after{
  top: -7px;
  left: -18px;
}
#wrapper t.tree e:nth-of-type(1){
  top: -5px;
  left: -10px;
}
#wrapper t.tree e:nth-of-type(1):before{
  top: -7px;
  left: 13px;
}
#wrapper t.tree e:nth-of-type(1):after{
  left: 15px;
}
#wrapper t.tree e:nth-of-type(2){
  top: -15px;
  left: -5px;
}
#wrapper t.tree e:nth-of-type(2):before{
  top: 12px;
}
#wrapper t.tree e:nth-of-type(2):after{
  top: 7px;
  left: 3px;
}
/*------------------------------------------------
          S.U.N.
------------------------------------------------*/
#wrapper s.sun,
#wrapper s.sun:before,
#wrapper s.sun:after,
#wrapper s.sun u,
#wrapper s.sun u:before,
#wrapper s.sun u:after,
#wrapper s.sun n,
#wrapper s.sun n:before{
  width: 30px;
  height: 30px;
  background-color: #f90;
  z-index: 1;
}
#wrapper s.sun{
  top: 40px;
  left: 85%;
  margin-left: -15px;
  -webkit-transform: rotate(-90deg);
  -moz-transform:    rotate(-90deg);
  transform:         rotate(-90deg);
}
#wrapper s.sun:before{
  -webkit-transform: rotate(15deg);
  -moz-transform:    rotate(15deg);
  transform:         rotate(15deg);
}
#wrapper s.sun:after{
  -webkit-transform: rotate(30deg);
  -moz-transform:    rotate(30deg);
  transform:         rotate(30deg);
}
#wrapper s.sun u{
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  transform:         rotate(45deg);
}
#wrapper s.sun u:before{
  -webkit-transform: rotate(15deg);
  -moz-transform:    rotate(15deg);
  transform:         rotate(15deg);
}
#wrapper s.sun u:after{
  -webkit-transform: rotate(15deg);
  -moz-transform:    rotate(15deg);
  transform:         rotate(15deg);
}
#wrapper s.sun n{
  -webkit-transform: rotate(75deg);
  -moz-transform:    rotate(75deg);
  transform:         rotate(75deg);
  z-index: 2;
}
#wrapper s.sun n:before{
  top: -1px;
  left: -1px;
  width: 32px;
  height: 32px;
  background-color: #fc0;
  background: -moz-linear-gradient(top, #ff9, #fc0);
  background: -webkit-gradient(linear, left top, left bottom, from(#ff9), to(#fc0));
  -webkit-border-radius: 16px;
  -moz-border-radius:    16px;
  border-radius:         16px;
  -webkit-box-shadow: 0 0 20px #fff;
  -moz-box-shadow:    0 0 20px #fff;
  box-shadow:         0 0 20px #fff;
  z-index: 2;
}
#wrapper s.sun n:after{
  top: 2px;
  left: 3px;
  width: 10px;
  height: 10px;
  background-color: #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius:    5px;
  border-radius:         5px;
  opacity: .75;
  z-index: 2;
}
/*------------------------------------------------
        R.A.I.N.B.O.W.
------------------------------------------------*/
#wrapper r.rainbow,
#wrapper r.rainbow a,
#wrapper r.rainbow i,
#wrapper r.rainbow n,
#wrapper r.rainbow b,
#wrapper r.rainbow o,
#wrapper r.rainbow w{
  -webkit-border-radius: 999px 999px 0 0;
  -moz-border-radius:    999px 999px 0 0;
  border-radius:         999px 999px 0 0;
  border-width: 3px;
  border-style: solid;
  border-bottom-style: none;
}
#wrapper r.rainbow{
  top: 40px;
  left: -140px;
  width: 200px;
  height: 100px;
  border-color: #f00;
  opacity: .75;
}
#wrapper r.rainbow a{
  width: 194px;
  height: 94px;
  border-color: #f90;
}
#wrapper r.rainbow i{
  top: 3px;
  left: 3px;
  width: 188px;
  height: 88px;
  border-color: #ff0;
}
#wrapper r.rainbow n{
  top: 6px;
  left: 6px;
  width: 182px;
  height: 82px;
  border-color: #0f0;
}
#wrapper r.rainbow b{
  top: 9px;
  left: 9px;
  width: 176px;
  height: 76px;
  border-color: #0ff;
}
#wrapper r.rainbow o{
  top: 12px;
  left: 12px;
  width: 170px;
  height: 70px;
  border-color: #00f;
}
#wrapper r.rainbow w{
  top: 15px;
  left: 15px;
  width: 164px;
  height: 64px;
  border-color: #f0f;
}
/*------------------------------------------------
          F.E.N.C.E.
------------------------------------------------*/
#wrapper f.fence{
  bottom: 20px;
  width: 145px;
  height: 2px;
  background-color: #c93;
  border-top:    1px solid #fc6;
  border-bottom: 1px solid #960;
}
#wrapper f.fence:after,
#wrapper f.fence:before,
#wrapper f.fence e,
#wrapper f.fence e:before,
#wrapper f.fence e:after,
#wrapper f.fence n,
#wrapper f.fence n:before,
#wrapper f.fence n:after,
#wrapper f.fence c,
#wrapper f.fence c:before,
#wrapper f.fence c:after{
  width: 2px;
  height: 20px;
  background-color: #c93;
  border-right: 1px solid #960;
  border-bottom: 1px solid #690;
  border-left:  1px solid #fc6;
}
#wrapper f.fence:after{
  top: -5px;
  left: 5px;
}
#wrapper f.fence:before{
  top: -5px;
  left: 15px;
}
#wrapper f.fence e{
  top: -5px;
  left: 25px;
}
#wrapper f.fence e:before{
  left: 9px;
}
#wrapper f.fence e:after{
  left: 19px;
}
#wrapper f.fence n{
  top: -5px;
  left: 54px;
}
#wrapper f.fence n:before{
  left: 10px;
}
#wrapper f.fence n:after{
  left: 20px;
}
#wrapper f.fence c{
  top: -5px;
  left: 85px;
}
#wrapper f.fence c:before{
  left: 10px;
}
#wrapper f.fence c:after{
  left: 20px;
}
#wrapper f.fence e:last-child{
  left: 116px;
}
#wrapper f.fence:last-child{
  left: auto;
  right: 0;
}
/*------------------------------------------------
        M.O.U.N.T.A.I.N.
------------------------------------------------*/
#wrapper m.mountain{
  top: -40px;
  width: 465px;
  height: 40px;
  background-color: transparent;
  overflow: hidden;
}
#wrapper m.mountain *,
#wrapper m.mountain *:before,
#wrapper m.mountain *:after{
  width:  100px;
  height: 100px;
  background-color: #693;
  -webkit-border-radius: 5px;
  -moz-border-radius:    5px;
  border-radius:         5px;
}
#wrapper m.mountain *:before,
#wrapper m.mountain *:after{
  background-color: #9c3;
}
/*----- 中 -----*/
#wrapper m.mountain *{
  margin-top: 20px;
  margin-left: -70px;/* 100 * 1.41 / 2 = 70 */
  -webkit-transform: rotate(-45deg);
  -moz-transform:    rotate(-45deg);
  transform:         rotate(-45deg);
}
/*----- 左 -----*/
#wrapper m.mountain *:before{
  margin-top: -10px;
  margin-left: -10px;
}
/*----- 右 -----*/
#wrapper m.mountain *:after{
  margin-top: 10px;
  margin-left: 10px;
}
/*----- o -----*/
#wrapper m.mountain o{
  left: 35px;
}
#wrapper m.mountain o:before{
  left: -5px;
}
#wrapper m.mountain o:after{
  top: 10px;
}
/*----- u -----*/
#wrapper m.mountain u{
  top: 15px;
  left: 100px;
}
#wrapper m.mountain u:before{
  left: -5px;
}
#wrapper m.mountain u:after{
  left: 5px;
}
/*----- n -----*/
#wrapper m.mountain n:nth-of-type(1){
  top: 5px;
  left: 170px;
}
#wrapper m.mountain n:nth-of-type(1):before{
  left: -10px;
}
#wrapper m.mountain n:nth-of-type(1):after{
  left: 5px;
}
/*----- t -----*/
#wrapper m.mountain t{
  top: 23px;
  left: 51%;
}
#wrapper m.mountain t:before{
  left: 5px;
}
#wrapper m.mountain t:after{
  left: -5px;
}
/*----- a -----*/
#wrapper m.mountain a{
  top: 5px;
  right: 110px;
}
#wrapper m.mountain a:before{
  top: 5px;
  left: -5px;
}
#wrapper m.mountain a:after{
  top: 10px;
}
/*----- i -----*/
#wrapper m.mountain i{
  top: 10px;
  right: 40px;
}
#wrapper m.mountain i:before{
  top: 5px;
  left: -5px;
}
#wrapper m.mountain i:after{
  left: 10px;
}
/*----- n -----*/
#wrapper m.mountain n:nth-of-type(2){
  right: -30px;
}
#wrapper m.mountain n:nth-of-type(2):before{
  left: -10px;
}

/*----------------------------------------------------
  入力エリア
----------------------------------------------------*/
/* #wrapperリセット回避＆背景との分離 */
#container{
  position: absolute;
  top: 0;
  left: 0;
  width: 465px;
  height: 465px;
  overflow: hidden;
}

#commentbox {
  position:absolute;
  bottom:40px;
  left:0;
  margin:0;
  width:100%;
  height:30px;
}

/* 
 * CSS3でつくるええ感じのテキストボックス
 * http://jsdo.it/calmbooks/niceTextbox
 * #design03
--------------------------------------------------*/
#comment {
  outline:0;
  position:absolute;
  bottom:0;
  left:50px;
  
  height: 2em;
  width: 250px;
  padding: 0 5px;
  font-size: 20px;
  
  border: solid 4px #29ABE2;
  color: #29ABE2;
  font-weight: bold;
  font-size: 12px;
  
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#FFF));
  background: -moz-linear-gradient(#ddd, #fff);
  
  transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
}

#comment:focus {
  border: solid 5px #29ABE2;
  width: 250px;
  font-size: 20px;
  background: -webkit-gradient(linear, left top, left bottom, from(#FFED85), to(#FFF6C0));
  background: -moz-linear-gradient(#FFED85, #FFF6C0);
}

/* ふきだし変更ボタン
--------------------------------------------------*/
#voice-mode {
  position:absolute;
  right:50px;
  top:0;
}

#voice-mode input[type="radio"] {
  -webkit-appearance:none;
  width: 24px;
  height: 26px;
  
  position:static;
  display: inline-block;
  margin: 0px;
  border-radius: 6px;
  
  background-color: #269FCF;
  border: 0;
  
  transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
    
}
#voice-mode input[type="radio"]:before {
    content:attr(data-mode);
  display:block;
    position:       absolute;
    z-index:        10;
    width:          20px;
    height:         20px;
    margin: 2px;
    border-radius: 4px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#49c0f0), color-stop(100%,#12A7E2));
    border-top: 1px solid rgba(255,255,255,0.15);

font:14px/16px Tahoma, Geneva, sans-serif;
  font-weight:bold;
    text-shadow:    rgba(0,0,0,0.3) 0 -1px 0;
    text-align:     center;
  color:#fff;
    
}
#voice-mode input[type="radio"]:focus,
#voice-mode input[type="radio"]:hover {
  background-color:#4AD3EF
}

#voice-mode input[type="radio"]:active,
#voice-mode input[type="radio"]:checked {
  background-color:#FFED85;
}
#voice-mode input[type="radio"]:active:before,
#voice-mode input[type="radio"]:checked:before{
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFC6), color-stop(100%,#ffff88));
  color:#FFB900;
    text-shadow:    rgba(255,185,0,0.3) 0 -1px 0;
}

/*----------------------------------------------------
 かわいいふきだし
 http://jsdo.it/GeckoTang/fOSh
 
 1,2,5だけ使ってます
----------------------------------------------------*/
/*
 * SpeechBalloon
 */
.SpeechBalloon{
    position:absolute;
  left:50%;
    margin:0 auto 0;
  margin-left:-120px;
  top:60px;
  z-index:20;
  white-space:normal;
}
.SpeechBalloon p{
  font-size:12px;
}

/*
 * SpeechBalloon Type1
 */
.SpeechBalloon.talk {
    width:100px;
    height:100px;
    background:#FF54AC;
    border-radius:50px;
    -moz-border-radius:50px;
    -webkit-box-shadow:
        50px 0 0 #FF54AC,
        100px 0 0 #FF54AC,
        150px 0 0 #FF54AC
    ;
    -moz-box-shadow:
        50px 0 0 #FF54AC,
        100px 0 0 #FF54AC,
        150px 0 0 #FF54AC
    ;
}
.SpeechBalloon.talk:before {
    position:absolute;
    content:'';
    display:block;
    width:0;
    height:0;
    top:92px;
    left:116px;
    border-top:18px solid #FF54AC;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
}

.SpeechBalloon.talk p{
    position:absolute;
    top:45px;
    left:20px;
    width:225px;
    color:#fff;
    font-size:14px;
    text-align:center;
}
/*
 * SpeechBalloon Type2
 */
.SpeechBalloon.mind {
    width:100px;
    height:100px;
    border-radius:50px;
    -moz-border-radius:50px;
    background:#FF54AC;
    -webkit-box-shadow:
        50px 0 0 #FF54AC,
        100px 0 0 #FF54AC,
        150px 0 0 #FF54AC
    ;
    -moz-box-shadow:
        50px 0 0 #FF54AC,
        100px 0 0 #FF54AC,
        150px 0 0 #FF54AC
    ;
}
.SpeechBalloon.mind:before {
    position:absolute;
    content:'';
    display:block;
    width:20px;
    height:20px;
    border-radius:10px;
    -moz-border-radius:10px;
    top:85px;
    left:30px;
    background:#FF54AC;
}
.SpeechBalloon.mind:after {
    position:absolute;
    content:'';
    display:block;
    width:10px;
    height:10px;
    border-radius:5px;
    -moz-border-radius:5px;
    top:105px;
    left:40px;
    background:#FF54AC;
}

.SpeechBalloon.mind p{
    position:absolute;
    top:45px;
    left:20px;
    width:225px;
    color:#fff;
    font-size:14px;
    text-align:center;
}
/*
 * SpeechBalloon Type3
 */
.SpeechBalloon.type3 {
    top:25px;
    shout
    width:50px;
    height:50px;
    border-radius:25px;
    -moz-border-radius:25px;
    background:#FFF;
    -webkit-box-shadow:
        25px -20px 0 #FFF,
        50px -30px 0 #FFF,
        75px -35px 0 #FFF,
        100px -30px 0 #FFF,
        125px -20px 0 #FFF,
        150px 0px 0 #FFF,
        25px 20px 0 #FFF,
        50px 30px 0 #FFF,
        75px 35px 0 #FFF,
        100px 30px 0 #FFF,
        125px 25px 0 #FFF,
        60px 0px 0 #FFF,
        100px 0px 0 #FFF
    ;
    -moz-box-shadow:
        25px -20px 0 #FFF,
        50px -30px 0 #FFF,
        75px -35px 0 #FFF,
        100px -30px 0 #FFF,
        125px -20px 0 #FFF,
        150px 0px 0 #FFF,
        25px 20px 0 #FFF,
        50px 30px 0 #FFF,
        75px 35px 0 #FFF,
        100px 30px 0 #FFF,
        125px 25px 0 #FFF,
        60px 0px 0 #FFF,
        100px 0px 0 #FFF
    ;
}
.SpeechBalloon.type3:before {
    position:relative;
    content:'';
    display:block;
    top:-5px;
    left:-5px;
    width:60px;
    height:60px;
    border-radius:30px;
    -moz-border-radius:30px;
    background:#FF54AC;
    z-index:-1;
    -webkit-box-shadow:
        25px -20px 0 #FF54AC,
        50px -30px 0 #FF54AC,
        75px -35px 0 #FF54AC,
        100px -30px 0 #FF54AC,
        125px -20px 0 #FF54AC,
        150px 0px 0 #FF54AC,
        25px 20px 0 #FF54AC,
        50px 30px 0 #FF54AC,
        75px 35px 0 #FF54AC,
        100px 30px 0 #FF54AC,
        125px 25px 0 #FF54AC,
        60px 0px 0 #FF54AC,
        100px 0px 0 #FF54AC
    ;
    -moz-box-shadow:
        25px -20px 0 #FF54AC,
        50px -30px 0 #FF54AC,
        75px -35px 0 #FF54AC,
        100px -30px 0 #FF54AC,
        125px -20px 0 #FF54AC,
        150px 0px 0 #FF54AC,
        25px 20px 0 #FF54AC,
        50px 30px 0 #FF54AC,
        75px 35px 0 #FF54AC,
        100px 30px 0 #FF54AC,
        125px 25px 0 #FF54AC,
        60px 0px 0 #FF54AC,
        100px 0px 0 #FF54AC
    ;
}
.SpeechBalloon.type3:after {
    position:absolute;
    top:80px;
    left:97px;
    content:'';
    display:block;
    width:8px;
    height:8px;
    position:absolute;
    background:#fff;
    z-index:2;
    -webkit-transform:rotate(45deg);
    -webkit-box-shadow:4px 4px 0 #FF54AC;
    -moz-transform:rotate(45deg);
    -moz-box-shadow:4px 4px 0 #FF54AC;
}
.SpeechBalloon.type3 p{
    position:absolute;
    top:20px;
    left:20px;
    width:175px;
    color:#FF54AC;
    font-size:14px;
    text-align:center;
}

/*
 * SpeechBalloon Type4
 */
.SpeechBalloon.type4 {
  width:170px;
  height:120px;
  margin:0 auto 20px;
}
.SpeechBalloon.type4:before {
  position:absolute;
  top:60px;
  left:-15px;
  content:'❤';
  display:block;
  width:0px;
  height:0px;
  line-height:0;
  font-size:200px;
  color:#FFF;
}
.SpeechBalloon.type4:after {
  position:absolute;
  top:60px;
  left:-25px;
  content:'❤';
  display:block;
  width:0px;
  height:0px;
  line-height:0;
  font-size:220px;
  color:#FF54AC;
  z-index:-1;
}

.SpeechBalloon.type4 p {
  position:relative;
  z-index:2;
  width:170px;
  height:120px;
  color:#FF54AC;
  line-height:120px;
  text-align:center;
}

/*
 * SpeechBalloon Type5
 */
.SpeechBalloon.shout {
  top:0;
    width:150px;
    height:100px;
    margin:60px auto 100px;
    background:#FFF;
  margin-left:-75px;
}
.SpeechBalloon.shout:before {
    position:absolute;
    top:-25px;
    left:-25px;
  z-index:20;
    content:'';
    display:block;
    width:50px;
    height:50px;
    background:#FFF;
    -webkit-transform:rotate(45deg);
    -webkit-box-shadow:
        134px -66px 0 #FFF,
        170px -30px 0 #FFF,
        140px 0px 0 #FFF,
        100px 40px 0 #FFF,
        100px -100px 0 #FFF,
        70px -70px 0 #FFF,
        30px -30px 0 #FFF,
        36px 36px 0 #FFF,
        71px 71px 0 #FFF
    ;
}
.SpeechBalloon.shout:after {
    position:absolute;
    top:-30px;
    left:-30px;
    content:'';
    display:block;
    width:60px;
    height:60px;
    background:#FF54AC;
    z-index:19;
    -webkit-transform:rotate(45deg);
    -webkit-box-shadow:
        134px -66px 0 #FF54AC,
        170px -30px 0 #FF54AC,
        140px 0px 0 #FF54AC,
        100px 40px 0 #FF54AC,
        100px -100px 0 #FF54AC,
        70px -70px 0 #FF54AC,
        30px -30px 0 #FF54AC,
        36px 36px 0 #FF54AC,
        71px 71px 0 #FF54AC
    ;
}
.SpeechBalloon.shout p {
    position:relative;
    z-index:22;
    height:100px;
    font-size:14px;
    line-height:100px;
    color:#FF54AC;
    text-align:center;
  background:#fff;
}

jsdo.itらしくforkの合わせ技で。ふきだしサイズ変更と位置変更したらもっとチャットっぽくなると思う。まばたき：5秒間隔かわいいふきだし http://jsdo.it/GeckoTang/fOSh CSS3でつくるええ感じのテキストボックス http://jsdo.it/calmbooks/niceTextbox jsdo.pigg http://jsdo.it/GeckoTang/dOv6 まだ眠れないあなたに…／Still Can't Sleep? http://jsdo.it/tsmallfield/counting_sheep2 口パク forked from: しゃべる（chromeのみ） forked from: 植毛済み forked from: CSS3のミサワ http://jsdo.it/GeckoTang/cL9u// forked from tsmallfield's "背景付けてみた。forked from: jsdo.pigg" http://jsdo.it/tsmallfield/pigg // forked from GeckoTang's "jsdo.pigg" http://jsdo.it/GeckoTang/dOv6 (function($) { $(document).ready(function(){ $('#commentbox').submit(function() { return false; }); $("#comment").keyup(function(event) { if (event.keyCode == '13' && $(this).val()) { $('.SpeechBalloon').remove(); var voicemode = $('input[name="voicemode"]:checked').val(); var baloonDelay = (voicemode=="mind")? 400:100; if(voicemode!=="mind"){ $('.mouth').addClass('talk'); } $('<div class="SpeechBalloon">').addClass(voicemode) .prepend('<p>'+$(this).val()+'</p>') .hide() .appendTo("#container") .animate({ top: ["-=10px", 0], opacity: 'toggle'}, baloonDelay, 'linear' ) .delay(3000).queue(function() { $(this).remove(); $('.mouth').removeClass('talk'); }); $(this).attr('value', ''); } }); }); })(jQuery); <div id="container">  <div class="avatar">  <div class="hair"> <div class="parts"></div><div class="parts"></div> <div class="parts"></div><div class="parts"></div> <div class="parts"></div><div class="parts"></div> <div class="parts"></div><div class="parts"></div> <div class="parts"></div><div class="parts"></div> </div>  <div class="face">  <div class="nose"></div>  <div class="eye left"><div class="parts"></div></div> <div class="eye right"><div class="parts"></div></div>  <div class="ear left"><div class="parts"></div></div> <div class="ear right"><div class="parts"></div></div>  <div class="mouth"></div>  <div class="cheek left"></div> <div class="cheek right"></div> </div>  <div class="body">  <div class="cloth"> <div class="parts"></div><div class="parts"></div> <div class="parts"></div><div class="parts"></div> </div>  <div class="arm left"><div class="parts"></div></div> <div class="arm right"><div class="parts"></div></div>  <div class="leg left"><div class="parts"></div></div> <div class="leg right"><div class="parts"></div></div> </div>  <div class="decoration"> <div class="parts"></div><div class="parts"></div> <div class="parts"></div><div class="parts"></div> </div>  <div class="shadow"></div> </div>  <div id="wrapper"> <section id="sky">  <s class="sun"> <u></u> <n></n> </s>  <c class="clouds"> <l></l> <o></o> <u></u> <d></d> <s></s> </c>  <c class="clouds"> <l></l> <o></o> <u></u> <d></d> <s></s> </c>  <c class="clouds"> <l></l> <o></o> <u></u> <d></d> <s></s> </c>  <c class="clouds"> <l></l> <o></o> <u></u> <d></d> <s></s> </c>  <r class="rainbow"> <a></a> <i></i> <n></n> <b></b> <o></o> <w></w> </r> </section> <section id="ground">  <m class="mountain"> <o></o> <u></u> <n></n> <t></t> <a></a> <i></i> <n></n> </m>  <t class="tree"> <r></r> <e></e> <e></e> </t>  <t class="tree"> <r></r> <e></e> <e></e> </t>  <t class="tree"> <r></r> <e></e> <e></e> </t>  <t class="tree"> <r></r> <e></e> <e></e> </t>  <t class="tree"> <r></r> <e></e> <e></e> </t>  <t class="tree"> <r></r> <e></e> <e></e> </t>  <t class="tree"> <r></r> <e></e> <e></e> </t>  <t class="tree"> <r></r> <e></e> <e></e> </t>  <t class="tree"> <r></r> <e></e> <e></e> </t>  <t class="tree"> <r></r> <e></e> <e></e> </t>  <t class="tree"> <r></r> <e></e> <e></e> </t>  <t class="tree"> <r></r> <e></e> <e></e> </t>  <t class="tree"> <r></r> <e></e> <e></e> </t>  <t class="tree"> <r></r> <e></e> <e></e> </t>  <f class="fence"> <e></e> <n></n> <c></c> <e></e> </f>  <f class="fence"> <e></e> <n></n> <c></c> <e></e> </f> </section> <div id="zzz"></div>  <m class="moon"> <o></o> <o></o> <n></n> </m> <section id="zoo"></section> </div>  <form id="commentbox"> <div><input type="text" class="textbox" id="comment" name="comment" /></div> <div id="voice-mode"> <input type="radio" name="voicemode" data-mode="T" title="Talk" value="talk" checked="checked" /> <input type="radio" name="voicemode" data-mode="S" title="Shout" value="shout" /> <input type="radio" name="voicemode" data-mode="M" title="Mind" value="mind" /> </div> </form> </div> /* * Avatar */ div:hover { xoutline:1px solid rgba(255,0,0,0.5); } .avatar{ position:relative; width:80px; height:120px; margin:30px auto 0px; -webkit-user-select:none; } /* * Face */ .avatar .face{ position:absolute; top:0; left:0; width:80px; height:70px; z-index:3; border-radius:40px 40px 30px 30px / 40px 40px 30px 30px; background:#f9e6ad; } /* * Eye */ .avatar .face .eye{ position:absolute; top:38px; width:10px; height:10px; background:#000; border-radius:5px; /* Anim */ -webkit-animation-name: wink; -webkit-animation-property: all; -webkit-animation-duration: 5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } .avatar .face .eye:before{ content:''; display:block; position:absolute; top:2px; left:2px; width:2px; height:2px; border-radius:1px; background:#fff; } .avatar .face .eye.left {left:18px;} .avatar .face .eye.right{right:18px;} .avatar .face .eye .parts{ position:absolute; top:-1px; width:24px; height:10px; border-top:2px solid #000; border-radius:10px 10px 0 0 / 10px 10px 0 0; } .avatar .face .eye.left .parts{left:-8px; -webkit-transform:rotate(-5deg);} .avatar .face .eye.right .parts{right:-8px; -webkit-transform:rotate(5deg);} @-webkit-keyframes "wink" { 96% { top:38px; height:10px; } 98% { top:47px; height:1px; } 100% { top:38px; height:10px; } } /* * Nose */ .avatar .face .nose{ position:absolute; top:48px; left:34px; width:12px; height:10px; border-top:2px solid #e69e51; border-radius:10px 10px 0 0 / 10px 10px 0 0; } /* * Mouth */ .avatar .face .mouth{ position:absolute; top:52px; left:30px; width:20px; height:6px; border-bottom:2px solid #e67151; border-radius:0px 0px 10px 10px / 0px 0px 10px 10px; } .avatar .face .mouth.talk { display:block; content:""; position:absolute; top:56px; left:33px; width:14px; height:6px; background-color:#e67151; border-radius:0px 0px 8px 8px; /* Anim */ -webkit-animation-name: shabetta; -webkit-animation-property: all; -webkit-animation-duration: 1.1s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } /** * 口パク forked from: しゃべる（chromeのみ） forked from: 植毛済み forked from: CSS3のミサワ * http://jsdo.it/GeckoTang/cL9u */ @-webkit-keyframes "shabetta" { 0% { height:6px; } 25% { height:0px; } 45% { height:6px; } 50% { height:0px; } 75% { height:6px; } } /* * Cheek */ .avatar .face .cheek{ position:absolute; top:49px; width:10px; height:10px; border-radius:10px; background:rgba(255,110,80,0.4); -webkit-box-shadow:0 0 5px rgba(255,110,80,0.4); } .avatar .face .cheek.left{left:10px;} .avatar .face .cheek.right{right:10px;} /* * Ear */ .avatar .face .ear { position:absolute; top:38px; width:10px; height:10px; background:#f9e6ad; z-index:-1; } .avatar .face .ear:before{ content:''; position: absolute; top: 3px; left:2px; display:block; width:6px; height:6px; border-radius:3px; background:#e2b37b; } .avatar .face .ear.left { left:-4px; -webkit-transform:rotate(15deg); border-radius:5px 0px 0px 5px / 5px 0px 0px 5px; } .avatar .face .ear.right { right:-4px; -webkit-transform:rotate(-15deg); border-radius:0px 5px 5px 0px / 0px 5px 5px 0px; } /* * Hair */ .avatar .hair { position:absolute; top:0; left:0; width:80px; height:80px; } .avatar .hair .parts{ position:absolute; display:block; width:50px; height:50px; } /* left - sideburn */ .avatar .hair .parts:nth-of-type(1){ top:17px; left:0px; width:10px; height:50px; background:#381e00; border-radius:10px 0px 0px 10px / 25px 0px 0px 25px; -webkit-transform-origin:top left; -webkit-transform:scaleX(.6); z-index:4; } /* right - sideburn */ .avatar .hair .parts:nth-of-type(2){ top:17px; right:0px; width:10px; height:50px; background:#381e00; border-radius:0px 10px 10px 0px / 0px 25px 25px 0px; -webkit-transform-origin:top right; -webkit-transform:scaleX(.6); z-index:4; } /* left - front */ .avatar .hair .parts:nth-of-type(3){ top:-12px; left:-5px; width:45px; height:45px; background:#381e00; border-radius:45px 0px 0px 0px / 45px 0px 0px 0px; -webkit-transform:rotate(5deg); z-index:5; } /* right - front side */ .avatar .hair .parts:nth-of-type(4){ top:-12px; right:-5px; width:45px; height:45px; background:#381e00; border-radius:45px 45px 0px 0px / 0px 45px 0px 0px; -webkit-transform:rotate(-5deg); z-index:5; } .avatar .hair .parts:nth-of-type(4):before{ content:''; position:absolute; top:20px; left:25px; z-index:5; display:block; width:10px; height:10px; border-radius:5px; background:rgba(255,255,255,0.5); } /* back side */ .avatar .hair .parts:nth-of-type(5){ top:-5px; left:-5px; width:90px; height:70px; background:#381e00; border-radius:45px 45px 20px 20px / 45px 45px 20px 20px; z-index:-1; -webkit-transform:scaleX(1.08) scaleY(1); } .avatar .hair .parts:nth-of-type(5):before{ content:''; position:absolute; top:-15px; left:30px; display:block; width:30px; height:30px; background:#220a00; border-radius:15px; z-index:1; } .avatar .hair .parts:nth-of-type(5):after{ content:''; position:absolute; top:-8px; left:25px; display:block; width:40px; height:40px; background:#72cb4f; z-index:2; border-radius:20px; } /* * Body */ .avatar .body { position:absolute; top:65px; left:25px; width:30px; height:36px; border-radius:15px 15px 0px 0px / 18px 18px 0px 0px; background:rgba(255,120,120,1); } /* * Arm */ .avatar .body .arm{ position:absolute; top:9px; width:16px; height:25px; background:#ccc; z-index:-1; background:rgba(255,120,120,1); -webkit-transform-origin:top center; } .avatar .body .arm.left{ left:1px; border-radius:10px 0px 6px 10px / 10px 0px 6px 10px; -webkit-transform:rotate(45deg); } .avatar .body .arm.right{ right:1px; border-radius:0px 10px 10px 6px / 0px 10px 10px 6px; -webkit-transform:rotate(-45deg); } .avatar .body .arm .parts{ position:absolute; bottom:-3px; background:#f9e6ad; width:12px; height:12px; z-index:3; border-radius:6px; } .avatar .body .arm.left .parts{ left:2px; } .avatar .body .arm.right .parts{ right:2px; } /* * Legs */ .avatar .body .leg{ position:absolute; top:33px; width:12px; height:10px; z-index:-1; background:rgba(255,100,120,1); } .avatar .body .leg.left{ left:3px; border-radius:0 0 0 12px / 0 0 0 10px; } .avatar .body .leg.right{ right:3px; border-radius:0 0 12px 0 / 0 0 10px 0; } .avatar .body .leg .parts{ position:absolute; bottom:-3px; width:14px; height:6px; background:#f9e6ad; border-radius:5px 5px 0 0 / 5px 5px 0 0; } .avatar .body .leg.left .parts{ left:-2px; } .avatar .body .leg.right .parts{ right:-2px; } /* * Anim */ .avatar { -webkit-transition:all 0.3s ease-out; } .avatar:hover { -webkit-transform:translateY(-10px); } .avatar .face .eye, .avatar .face .eye .parts{ -webkit-transition:all 0.3s ease-out; } .avatar:hover .face .eye.left .parts{ -webkit-transform:translateY(-2px) rotate(7deg); } .avatar:hover .face .eye.right .parts{ -webkit-transform:translateY(-2px) rotate(-7deg); } .avatar .body .arm{ -webkit-transition:all 0.3s ease-out; } .avatar:hover .body .arm.left{ -webkit-transform:translateX(1px) translateY(4px) rotate(70deg); } .avatar:hover .body .arm.right{ -webkit-transform:translateX(-1px) translateY(4px) rotate(-70deg); } .avatar .body .leg{ -webkit-transition:all 0.3s ease-out; } .avatar .body .leg.left{ -webkit-transform-origin:top right; } .avatar .body .leg.right{ -webkit-transform-origin:top left; } .avatar:hover .body .leg.left{ -webkit-transform:translateX(-2px) translateY(3px) rotate(35deg); } .avatar:hover .body .leg.right{ -webkit-transform:translateX(2px) translateY(3px) rotate(-35deg); } /* * Avatar #small_50 */ #small_50.avatar{ -webkit-transform: scale(.5) translateY(0px) ; } #small_50.avatar:hover{ -webkit-transform: scale(.8) translateY(-10px) ; } /** * Background & shadow added by tsmallfield * @see http://jsdo.it/tsmallfield/counting_sheep2 */ /*------------------------------------------------ 位置指定 ------------------------------------------------*/ .avatar{ position: absolute; top: 252px; left: 232px; margin-left: -40px; margin-top: -60px; z-index: 100; } .avatar .shadow{ position: absolute; top: 107px; left: 15px; width: 50px; height: 10px; background-color: #000; -webkit-border-radius: 200px / 50px; -moz-border-radius: 200px / 50px; border-radius: 200px / 50px; -webkit-box-shadow: 0 0 5px #000; -moz-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000; opacity: .15; -webkit-transition:all 0.3s ease-out; z-index: -2; } .avatar:hover .shadow{ -webkit-transform: scale(.8) translateY(10px); } /*------------------------------------------------ リセット ------------------------------------------------*/ #wrapper *{ position: absolute; display: block; margin: 0; padding: 0; border-style: none; text-decoration: none; } #wrapper *:before, #wrapper *:after{ position: absolute; display: block; content: ""; } /* script, style{ display: none; }*/ /*------------------------------------------------ body ------------------------------------------------*/ body{ overflow: hidden; } #wrapper{ position: absolute; top: 0; left: 0; width: 465px; height: 465px; background-color: #690; overflow: hidden; } #wrapper #sky{ width: 100%; height: 70px; padding: 30px 0; background-color: #6cf; background: -moz-linear-gradient(top, #6cf, #fff); background: -webkit-gradient(linear, left top, left bottom, from(#6cf), to(#fff)); border-top: 5px solid #36c; } #wrapper #ground{ top: 135px; width: 100%; height: 325px; background-color: #690; background: -moz-linear-gradient(top, #9c3, #690); background: -webkit-gradient(linear, left top, left bottom, from(#9c3), to(#690)); border-bottom: 5px solid #360; } #wrapper #zoo{ top: 135px; right: 60px; bottom: 20px; left: 30px; } /*------------------------------------------------ C.L.O.U.D.S. ------------------------------------------------*/ #wrapper c.clouds l, #wrapper c.clouds o, #wrapper c.clouds d, #wrapper c.clouds s, #wrapper c.clouds:before, #wrapper c.clouds:after, #wrapper c.clouds *:before, #wrapper c.clouds *:after{ width: 30px; height: 30px; background-color: #fff; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } #wrapper c.clouds, #wrapper c.clouds u{ top: 25px; width: 120px; height: 30px; background-color: #fff; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; z-index: 5; } /*----- 中 -----*/ #wrapper c.clouds:nth-of-type(1){ top: 15px; left: -40px; } #wrapper c.clouds:nth-of-type(2){ top: 10px; right: 70px; } #wrapper c.clouds:nth-of-type(1), #wrapper c.clouds:nth-of-type(2){ -webkit-transform: scale(.5, .5); -moz-transform: scale(.5, .5); transform: scale(.5, .5); } /*----- 大 -----*/ #wrapper c.clouds:nth-of-type(3){ top: 65px; left: -10px; } #wrapper c.clouds:nth-of-type(4){ top: 55px; right: 75px; } #wrapper c.clouds:nth-of-type(3), #wrapper c.clouds:nth-of-type(4){ -webkit-transform: scale(.25, .25); -moz-transform: scale(.25, .25); transform: scale(.25, .25); } /*----- 1個目(上側：時計回り) -----*/ #wrapper c.clouds:before{ top: -6px; left: 13px; } #wrapper c.clouds:after{ top: -10px; left: 35px; } #wrapper c.clouds l{ top: -10px; left: 57px; } #wrapper c.clouds l:before{ top: 4px; left: 21px; } /*----- 1個目(下側：時計回り)-----*/ #wrapper c.clouds l:after{ top: 16px; left: 21px; } #wrapper c.clouds o{ top: 10px; left: 57px; } #wrapper c.clouds o:before{ left: -22px; } #wrapper c.clouds o:after{ top: -4px; left: -44px; } /*----- 2個目(本体) -----*/ #wrapper c.clouds u, #wrapper c.clouds d, #wrapper c.clouds s{ margin-top: 0; margin-left: 220px; } /*----- 2個目(上側：時計回り) -----*/ #wrapper c.clouds u:before{ top: -6px; left: 13px; } #wrapper c.clouds u:after{ top: -10px; left: 35px; } #wrapper c.clouds d{ top: 15px; left: 59px; } #wrapper c.clouds d:before{ top: 4px; left: 22px; } /*----- 2個目(下側：時計回り) -----*/ #wrapper c.clouds d:after{ top: 16px; left: 22px; } #wrapper c.clouds s{ top: 36px; left: 59px; } #wrapper c.clouds s:before{ left: -22px; } #wrapper c.clouds s:after{ top: -4px; left: -42px; } /*------------------------------------------------ T.R.E.E. ------------------------------------------------*/ /*----- trunk -----*/ #wrapper t.tree{ top: 10px; width: 3px; height: 20px; margin-left: -3px; background-color: #c93; border-right: 3px solid #960; border-left: 1px solid #960; -webkit-transform: scale(.5, .5); -moz-transform: scale(.5, .5); transform: scale(.5, .5); } /*----- position -----*/ #wrapper t.tree:nth-of-type(1) { top: 10px; left: 1%; } #wrapper t.tree:nth-of-type(2) { top: 15px; left: 5%; } #wrapper t.tree:nth-of-type(3) { top: 10px; left: 9%; } #wrapper t.tree:nth-of-type(4) { top: 15px; left: 13%; } #wrapper t.tree:nth-of-type(5) { top: 10px; left: 17%; } #wrapper t.tree:nth-of-type(6) { top: 15px; left: 21%; } #wrapper t.tree:nth-of-type(7) { top: 10px; left: 25%; } #wrapper t.tree:nth-of-type(8) { top: 10px; left: 75%; } #wrapper t.tree:nth-of-type(9) { top: 15px; left: 79%; } #wrapper t.tree:nth-of-type(10){ top: 10px; left: 83%; } #wrapper t.tree:nth-of-type(11){ top: 15px; left: 87%; } #wrapper t.tree:nth-of-type(12){ top: 10px; left: 91%; } #wrapper t.tree:nth-of-type(13){ top: 15px; left: 95%; } #wrapper t.tree:nth-of-type(14){ top: 10px; left: 99%; } /*----- leaves -----*/ #wrapper t.tree:before, #wrapper t.tree:after, #wrapper t.tree r, #wrapper t.tree r:before, #wrapper t.tree r:after, #wrapper t.tree e, #wrapper t.tree e:before, #wrapper t.tree e:after{ width: 10px; height: 10px; background-color: #81b41c; border-right: 1px solid #5c8f0f; border-bottom: 1px solid #5c8f0f; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #wrapper t.tree:before{ bottom: 30px; left: -3px; } #wrapper t.tree:after{ bottom: 20px; left: -13px; } #wrapper t.tree r{ top: -10px; left: 8px; } #wrapper t.tree r:before{ top: -7px; left: -3px; } #wrapper t.tree r:after{ top: -7px; left: -18px; } #wrapper t.tree e:nth-of-type(1){ top: -5px; left: -10px; } #wrapper t.tree e:nth-of-type(1):before{ top: -7px; left: 13px; } #wrapper t.tree e:nth-of-type(1):after{ left: 15px; } #wrapper t.tree e:nth-of-type(2){ top: -15px; left: -5px; } #wrapper t.tree e:nth-of-type(2):before{ top: 12px; } #wrapper t.tree e:nth-of-type(2):after{ top: 7px; left: 3px; } /*------------------------------------------------ S.U.N. ------------------------------------------------*/ #wrapper s.sun, #wrapper s.sun:before, #wrapper s.sun:after, #wrapper s.sun u, #wrapper s.sun u:before, #wrapper s.sun u:after, #wrapper s.sun n, #wrapper s.sun n:before{ width: 30px; height: 30px; background-color: #f90; z-index: 1; } #wrapper s.sun{ top: 40px; left: 85%; margin-left: -15px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg); } #wrapper s.sun:before{ -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); transform: rotate(15deg); } #wrapper s.sun:after{ -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); transform: rotate(30deg); } #wrapper s.sun u{ -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } #wrapper s.sun u:before{ -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); transform: rotate(15deg); } #wrapper s.sun u:after{ -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); transform: rotate(15deg); } #wrapper s.sun n{ -webkit-transform: rotate(75deg); -moz-transform: rotate(75deg); transform: rotate(75deg); z-index: 2; } #wrapper s.sun n:before{ top: -1px; left: -1px; width: 32px; height: 32px; background-color: #fc0; background: -moz-linear-gradient(top, #ff9, #fc0); background: -webkit-gradient(linear, left top, left bottom, from(#ff9), to(#fc0)); -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; -webkit-box-shadow: 0 0 20px #fff; -moz-box-shadow: 0 0 20px #fff; box-shadow: 0 0 20px #fff; z-index: 2; } #wrapper s.sun n:after{ top: 2px; left: 3px; width: 10px; height: 10px; background-color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; opacity: .75; z-index: 2; } /*------------------------------------------------ R.A.I.N.B.O.W. ------------------------------------------------*/ #wrapper r.rainbow, #wrapper r.rainbow a, #wrapper r.rainbow i, #wrapper r.rainbow n, #wrapper r.rainbow b, #wrapper r.rainbow o, #wrapper r.rainbow w{ -webkit-border-radius: 999px 999px 0 0; -moz-border-radius: 999px 999px 0 0; border-radius: 999px 999px 0 0; border-width: 3px; border-style: solid; border-bottom-style: none; } #wrapper r.rainbow{ top: 40px; left: -140px; width: 200px; height: 100px; border-color: #f00; opacity: .75; } #wrapper r.rainbow a{ width: 194px; height: 94px; border-color: #f90; } #wrapper r.rainbow i{ top: 3px; left: 3px; width: 188px; height: 88px; border-color: #ff0; } #wrapper r.rainbow n{ top: 6px; left: 6px; width: 182px; height: 82px; border-color: #0f0; } #wrapper r.rainbow b{ top: 9px; left: 9px; width: 176px; height: 76px; border-color: #0ff; } #wrapper r.rainbow o{ top: 12px; left: 12px; width: 170px; height: 70px; border-color: #00f; } #wrapper r.rainbow w{ top: 15px; left: 15px; width: 164px; height: 64px; border-color: #f0f; } /*------------------------------------------------ F.E.N.C.E. ------------------------------------------------*/ #wrapper f.fence{ bottom: 20px; width: 145px; height: 2px; background-color: #c93; border-top: 1px solid #fc6; border-bottom: 1px solid #960; } #wrapper f.fence:after, #wrapper f.fence:before, #wrapper f.fence e, #wrapper f.fence e:before, #wrapper f.fence e:after, #wrapper f.fence n, #wrapper f.fence n:before, #wrapper f.fence n:after, #wrapper f.fence c, #wrapper f.fence c:before, #wrapper f.fence c:after{ width: 2px; height: 20px; background-color: #c93; border-right: 1px solid #960; border-bottom: 1px solid #690; border-left: 1px solid #fc6; } #wrapper f.fence:after{ top: -5px; left: 5px; } #wrapper f.fence:before{ top: -5px; left: 15px; } #wrapper f.fence e{ top: -5px; left: 25px; } #wrapper f.fence e:before{ left: 9px; } #wrapper f.fence e:after{ left: 19px; } #wrapper f.fence n{ top: -5px; left: 54px; } #wrapper f.fence n:before{ left: 10px; } #wrapper f.fence n:after{ left: 20px; } #wrapper f.fence c{ top: -5px; left: 85px; } #wrapper f.fence c:before{ left: 10px; } #wrapper f.fence c:after{ left: 20px; } #wrapper f.fence e:last-child{ left: 116px; } #wrapper f.fence:last-child{ left: auto; right: 0; } /*------------------------------------------------ M.O.U.N.T.A.I.N. ------------------------------------------------*/ #wrapper m.mountain{ top: -40px; width: 465px; height: 40px; background-color: transparent; overflow: hidden; } #wrapper m.mountain *, #wrapper m.mountain *:before, #wrapper m.mountain *:after{ width: 100px; height: 100px; background-color: #693; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #wrapper m.mountain *:before, #wrapper m.mountain *:after{ background-color: #9c3; } /*----- 中 -----*/ #wrapper m.mountain *{ margin-top: 20px; margin-left: -70px;/* 100 * 1.41 / 2 = 70 */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } /*----- 左 -----*/ #wrapper m.mountain *:before{ margin-top: -10px; margin-left: -10px; } /*----- 右 -----*/ #wrapper m.mountain *:after{ margin-top: 10px; margin-left: 10px; } /*----- o -----*/ #wrapper m.mountain o{ left: 35px; } #wrapper m.mountain o:before{ left: -5px; } #wrapper m.mountain o:after{ top: 10px; } /*----- u -----*/ #wrapper m.mountain u{ top: 15px; left: 100px; } #wrapper m.mountain u:before{ left: -5px; } #wrapper m.mountain u:after{ left: 5px; } /*----- n -----*/ #wrapper m.mountain n:nth-of-type(1){ top: 5px; left: 170px; } #wrapper m.mountain n:nth-of-type(1):before{ left: -10px; } #wrapper m.mountain n:nth-of-type(1):after{ left: 5px; } /*----- t -----*/ #wrapper m.mountain t{ top: 23px; left: 51%; } #wrapper m.mountain t:before{ left: 5px; } #wrapper m.mountain t:after{ left: -5px; } /*----- a -----*/ #wrapper m.mountain a{ top: 5px; right: 110px; } #wrapper m.mountain a:before{ top: 5px; left: -5px; } #wrapper m.mountain a:after{ top: 10px; } /*----- i -----*/ #wrapper m.mountain i{ top: 10px; right: 40px; } #wrapper m.mountain i:before{ top: 5px; left: -5px; } #wrapper m.mountain i:after{ left: 10px; } /*----- n -----*/ #wrapper m.mountain n:nth-of-type(2){ right: -30px; } #wrapper m.mountain n:nth-of-type(2):before{ left: -10px; } /*---------------------------------------------------- 入力エリア ----------------------------------------------------*/ /* #wrapperリセット回避＆背景との分離 */ #container{ position: absolute; top: 0; left: 0; width: 465px; height: 465px; overflow: hidden; } #commentbox { position:absolute; bottom:40px; left:0; margin:0; width:100%; height:30px; } /* * CSS3でつくるええ感じのテキストボックス * http://jsdo.it/calmbooks/niceTextbox * #design03 --------------------------------------------------*/ #comment { outline:0; position:absolute; bottom:0; left:50px; height: 2em; width: 250px; padding: 0 5px; font-size: 20px; border: solid 4px #29ABE2; color: #29ABE2; font-weight: bold; font-size: 12px; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#FFF)); background: -moz-linear-gradient(#ddd, #fff); transition: 0.3s ease-in-out; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; } #comment:focus { border: solid 5px #29ABE2; width: 250px; font-size: 20px; background: -webkit-gradient(linear, left top, left bottom, from(#FFED85), to(#FFF6C0)); background: -moz-linear-gradient(#FFED85, #FFF6C0); } /* ふきだし変更ボタン --------------------------------------------------*/ #voice-mode { position:absolute; right:50px; top:0; } #voice-mode input[type="radio"] { -webkit-appearance:none; width: 24px; height: 26px; position:static; display: inline-block; margin: 0px; border-radius: 6px; background-color: #269FCF; border: 0; transition: 0.3s ease-in-out; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; } #voice-mode input[type="radio"]:before { content:attr(data-mode); display:block; position: absolute; z-index: 10; width: 20px; height: 20px; margin: 2px; border-radius: 4px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#49c0f0), color-stop(100%,#12A7E2)); border-top: 1px solid rgba(255,255,255,0.15); font:14px/16px Tahoma, Geneva, sans-serif; font-weight:bold; text-shadow: rgba(0,0,0,0.3) 0 -1px 0; text-align: center; color:#fff; } #voice-mode input[type="radio"]:focus, #voice-mode input[type="radio"]:hover { background-color:#4AD3EF } #voice-mode input[type="radio"]:active, #voice-mode input[type="radio"]:checked { background-color:#FFED85; } #voice-mode input[type="radio"]:active:before, #voice-mode input[type="radio"]:checked:before{ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFC6), color-stop(100%,#ffff88)); color:#FFB900; text-shadow: rgba(255,185,0,0.3) 0 -1px 0; } /*---------------------------------------------------- かわいいふきだし http://jsdo.it/GeckoTang/fOSh 1,2,5だけ使ってます ----------------------------------------------------*/ /* * SpeechBalloon */ .SpeechBalloon{ position:absolute; left:50%; margin:0 auto 0; margin-left:-120px; top:60px; z-index:20; white-space:normal; } .SpeechBalloon p{ font-size:12px; } /* * SpeechBalloon Type1 */ .SpeechBalloon.talk { width:100px; height:100px; background:#FF54AC; border-radius:50px; -moz-border-radius:50px; -webkit-box-shadow: 50px 0 0 #FF54AC, 100px 0 0 #FF54AC, 150px 0 0 #FF54AC ; -moz-box-shadow: 50px 0 0 #FF54AC, 100px 0 0 #FF54AC, 150px 0 0 #FF54AC ; } .SpeechBalloon.talk:before { position:absolute; content:''; display:block; width:0; height:0; top:92px; left:116px; border-top:18px solid #FF54AC; border-left:8px solid transparent; border-right:8px solid transparent; } .SpeechBalloon.talk p{ position:absolute; top:45px; left:20px; width:225px; color:#fff; font-size:14px; text-align:center; } /* * SpeechBalloon Type2 */ .SpeechBalloon.mind { width:100px; height:100px; border-radius:50px; -moz-border-radius:50px; background:#FF54AC; -webkit-box-shadow: 50px 0 0 #FF54AC, 100px 0 0 #FF54AC, 150px 0 0 #FF54AC ; -moz-box-shadow: 50px 0 0 #FF54AC, 100px 0 0 #FF54AC, 150px 0 0 #FF54AC ; } .SpeechBalloon.mind:before { position:absolute; content:''; display:block; width:20px; height:20px; border-radius:10px; -moz-border-radius:10px; top:85px; left:30px; background:#FF54AC; } .SpeechBalloon.mind:after { position:absolute; content:''; display:block; width:10px; height:10px; border-radius:5px; -moz-border-radius:5px; top:105px; left:40px; background:#FF54AC; } .SpeechBalloon.mind p{ position:absolute; top:45px; left:20px; width:225px; color:#fff; font-size:14px; text-align:center; } /* * SpeechBalloon Type3 */ .SpeechBalloon.type3 { top:25px; shout width:50px; height:50px; border-radius:25px; -moz-border-radius:25px; background:#FFF; -webkit-box-shadow: 25px -20px 0 #FFF, 50px -30px 0 #FFF, 75px -35px 0 #FFF, 100px -30px 0 #FFF, 125px -20px 0 #FFF, 150px 0px 0 #FFF, 25px 20px 0 #FFF, 50px 30px 0 #FFF, 75px 35px 0 #FFF, 100px 30px 0 #FFF, 125px 25px 0 #FFF, 60px 0px 0 #FFF, 100px 0px 0 #FFF ; -moz-box-shadow: 25px -20px 0 #FFF, 50px -30px 0 #FFF, 75px -35px 0 #FFF, 100px -30px 0 #FFF, 125px -20px 0 #FFF, 150px 0px 0 #FFF, 25px 20px 0 #FFF, 50px 30px 0 #FFF, 75px 35px 0 #FFF, 100px 30px 0 #FFF, 125px 25px 0 #FFF, 60px 0px 0 #FFF, 100px 0px 0 #FFF ; } .SpeechBalloon.type3:before { position:relative; content:''; display:block; top:-5px; left:-5px; width:60px; height:60px; border-radius:30px; -moz-border-radius:30px; background:#FF54AC; z-index:-1; -webkit-box-shadow: 25px -20px 0 #FF54AC, 50px -30px 0 #FF54AC, 75px -35px 0 #FF54AC, 100px -30px 0 #FF54AC, 125px -20px 0 #FF54AC, 150px 0px 0 #FF54AC, 25px 20px 0 #FF54AC, 50px 30px 0 #FF54AC, 75px 35px 0 #FF54AC, 100px 30px 0 #FF54AC, 125px 25px 0 #FF54AC, 60px 0px 0 #FF54AC, 100px 0px 0 #FF54AC ; -moz-box-shadow: 25px -20px 0 #FF54AC, 50px -30px 0 #FF54AC, 75px -35px 0 #FF54AC, 100px -30px 0 #FF54AC, 125px -20px 0 #FF54AC, 150px 0px 0 #FF54AC, 25px 20px 0 #FF54AC, 50px 30px 0 #FF54AC, 75px 35px 0 #FF54AC, 100px 30px 0 #FF54AC, 125px 25px 0 #FF54AC, 60px 0px 0 #FF54AC, 100px 0px 0 #FF54AC ; } .SpeechBalloon.type3:after { position:absolute; top:80px; left:97px; content:''; display:block; width:8px; height:8px; position:absolute; background:#fff; z-index:2; -webkit-transform:rotate(45deg); -webkit-box-shadow:4px 4px 0 #FF54AC; -moz-transform:rotate(45deg); -moz-box-shadow:4px 4px 0 #FF54AC; } .SpeechBalloon.type3 p{ position:absolute; top:20px; left:20px; width:175px; color:#FF54AC; font-size:14px; text-align:center; } /* * SpeechBalloon Type4 */ .SpeechBalloon.type4 { width:170px; height:120px; margin:0 auto 20px; } .SpeechBalloon.type4:before { position:absolute; top:60px; left:-15px; content:'❤'; display:block; width:0px; height:0px; line-height:0; font-size:200px; color:#FFF; } .SpeechBalloon.type4:after { position:absolute; top:60px; left:-25px; content:'❤'; display:block; width:0px; height:0px; line-height:0; font-size:220px; color:#FF54AC; z-index:-1; } .SpeechBalloon.type4 p { position:relative; z-index:2; width:170px; height:120px; color:#FF54AC; line-height:120px; text-align:center; } /* * SpeechBalloon Type5 */ .SpeechBalloon.shout { top:0; width:150px; height:100px; margin:60px auto 100px; background:#FFF; margin-left:-75px; } .SpeechBalloon.shout:before { position:absolute; top:-25px; left:-25px; z-index:20; content:''; display:block; width:50px; height:50px; background:#FFF; -webkit-transform:rotate(45deg); -webkit-box-shadow: 134px -66px 0 #FFF, 170px -30px 0 #FFF, 140px 0px 0 #FFF, 100px 40px 0 #FFF, 100px -100px 0 #FFF, 70px -70px 0 #FFF, 30px -30px 0 #FFF, 36px 36px 0 #FFF, 71px 71px 0 #FFF ; } .SpeechBalloon.shout:after { position:absolute; top:-30px; left:-30px; content:''; display:block; width:60px; height:60px; background:#FF54AC; z-index:19; -webkit-transform:rotate(45deg); -webkit-box-shadow: 134px -66px 0 #FF54AC, 170px -30px 0 #FF54AC, 140px 0px 0 #FF54AC, 100px 40px 0 #FF54AC, 100px -100px 0 #FF54AC, 70px -70px 0 #FF54AC, 30px -30px 0 #FF54AC, 36px 36px 0 #FF54AC, 71px 71px 0 #FF54AC ; } .SpeechBalloon.shout p { position:relative; z-index:22; height:100px; font-size:14px; line-height:100px; color:#FF54AC; text-align:center; background:#fff; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/4DRy/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/Tenderfeel/4DRy" title="UI付けてみた。forked from: 背景付けてみた。forked from: jsdo.pigg">UI付けてみた。forked from: 背景付けてみた。forked from: jsdo.pigg - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code