Forked from: GeckoTang's jsdo.pigg diff(867) 背景付けてみた。forked from: jsdo.pigg tsmallfield Follow 2011-02-24 14:01:38 License: MIT License Fork3 Fav7 View5556 背景は以下から拝借。全部CSS。 http://jsdo.it/tsmallfield/counting_sheep2 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 // 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> <!-- ADDED BY tsmallfield --> <div id="wrapper"> <section id="sky"> <!-- SUN --> <s class="sun"> <u></u> <n></n> </s> <!-- CLOUD --> <c class="clouds"> <l></l> <o></o> <u></u> <d></d> <s></s> </c> <!-- CLOUD --> <c class="clouds"> <l></l> <o></o> <u></u> <d></d> <s></s> </c> <!-- CLOUD --> <c class="clouds"> <l></l> <o></o> <u></u> <d></d> <s></s> </c> <!-- CLOUD --> <c class="clouds"> <l></l> <o></o> <u></u> <d></d> <s></s> </c> <!-- RAINBOW --> <r class="rainbow"> <a></a> <i></i> <n></n> <b></b> <o></o> <w></w> </r> </section> <section id="ground"> <!-- MOUNTAIN --> <m class="mountain"> <o></o> <u></u> <n></n> <t></t> <a></a> <i></i> <n></n> </m> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- FENCE --> <f class="fence"> <e></e> <n></n> <c></c> <e></e> </f> <!-- FENCE --> <f class="fence"> <e></e> <n></n> <c></c> <e></e> </f> </section> <div id="zzz"></div> <!-- M.O.O.N. --> <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> <!-- ADDED BY tsmallfield --> <div id="wrapper"> <section id="sky"> <!-- SUN --> <s class="sun"> <u></u> <n></n> </s> <!-- CLOUD --> <c class="clouds"> <l></l> <o></o> <u></u> <d></d> <s></s> </c> <!-- CLOUD --> <c class="clouds"> <l></l> <o></o> <u></u> <d></d> <s></s> </c> <!-- CLOUD --> <c class="clouds"> <l></l> <o></o> <u></u> <d></d> <s></s> </c> <!-- CLOUD --> <c class="clouds"> <l></l> <o></o> <u></u> <d></d> <s></s> </c> <!-- RAINBOW --> <r class="rainbow"> <a></a> <i></i> <n></n> <b></b> <o></o> <w></w> </r> </section> <section id="ground"> <!-- MOUNTAIN --> <m class="mountain"> <o></o> <u></u> <n></n> <t></t> <a></a> <i></i> <n></n> </m> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- TREE --> <t class="tree"> <r></r> <e></e> <e></e> </t> <!-- FENCE --> <f class="fence"> <e></e> <n></n> <c></c> <e></e> </f> <!-- FENCE --> <f class="fence"> <e></e> <n></n> <c></c> <e></e> </f> </section> <div id="zzz"></div> <!-- M.O.O.N. --> <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; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? 背景は以下から拝借。全部CSS。 http://jsdo.it/tsmallfield/counting_sheep2 Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet 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> avatar CSS3 pigg 限界に挑戦 Tweet twitter Tags CSS3 CSS無双 avatar pigg 限界に挑戦 Favorite by paq KAT gryng02 oov GeckoTang ginpei: CSS無双すごい! cheeaun: avatarCSS3pigg Forked sort new page view favorite forked forked from: 背景付けてみた。forked fr.. akira_maru 00 230views 3/250/1065 CSS3 avatar pigg 限界に挑戦 UI付けてみた。forked from: 背景付けてみた。f.. Tenderfeel 1322 6756views 41/265/1596 CSS3 animation application art&design avatar character game graphics jQuery pigg user_interface かわいいは作れる 限界に挑戦 forked from: 背景付けてみた。forked fr.. minikomi 00 283views 3/250/1070 CSS3 avatar pigg 限界に挑戦