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

View: 1773

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

Tweet
QR code
Embed

Design view
Code view
<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>
zip