Forked from: GeckoTang's jsdo.pigg diff(867)

背景付けてみた。forked from: jsdo.pigg

tsmallfield

2011-02-24 14:01:38

License: MIT License

Fork: 3

Fav: 7

View: 5556

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 2 lines
HTML 250 lines
CSS 1065 lines

背景は以下から拝借。全部CSS。
http://jsdo.it/tsmallfield/counting_sheep2

背景付けてみた。forked from: jsdo.pigg

<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>

背景付けてみた。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;
        }
        .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);}
    /*
     * 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;
       }
    /*
     * 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;
}

背景は以下から拝借。全部CSS。 http://jsdo.it/tsmallfield/counting_sheep2// forked from GeckoTang's "jsdo.pigg" http://jsdo.it/GeckoTang/dOv6  <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> /* * 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; } .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);} /* * 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; } /* * 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; }

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/hQXq/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/tsmallfield/pigg" title="背景付けてみた。forked from: jsdo.pigg">背景付けてみた。forked from: jsdo.pigg - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code