Más contenido relacionado
La actualidad más candente (20)
Similar a Firefox OSアプリ 「ModeView」 (20)
Firefox OSアプリ 「ModeView」
- 3. Firefox OSとは
アプリケーションはすべて
Web標準技術(HTMLベース)のみで開発するOS
よくわからない方は先に、今回のイベントページをどうぞ!
http://designers-hack.net/event/004firefoxos/
今回はハッカソンなのに、たった一人でつくってみました
- 4. ホーム Blenderでつくったモデルを指定
- 13. サムネイル群は最初見えない状態
<div id="models" class="picker">
<!-- モデル変更用サムネイルをli要素で -->
</div>
<div id="bgColor" class="picker">
<!-- 背景色変更用サムネイルをli要素で -->
</div>
<div id="lightColor" class="picker">
<!-- 照明色変更用サムネイルをli要素で -->
</div>
/* CSS */
.picker {
position: absolute;
bottom: -200px;
opacity: 0;
-moz-transition: .3s;
サムネイルを含むdivはすべて
この辺りに…⋯
…⋯
}
- 14. 表示させたいパネルのdiv要素にだけ
クラス名「activePanel」をつける
<div id="models" class="picker">
<!-- モデル変更用サムネイルをli要素で -->
</div>
<div id="bgColor" class="picker">
<!-- 背景色変更用サムネイルをli要素で -->
</div>
<div id="lightColor" class="picker
activePanel">
<!-- 照明色変更用サムネイルをli要素で -->
</div>
/* CSS */
.activePanel {
bottom: 80px;
opacity: 1;
CSSによる動き }
この場合div#lightColorにクラスがついたので、bottomとopacityが
Transitonsにより変動してアニメーションする
- 15. つまりCSSクラスactivePanelがついた
divだけがアニメーション表示される
<div id="models" class="picker">
<!-- モデル変更用サムネイルをli要素で -->
</div>
<div id="bgColor" class="picker">
<!-- 背景色変更用サムネイルをli要素で -->
</div>
<div id="lightColor" class="picker
activePanel">
<!-- 照明色変更用サムネイルをli要素で -->
</div>
#lightColorにだけactivePanelクラスが
ついた状態をしめす
↓
CSSによる動き
#lightColorがせり上がってくる
また消すときは、クラスを外すだけでOK、「下ろすアニメーション」は書く必要はない
- 17. LESSは知り尽くさなくても、変数だけ理解するだけでもとても助かる。
なぜならボタンサイズなど、共通の値で設計(デザイン)するケースが
UIデザインの世界では多いから、何度もブラッシュアップするのに役立つ。
共通の値が多いので変数を使用
CSS
@btnSize: 30px;
.closeBtn { .closeBtn {
background: #F00; background: #F00;
width: @btnSize; width: 30px;
height: @btnSize; height: 30px;
border-radius: @btnSize; border-radius: 30px;
color: white; color: white;
position: absolute; position: absolute;
right: @btnSize / 2; right: 15px;
top: -@btnSize / 2; top: -15px;
text-align: center; text-align: center;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
} }