1DIV リラックマ（Firefox推奨）

mama.sanory

2011-04-19 12:06:53

License: MIT License

Fork: 10

Fav: 11

View: 6963

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 2 lines
HTML 2 lines
CSS 60 lines

1DIV リラックマ（Firefox推奨）

1DIV リラックマ（Firefox推奨）

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

body {
  padding-top: 300px;
}

div {
  margin: 0 auto;
  -moz-border-radius: 50% 50% 30% 30%;
  -webkit-border-radius: 50% 50% 30% 30%;
  border-radius: 50% 50% 30% 30%;
  width: 80px;
  height: 60px;
  background-color: #fff;
  -moz-box-shadow: 0 -30px 0 80px #b26513, 0 -30px 0 83px #000, -84px -126px 0 -10px #f4c821, 84px -126px 0 -10px #f4c821, -96px -110px 0 10px #b26513, 96px -110px 0 10px #b26513, -96px -110px 0 13px #000, 96px -110px 0 13px #000;
  -webkit-box-shadow: 0 -30px 0 80px #b26513, 0 -30px 0 83px #000, -84px -126px 0 -10px #f4c821, 84px -126px 0 -10px #f4c821, -96px -110px 0 10px #b26513, 96px -110px 0 10px #b26513, -96px -110px 0 13px #000, 96px -110px 0 13px #000;
  box-shadow: 0 -30px 0 80px #b26513, 0 -30px 0 83px #000, -84px -126px 0 -10px #f4c821, 84px -126px 0 -10px #f4c821, -96px -110px 0 10px #b26513, 96px -110px 0 10px #b26513, -96px -110px 0 13px #000, 96px -110px 0 13px #000;
}

div:before {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  display: block;
  position: relative;
  top: 10px;
  left: 30px;
  width: 20px;
  height: 20px;
  content: '';
  background-color: #000;
  -moz-box-shadow: -60px -10px 0 5px #000, 60px -10px 0 5px #000;
  -webkit-box-shadow: -60px -10px 0 5px #000, 60px -10px 0 5px #000;
  box-shadow: -60px -10px 0 5px #000, 60px -10px 0 5px #000;
}

div:after {
  border-top: 6px solid #000;
  border-left: 6px solid #000;
  display: block;
  position: relative;
  top: 10px;
  left: 27px;
  width: 20px;
  height: 20px;
  content: '';
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

1個のDIVタグでどこまで描けるか試してみました。 box-shadow, :before, :afterを駆使してリラックマを描いてみましたが、box-shadowの影の拡がりの解釈がブラウザによって結構違うようで、まともに描けたのはFirefoxだけでした・・・。 Firefox3.6以上で見てみて下さい。4より3.6の方がより良い感じがします。 <div></div> html, body, div { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; } body { padding-top: 300px; } div { margin: 0 auto; -moz-border-radius: 50% 50% 30% 30%; -webkit-border-radius: 50% 50% 30% 30%; border-radius: 50% 50% 30% 30%; width: 80px; height: 60px; background-color: #fff; -moz-box-shadow: 0 -30px 0 80px #b26513, 0 -30px 0 83px #000, -84px -126px 0 -10px #f4c821, 84px -126px 0 -10px #f4c821, -96px -110px 0 10px #b26513, 96px -110px 0 10px #b26513, -96px -110px 0 13px #000, 96px -110px 0 13px #000; -webkit-box-shadow: 0 -30px 0 80px #b26513, 0 -30px 0 83px #000, -84px -126px 0 -10px #f4c821, 84px -126px 0 -10px #f4c821, -96px -110px 0 10px #b26513, 96px -110px 0 10px #b26513, -96px -110px 0 13px #000, 96px -110px 0 13px #000; box-shadow: 0 -30px 0 80px #b26513, 0 -30px 0 83px #000, -84px -126px 0 -10px #f4c821, 84px -126px 0 -10px #f4c821, -96px -110px 0 10px #b26513, 96px -110px 0 10px #b26513, -96px -110px 0 13px #000, 96px -110px 0 13px #000; } div:before { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: block; position: relative; top: 10px; left: 30px; width: 20px; height: 20px; content: ''; background-color: #000; -moz-box-shadow: -60px -10px 0 5px #000, 60px -10px 0 5px #000; -webkit-box-shadow: -60px -10px 0 5px #000, 60px -10px 0 5px #000; box-shadow: -60px -10px 0 5px #000, 60px -10px 0 5px #000; } div:after { border-top: 6px solid #000; border-left: 6px solid #000; display: block; position: relative; top: 10px; left: 27px; width: 20px; height: 20px; content: ''; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

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/wLeX/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/mama.sanory/wLeX" title="1DIV リラックマ（Firefox推奨）">1DIV リラックマ（Firefox推奨） - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code