2011-08-29 09:06:51

License: MIT License

Fork: 16

Fav: 1

View: 9102

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 0 lines
HTML 23 lines
CSS 230 lines

ブログ記事用サンプルです。

これは簡単！ a要素にクラスを追加するだけでiPhone UIボタン

これは簡単！ 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> </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> </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; }

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>

QR Code