Forked from: mama.sanory's 1DIV リラックマ（Firefox推奨） diff(130)

1DIV クマ吉 forked from: 1DIV リラックマ

norahiko

2011-04-19 21:59:38

License: MIT License

Fork: 0

Fav: 7

View: 1919

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 3 lines
HTML 2 lines
CSS 150 lines

新ジャンル「1DIV」

こんな書き方があったとは・・・

※IE9, FIrefox, Opera, Chromeのベータ版だときちんと表示されます。

1DIV クマ吉 forked from: 1DIV リラックマ

1DIV クマ吉 forked from: 1DIV リラックマ

html, body, div {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
}

body {
  padding-top: 250px;
}

div {
  margin: 0 auto;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  width: 40px;
  height: 40px;
  background-color: #ed8e83;
  -moz-box-shadow:
    0 -30px 0 100px #c06c30,
    0 -30px 0 103px black, 
    -88px -124px 0 -8px #f7daae, 
    88px -124px 0 -8px #f7daae, 
    -88px -124px 0 2px #c06c30, 
    88px -124px 0 2px #c06c30, 
    -88px -124px 0 5px black, 
    88px -124px 0 5px black;
  -webkit-box-shadow:
    0 -30px 0 100px #c06c30,
	0 -30px 0 103px black, 
    -88px -124px 0 -8px #f7daae, 
    88px -124px 0 -8px #f7daae, 
    -88px -124px 0 2px #c06c30, 
    88px -124px 0 2px #c06c30, 
    -88px -124px 0 5px black, 
    88px -124px 0 5px black;
  box-shadow:
    0 -30px 0 100px #c06c30,
	0 -30px 0 103px black, 
    -88px -124px 0 -8px #f7daae, 
    88px -124px 0 -8px #f7daae, 
    -88px -124px 0 2px #c06c30, 
    88px -124px 0 2px #c06c30, 
    -88px -124px 0 5px black, 
    88px -124px 0 5px black;

-webkit-transform: rotate(-5deg) scale(1.05, 1);
  -moz-transform: rotate(-5deg) scale(1.05, 1);
  -o-transform: rotate(-5deg) scale(1.05, 1);
  -ms-transform: rotate(-5deg) scale(1.05, 1);
}

div:before {
  display: block;
  position: relative;
  content: "";
  left: -15px;
  top: -20px;

width: 50px;
  height: 20px;
  -moz-border-radius: 15px / 10px;
  -webkit-border-radius: 15px / 10px;
  border-radius: 15px / 10px;

-moz-box-shadow:
    -55px 33px 0px 0px #c06c30,
    60px 33px 0px 0px #c06c30,
    0px 47px 0px -9px black,

-26px 24px 0px 0px #c06c30,
    26px 24px 0px 0px #c06c30,
    -24px 25px 0px 0px black,
    24px 25px 0px 0px black,

-21px 50px 0px 5px #c06c30,
    21px 50px 0px 5px #c06c30,
    -20px 49px 0px 5px black,
    20px 49px 0px 5px black;
  -webkit-box-shadow:
    -55px 33px 0px 0px #c06c30,
    60px 33px 0px 0px #c06c30,
    0px 47px 0px -9px black,

-26px 24px 0px 0px #c06c30,
    26px 24px 0px 0px #c06c30,
    -24px 25px 0px 0px black,
    24px 25px 0px 0px black,

-21px 50px 0px 5px #c06c30,
    21px 50px 0px 5px #c06c30,
    -20px 49px 0px 5px black,
    20px 49px 0px 5px black;
  box-shadow:
    -55px 33px 0px 0px #c06c30,
    60px 33px 0px 0px #c06c30,
    0px 47px 0px -9px black,

-26px 24px 0px 0px #c06c30,
    26px 24px 0px 0px #c06c30,
    -24px 25px 0px 0px black,
    24px 25px 0px 0px black,

-21px 50px 0px 5px #c06c30,
    21px 50px 0px 5px #c06c30,
    -20px 49px 0px 5px black,
    20px 49px 0px 5px black;
}

div::after{
  display: block;
  position: relative;
  content: "";
  left: -20px;
  top: -55px;
  
  width: 55px;
  height: 45px;
  background: #c06c30;
  border: 2px solid black;
  -moz-border-radius: 28px / 22px;
  -webkit-border-radius: 28px / 22px;
  border-radius: 28px / 22px;
  
  -moz-box-shadow: 
    -40px -43px 0px -17px black,
    40px -48px 0px -17px black,
    -38px -44px 0px 5px #c06c30,
    -40px -50px 0px 0px black,
    40px -49px 0px 5px #c06c30,
    41px -55px 0px 0px black;
  -webkit-box-shadow: 
    -40px -43px 0px -17px black,
    40px -48px 0px -17px black,
    -38px -44px 0px 5px #c06c30,
    -40px -50px 0px 0px black,
    40px -49px 0px 5px #c06c30,
    41px -55px 0px 0px black;
  box-shadow: 
    -40px -43px 0px -17px black,
    40px -48px 0px -17px black,
    -38px -44px 0px 5px #c06c30,
    -40px -50px 0px 0px black,
    40px -49px 0px 5px #c06c30,
    41px -55px 0px 0px black;
}

