Forked from: edo_m18's 1要素1クラス、画像を一切使わずにCSSで実装するiPhone UI diff(163) これは簡単! a要素にクラスを追加するだけでiPhone UIボタン edo_m18 Follow 2011-08-29 09:06:51 License: MIT License Fork16 Fav1 View9102 ブログ記事用サンプルです。 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 0 lines HTML 23 lines CSS 230 lines ブログ記事用サンプルです。 これは簡単! a要素にクラスを追加するだけでiPhone UIボタン <article> <header id="header"> <div class="toolbarBox"> <h1 class="toolbar">CSS3 ボタンテンプレート</h1> <nav> <ul> <li class="toolBtnTypeA"><a href="#" class="toolBtnArr">TOP</a></li> <li class="toolBtnTypeB"><a href="#" class="toolBtn">Reload</a></li> </ul> </nav> <!-- /.toolbarBox --></div> <h2 class="toolbarB">for iPhone</h2> </header> <section class="template-section" id="buttons"> <h1>iPhoneボタン</h1> <p><a href="#" class="btnTypeA">ボタンタイプA</a></p> <p><a href="#" class="btnTypeB">ボタンタイプB</a></p> <p><a href="#" class="btnTypeC">ボタンタイプC</a></p> <p><a href="#" class="btnTypeD">ボタンタイプD</a></p> <p><a href="#" class="btnTypeE">ボタンタイプE</a></p> <!-- /.template-section --></section> </article> これは簡単! a要素にクラスを追加するだけでiPhone UIボタン body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, p, blockquote, th, td, form, fieldset, legend { margin: 0; padding: 0; } article, section, aside, nav, header, footer { display: block; } body { color: #000; font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif; font-size: 13px; line-height: 1.5; } body { font-size: 16px; background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #e4e4e4), color-stop(0.2, #e4e4e4), color-stop(0.2, #dddddd)); background-size: 7px 10px; } li { list-style: none; } h1, h2, h3, h4, h5, h6 { font-size: 100%; line-height: 1.2; } .toolbarBox { position: relative; } .toolbarBox nav li { position: absolute; } .toolbarBox nav .toolBtn { display: block; padding: 2px 10px; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #8ea3c0), color-stop(0.5, #5776a2), color-stop(0.5, #49699a), color-stop(1, #4a6b9a)); border-top-color: #2f363e; border-left-color: #435a79; border-right-color: #435a79; border-bottom-color: #385074; border-width: 1px; border-style: solid; border-radius: 4px; color: #fff; font-size: 13px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); text-decoration: none; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); } .toolbarBox nav .toolBtnTypeA { left: 4px; top: 8px; } .toolbarBox nav .toolBtnTypeB { right: 4px; top: 8px; } .toolbarBox nav .toolBtnArr { position: absolute; margin-left: 10px; padding: 3px 10px 1px; color: #fff; font-size: 13px; text-align: center; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); z-index: 5; } .toolbarBox nav .toolBtnArr:before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #8ea3c0), color-stop(0.5, #5776a2), color-stop(0.5, #49699a), color-stop(1, #4a6b9a)); border-top-color: #2f363e; border-right-color: #435a79; border-bottom-color: #385074; border-width: 1px; border-style: solid; border-radius: 7px; border-left: none; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); z-index: -1; } .toolbarBox nav .toolBtnArr:after { content: ""; display: block; position: absolute; left: 4px; top: 0; width: 17px; height: 17px; -webkit-transform-origin: left top; -webkit-transform: rotate(45deg); background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #8ea3c0), color-stop(0.5, #5776a2), color-stop(0.5, #49699a), color-stop(1, #4a6b9a)); border-left-color: #2f363e; border-bottom-color: #385074; border-width: 1px; border-style: solid; border-radius: 3px; border-right: none; border-top: none; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); z-index: -2; } .toolbar { padding: 10px 0; border-top: solid 1px #bec5cf; border-bottom: solid 1px #3f4e63; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #acb9c9), color-stop(0.5, #8395af), color-stop(0.5, #7388a5), color-stop(1, #7488a1)); color: #fff; font-size: 16px; font-weight: bold; text-shadow: -1px -1px 0 #434b57; text-align: center; } .toolbarB { padding: 1px 12px; border-top: solid 1px #99a7b2; border-bottom: solid 1px #999ea4; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #919fa8), color-stop(1, #b7c0c9)); color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); } /* btnType Serise */ a.btnTypeA, a.btnTypeB, a.btnTypeC, a.btnTypeD, a.btnTypeE { position: relative; margin-bottom: 12px; margin-top: 12px; padding: 5px 10px; display: block; color: #000; text-decoration: none; text-align: center; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); z-index: 5; } .btnTypeA:after, a.btnTypeB:after, a.btnTypeC:after, a.btnTypeD:after, a.btnTypeE:after { content: ""; position: absolute; left: -3px; top: -3px; width: 100%; height: 100%; padding: 2px; border-radius: 10px; background-color: #bebebe; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.3)), color-stop(0.5, rgba(255, 255, 255, 0))); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 0 rgba(0, 0, 0, 0.2), 1px 1px 2px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 0 rgba(0, 0, 0, 0.2), 1px 1px 2px rgba(0, 0, 0, 0.3); z-index: -1; } .btnTypeA:before, a.btnTypeB:before, a.btnTypeC:before, a.btnTypeD:before, a.btnTypeE:before { content: ""; position: absolute; left: -6px; top: -5px; width: 100%; height: 100%; padding: 5px 5px 4px 5px; border-radius: 14px; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #545454), color-stop(1, #9e9e9e)); z-index: -2; -webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.3), 0 1.3px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.3), 0 1.3px 0 rgba(0, 0, 0, 0.2); } a.btnTypeB { color: #fff; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5); } a.btnTypeB:after { background-color: #475ab0; } a.btnTypeC { color: #fff; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5); } a.btnTypeC:after { background-color: #333; } a.btnTypeD { color: #fff; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5); } a.btnTypeD:after { background-color: #f00; } a.btnTypeE { color: #fff; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5); } a.btnTypeE:after { background-color: #009d0e; } /* template styles. */ .template-section { padding: 20px; } .template-section h1 { color: #4c566c; text-align: left; } ブログ記事用サンプルです。 <article> <header id="header"> <div class="toolbarBox"> <h1 class="toolbar">CSS3 ボタンテンプレート</h1> <nav> <ul> <li class="toolBtnTypeA"><a href="#" class="toolBtnArr">TOP</a></li> <li class="toolBtnTypeB"><a href="#" class="toolBtn">Reload</a></li> </ul> </nav> <!-- /.toolbarBox --></div> <h2 class="toolbarB">for iPhone</h2> </header> <section class="template-section" id="buttons"> <h1>iPhoneボタン</h1> <p><a href="#" class="btnTypeA">ボタンタイプA</a></p> <p><a href="#" class="btnTypeB">ボタンタイプB</a></p> <p><a href="#" class="btnTypeC">ボタンタイプC</a></p> <p><a href="#" class="btnTypeD">ボタンタイプD</a></p> <p><a href="#" class="btnTypeE">ボタンタイプE</a></p> <!-- /.template-section --></section> </article> body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, p, blockquote, th, td, form, fieldset, legend { margin: 0; padding: 0; } article, section, aside, nav, header, footer { display: block; } body { color: #000; font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif; font-size: 13px; line-height: 1.5; } body { font-size: 16px; background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #e4e4e4), color-stop(0.2, #e4e4e4), color-stop(0.2, #dddddd)); background-size: 7px 10px; } li { list-style: none; } h1, h2, h3, h4, h5, h6 { font-size: 100%; line-height: 1.2; } .toolbarBox { position: relative; } .toolbarBox nav li { position: absolute; } .toolbarBox nav .toolBtn { display: block; padding: 2px 10px; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #8ea3c0), color-stop(0.5, #5776a2), color-stop(0.5, #49699a), color-stop(1, #4a6b9a)); border-top-color: #2f363e; border-left-color: #435a79; border-right-color: #435a79; border-bottom-color: #385074; border-width: 1px; border-style: solid; border-radius: 4px; color: #fff; font-size: 13px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); text-decoration: none; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); } .toolbarBox nav .toolBtnTypeA { left: 4px; top: 8px; } .toolbarBox nav .toolBtnTypeB { right: 4px; top: 8px; } .toolbarBox nav .toolBtnArr { position: absolute; margin-left: 10px; padding: 3px 10px 1px; color: #fff; font-size: 13px; text-align: center; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); z-index: 5; } .toolbarBox nav .toolBtnArr:before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #8ea3c0), color-stop(0.5, #5776a2), color-stop(0.5, #49699a), color-stop(1, #4a6b9a)); border-top-color: #2f363e; border-right-color: #435a79; border-bottom-color: #385074; border-width: 1px; border-style: solid; border-radius: 7px; border-left: none; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); z-index: -1; } .toolbarBox nav .toolBtnArr:after { content: ""; display: block; position: absolute; left: 4px; top: 0; width: 17px; height: 17px; -webkit-transform-origin: left top; -webkit-transform: rotate(45deg); background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #8ea3c0), color-stop(0.5, #5776a2), color-stop(0.5, #49699a), color-stop(1, #4a6b9a)); border-left-color: #2f363e; border-bottom-color: #385074; border-width: 1px; border-style: solid; border-radius: 3px; border-right: none; border-top: none; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); z-index: -2; } .toolbar { padding: 10px 0; border-top: solid 1px #bec5cf; border-bottom: solid 1px #3f4e63; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #acb9c9), color-stop(0.5, #8395af), color-stop(0.5, #7388a5), color-stop(1, #7488a1)); color: #fff; font-size: 16px; font-weight: bold; text-shadow: -1px -1px 0 #434b57; text-align: center; } .toolbarB { padding: 1px 12px; border-top: solid 1px #99a7b2; border-bottom: solid 1px #999ea4; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #919fa8), color-stop(1, #b7c0c9)); color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); } /* btnType Serise */ a.btnTypeA, a.btnTypeB, a.btnTypeC, a.btnTypeD, a.btnTypeE { position: relative; margin-bottom: 12px; margin-top: 12px; padding: 5px 10px; display: block; color: #000; text-decoration: none; text-align: center; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); z-index: 5; } .btnTypeA:after, a.btnTypeB:after, a.btnTypeC:after, a.btnTypeD:after, a.btnTypeE:after { content: ""; position: absolute; left: -3px; top: -3px; width: 100%; height: 100%; padding: 2px; border-radius: 10px; background-color: #bebebe; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.3)), color-stop(0.5, rgba(255, 255, 255, 0))); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 0 rgba(0, 0, 0, 0.2), 1px 1px 2px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 0 rgba(0, 0, 0, 0.2), 1px 1px 2px rgba(0, 0, 0, 0.3); z-index: -1; } .btnTypeA:before, a.btnTypeB:before, a.btnTypeC:before, a.btnTypeD:before, a.btnTypeE:before { content: ""; position: absolute; left: -6px; top: -5px; width: 100%; height: 100%; padding: 5px 5px 4px 5px; border-radius: 14px; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #545454), color-stop(1, #9e9e9e)); z-index: -2; -webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.3), 0 1.3px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.3), 0 1.3px 0 rgba(0, 0, 0, 0.2); } a.btnTypeB { color: #fff; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5); } a.btnTypeB:after { background-color: #475ab0; } a.btnTypeC { color: #fff; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5); } a.btnTypeC:after { background-color: #333; } a.btnTypeD { color: #fff; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5); } a.btnTypeD:after { background-color: #f00; } a.btnTypeE { color: #fff; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5); } a.btnTypeE:after { background-color: #009d0e; } /* template styles. */ .template-section { padding: 20px; } .template-section h1 { color: #4c566c; text-align: left; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? ブログ記事用サンプルです。 Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit http://jsdo.it/edo_m18/abFI これは簡単! a要素にクラスを追加するだけでiPhone UIボタン Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/abFI/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/edo_m18/abFI" title="これは簡単! a要素にクラスを追加するだけでiPhone UIボタン">これは簡単! a要素にクラスを追加するだけでiPhone UIボタン - jsdo.it - share JavaScript, HTML5 and CSS</a></p> blog button CSS CSS3 iPhone Library sample UI サンプル ブログ ボタン ライブラリ Tweet twitter Tags CSS CSS3 Library UI blog button iPhone sample smartphones&tablets user_interface サンプル ブログ ボタン ライブラリ Favorite by itoz Forked sort new page view favorite forked forked: これは簡単! a要素にクラスを追加するだけで.. masasiro 00 23views 2/23/230 CSS CSS3 Library UI blog button iPhone sample サンプル ブログ ボタン ライブラリ forked: これは簡単! a要素にクラスを追加するだけで.. Goro.Aihara 00 69views 2/23/230 CSS CSS3 Library UI blog button iPhone sample サンプル ブログ ボタン ライブラリ forked: これは簡単! a要素にクラスを追加するだけで.. tatezo 00 61views 2/23/230 CSS CSS3 Library UI blog button iPhone sample サンプル ブログ ボタン ライブラリ forked: これは簡単! a要素にクラスを追加するだけで.. nakacity 00 63views 2/23/230 CSS CSS3 Library UI blog button iPhone sample サンプル ブログ ボタン ライブラリ 1 2 3 4 5NEXT>>