Forked from: mama.sanory's 1DIV リラックマ(Firefox推奨) diff(130) 1DIV クマ吉 forked from: 1DIV リラックマ norahiko Follow 2011-04-19 21:59:38 License: MIT License Fork0 Fav6 View1773 新ジャンル「1DIV」 こんな書き方があったとは・・・ ※IE9, FIrefox, Opera, Chromeのベータ版だときちんと表示されます。 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 リラックマ // forked from mama.sanory's "1DIV リラックマ(Firefox推奨)" http://jsdo.it/mama.sanory/wLeX <div></div> 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; } use an iframe compat browser, deer 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 tags css CSS3 変態は作れる 1DIV Tweet twitter Tags CSS3 CSS3職人 CSS無双 css 変態は作れる 1DIV Favorite by vincicat bluesura geta ksk1015 kyo_ago gryng02: CSS3職人CSS無双変態は作れる1DIV Forked sort new page view favorite forked forked: 1DIV クマ吉 forked from:.. nafu003 00 73views 4/2/150 CSS3 css 変態は作れる 1DIV forked: 1DIV クマ吉 forked from:.. uno_sama 00 85views 4/2/150 CSS3 css 変態は作れる 1DIV