新ジャンル「1DIV」こんな書き方があったとは・・・ ※IE9, FIrefox, Opera, Chromeのベータ版だときちんと表示されます。// forked from mama.sanory's "1DIV リラックマ（Firefox推奨）" http://jsdo.it/mama.sanory/wLeX <div></div> html, body, div { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; } body { padding-top: 250px; } div { margin: 0 auto; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; width: 40px; height: 40px; background-color: #ed8e83; -moz-box-shadow: 0 -30px 0 100px #c06c30, 0 -30px 0 103px black, -88px -124px 0 -8px #f7daae, 88px -124px 0 -8px #f7daae, -88px -124px 0 2px #c06c30, 88px -124px 0 2px #c06c30, -88px -124px 0 5px black, 88px -124px 0 5px black; -webkit-box-shadow: 0 -30px 0 100px #c06c30, 0 -30px 0 103px black, -88px -124px 0 -8px #f7daae, 88px -124px 0 -8px #f7daae, -88px -124px 0 2px #c06c30, 88px -124px 0 2px #c06c30, -88px -124px 0 5px black, 88px -124px 0 5px black; box-shadow: 0 -30px 0 100px #c06c30, 0 -30px 0 103px black, -88px -124px 0 -8px #f7daae, 88px -124px 0 -8px #f7daae, -88px -124px 0 2px #c06c30, 88px -124px 0 2px #c06c30, -88px -124px 0 5px black, 88px -124px 0 5px black; -webkit-transform: rotate(-5deg) scale(1.05, 1); -moz-transform: rotate(-5deg) scale(1.05, 1); -o-transform: rotate(-5deg) scale(1.05, 1); -ms-transform: rotate(-5deg) scale(1.05, 1); } div:before { display: block; position: relative; content: ""; left: -15px; top: -20px; width: 50px; height: 20px; -moz-border-radius: 15px / 10px; -webkit-border-radius: 15px / 10px; border-radius: 15px / 10px; -moz-box-shadow: -55px 33px 0px 0px #c06c30, 60px 33px 0px 0px #c06c30, 0px 47px 0px -9px black, -26px 24px 0px 0px #c06c30, 26px 24px 0px 0px #c06c30, -24px 25px 0px 0px black, 24px 25px 0px 0px black, -21px 50px 0px 5px #c06c30, 21px 50px 0px 5px #c06c30, -20px 49px 0px 5px black, 20px 49px 0px 5px black; -webkit-box-shadow: -55px 33px 0px 0px #c06c30, 60px 33px 0px 0px #c06c30, 0px 47px 0px -9px black, -26px 24px 0px 0px #c06c30, 26px 24px 0px 0px #c06c30, -24px 25px 0px 0px black, 24px 25px 0px 0px black, -21px 50px 0px 5px #c06c30, 21px 50px 0px 5px #c06c30, -20px 49px 0px 5px black, 20px 49px 0px 5px black; box-shadow: -55px 33px 0px 0px #c06c30, 60px 33px 0px 0px #c06c30, 0px 47px 0px -9px black, -26px 24px 0px 0px #c06c30, 26px 24px 0px 0px #c06c30, -24px 25px 0px 0px black, 24px 25px 0px 0px black, -21px 50px 0px 5px #c06c30, 21px 50px 0px 5px #c06c30, -20px 49px 0px 5px black, 20px 49px 0px 5px black; } div::after{ display: block; position: relative; content: ""; left: -20px; top: -55px; width: 55px; height: 45px; background: #c06c30; border: 2px solid black; -moz-border-radius: 28px / 22px; -webkit-border-radius: 28px / 22px; border-radius: 28px / 22px; -moz-box-shadow: -40px -43px 0px -17px black, 40px -48px 0px -17px black, -38px -44px 0px 5px #c06c30, -40px -50px 0px 0px black, 40px -49px 0px 5px #c06c30, 41px -55px 0px 0px black; -webkit-box-shadow: -40px -43px 0px -17px black, 40px -48px 0px -17px black, -38px -44px 0px 5px #c06c30, -40px -50px 0px 0px black, 40px -49px 0px 5px #c06c30, 41px -55px 0px 0px black; box-shadow: -40px -43px 0px -17px black, 40px -48px 0px -17px black, -38px -44px 0px 5px #c06c30, -40px -50px 0px 0px black, 40px -49px 0px 5px #c06c30, 41px -55px 0px 0px black; }

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/8onR/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/norahiko/8onR" title="1DIV クマ吉  forked from: 1DIV リラックマ">1DIV クマ吉  forked from: 1DIV リラックマ - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code