- 2010-09-15 (水) 11:44
- CSS
JAMのお題がボタンと聞いて思い浮かんだネタの中で一番汎用性ありそうだった自爆ボタンをMooTools用プラグインとして作ってみた。
勢いのままFirefoxでガッと組んだので他のブラウザは順次対応予定です…。
Webkitも見れるようにした。※Chromeはバグで角が四角くなる。
自爆ボタン - jsdo.it - share JavaScript, HTML5 and CSS
JavaScriptで要素を作成して制御、見た目は全てCSS。
Canvasじゃないのはその方がデザイン変えやすいかなと思ったのと、CSS3が使いたかったからです。
ストライプ部分にだけbase64化した画像使っています。
爆破までは ピン上げる→カバー外す→ボタン押す っていう流れです。
カバー外すとonReadyイベントを、ボタン押した時にonStartイベントが実行されます。
覚え書き
骸骨マークについて
GeckoとOperaはUnicodeでWebkitやIEはWingdingsです。
Unicodeの骸骨
☠
Wingdingsの骸骨
N
Unicodeの絵は言語によって変わるらしいので、マーク部分にlang属性でenを指定。
↑この髑髏をFirefoxやOperaで見るとカッコイイ感じになってると思う。
WingdingsはフォントなのでPCにインストールされていないとNになってしまう罠。
完全に二極化しているからフォントでやれなくはないけど、画像使う方が無難かなあという気がしてきます。
参考：Wingdings character set and equivalent Unicode characters
擬似要素レイヤー
gradientで見た目を作るに当たって、作成しているDivだけじゃ全然足りないので
:beforeと:afterを使って要素を増やす。これはCSS3のボタンでよく使われてる手法。
単純な例
-
div{
-
position:relative;
-
width:30px;
-
height:30px;
-
}
-
-
div:before{
-
content:"";
-
display:block;
-
position:absolute;
-
top:0;
-
left:0;
-
width:30px;
-
height:30px;
-
z-index:1;
-
}
-
-
div:after{
-
content:"";
-
display:block;
-
position:absolute;
-
top:0;
-
left:0;
-
width:30px;
-
height:30px;
-
z-index:2;
-
}
