tweenerのtransitionの動きをサイト上で見れるページがあるのでメモ。
「easeOutSine」とか「easeInSine」とか言われても実際どんな動きするかわかんないので、このページ見ながら欲しい動き探すといいかも。グラフクリックするとラインが動いて動きわかるのもイイ！
Adobe Flashでイージング調整するときにもいい参考になる。
→Tweener Documentation
2010年11月5日金曜日
Transitionの動きが見れるサイトが便利
tweenerのtransitionの動きをサイト上で見れるページがあるのでメモ。
「easeOutSine」とか「easeInSine」とか言われても実際どんな動きするかわかんないので、このページ見ながら欲しい動き探すといいかも。グラフクリックするとラインが動いて動きわかるのもイイ！
Adobe Flashでイージング調整するときにもいい参考になる。
→Tweener Documentation
2010年11月4日木曜日
CSS3 text-shadowの使いかた
今回は文字に影（shadow）をつけるCSS3。
firefox, safari, Google Chromeで使える。
（-webkit, -moz はいらないみたい。）
box-shadowと同じような感じ。
（例）
text-shadow: 1px 1px 3px #000;
で右下に1pxづつずれて3pxのびた#333の影がつけられる。
box-shadow: [x軸] [y軸] [ぼかしの大きさ] [色] ;
,（カンマ）で複数の指定が可能。
text-shadow: 0px 0px 5px #cc0000, 3px 3px 6px #333;
で5pxの赤い影がついて、その下に右下に3ｐｘづつずれて6ｐｘのびた#333の影がつく。
参考サイト：CSS Lecture
firefox, safari, Google Chromeで使える。
（-webkit, -moz はいらないみたい。）
text-shadow sample1 - jsdo.it - share JavaScript, HTML5 and CSS
box-shadowと同じような感じ。
（例）
text-shadow: 1px 1px 3px #000;
で右下に1pxづつずれて3pxのびた#333の影がつけられる。
box-shadow: [x軸] [y軸] [ぼかしの大きさ] [色] ;
,（カンマ）で複数の指定が可能。
text-shadow: 0px 0px 5px #cc0000, 3px 3px 6px #333;
で5pxの赤い影がついて、その下に右下に3ｐｘづつずれて6ｐｘのびた#333の影がつく。
参考サイト：CSS Lecture
2010年11月3日水曜日
CSS3 box-shadowの指定方法
今回はボックス（div,p など）に影（shadow）をつけるCSS3。
firefox, safari, Google Chromeで動作。
下記はbox-shadowの例。
（例）
box-shadow: 5px 5px 10px #333;
で右下に5pxづつずれて10pxのびた#333の影がつけられる。
box-shadow: [x軸] [y軸] [ぼかしの大きさ] [色] ;
という感じ。
-（マイナス）の指定も可能。
もちろん影の色の変更も可能。
参考サイト：CSS Lecture
firefox, safari, Google Chromeで動作。
下記はbox-shadowの例。
box-shadow sample1 - jsdo.it - share JavaScript, HTML5 and CSS
（例）
box-shadow: 5px 5px 10px #333;
で右下に5pxづつずれて10pxのびた#333の影がつけられる。
box-shadow: [x軸] [y軸] [ぼかしの大きさ] [色] ;
という感じ。
-（マイナス）の指定も可能。
もちろん影の色の変更も可能。
参考サイト：CSS Lecture
2010年11月2日火曜日
CSS3 アニメーション（transition）の使い方
CSS3のお勉強。今回はアニメーション（transition）の指定方法の一例。
この記事内のサンプルはsafari, Google Chromeで動作。
下記はロールオーバーすると背景色が変化するというコード。
上記のコードは
-webkit-transition: background-color 1s linear;
と省略して書くこともできる。
-webkit-transition:[変化させる要素] [何秒] [変化するタイミング]
という感じ。
[変化させるタイミング]で指定できる値は
・default
・linear（一定のスピード）
・ease-in
・ease-out
・ease-in-out
・cubic-bezier() 4つの数字をカンマ区切りで指定
次に背景色と幅を変更したい場合は、
複数変化させる場合は ,(カンマ)をつかって複数しているすることもできる。というか[変化させる要素]もいらないみたい。動いた。
画面外に飛ばすこともできるみたいw
FlashみたいにタイムラインでアニメーションつくるSencha Animatorっていうのもあるけど、基本知りたかったのでコード書いてみた。
他にもいろいろできそうなのでもうちょっと調べよう。
参考サイト：CSS Lecture | CSS3 アニメーション（Transitions）の使用方法
この記事内のサンプルはsafari, Google Chromeで動作。
下記はロールオーバーすると背景色が変化するというコード。
transition sample1 - jsdo.it - share JavaScript, HTML5 and CSS
上記のコードは
-webkit-transition: background-color 1s linear;
と省略して書くこともできる。
-webkit-transition:[変化させる要素] [何秒] [変化するタイミング]
という感じ。
[変化させるタイミング]で指定できる値は
・default
・linear（一定のスピード）
・ease-in
・ease-out
・ease-in-out
・cubic-bezier() 4つの数字をカンマ区切りで指定
次に背景色と幅を変更したい場合は、
transition sample2 - jsdo.it - share JavaScript, HTML5 and CSS
複数変化させる場合は ,(カンマ)をつかって複数しているすることもできる。というか[変化させる要素]もいらないみたい。動いた。
transition sample3 - jsdo.it - share JavaScript, HTML5 and CSS
画面外に飛ばすこともできるみたいw
transition sample4 - jsdo.it - share JavaScript, HTML5 and CSS
FlashみたいにタイムラインでアニメーションつくるSencha Animatorっていうのもあるけど、基本知りたかったのでコード書いてみた。
他にもいろいろできそうなのでもうちょっと調べよう。
参考サイト：CSS Lecture | CSS3 アニメーション（Transitions）の使用方法
2010年11月1日月曜日
WindowsPhone7 Icon
UI Design and Interaction Guide for Windows Phone 7 v2.0.pdfに載ってるアプリケーションバーアイコンの一覧。シンプルだけどわかりやすくていい感じなアイコン。
Application Bar Icons should be clear, understandable, and leverage real- world metaphors that are familiar to users.
アプリケーションバーアイコンはユーザーにとって理解しやすいものにする必要があります、的なことが書いてあるのかな。
CSS3でつくるグラデーション
CSS3の勉強がしたかったのでブログのヘッダーにCSS3のgradientを使ってみた。
[css]
#header {
margin-bottom:0.6em;
padding: 4em 2em 2em ;
background: -moz-linear-gradient(top, #005eca, #0077ff);
background: -webkit-gradient(linear, left top, left bottom, from(#005eca), to(#0077ff));
}
[/css]
上記はヘッダーに指定しているCSSの一部。
backgroundが2つあるけど、上がFirefox用、下がsafari, Google Chrome用の記述。
IEは知らない（たぶんきかない）
要はブラウザごとに記述が違うということらしい。
上（#995eca）から下（#0077ff）に向かってグラデーションするみたい。
途中の色変えたりとかもできるみたいでいろいろとおもしろそお。
参考サイト：CSS Lecture | CSS3 グラデーション（gradient）の指定方法
[css]
#header {
margin-bottom:0.6em;
padding: 4em 2em 2em ;
background: -moz-linear-gradient(top, #005eca, #0077ff);
background: -webkit-gradient(linear, left top, left bottom, from(#005eca), to(#0077ff));
}
[/css]
上記はヘッダーに指定しているCSSの一部。
backgroundが2つあるけど、上がFirefox用、下がsafari, Google Chrome用の記述。
IEは知らない（たぶんきかない）
要はブラウザごとに記述が違うということらしい。
上（#995eca）から下（#0077ff）に向かってグラデーションするみたい。
途中の色変えたりとかもできるみたいでいろいろとおもしろそお。
参考サイト：CSS Lecture | CSS3 グラデーション（gradient）の指定方法
WindowsPhone7 Font Segoe
WindowsPhone7アプリの基本フォントはSegoe。
メイリオみたいな感じで、すっきりとした印象なフォント。
Regular, Bold, Semi-bold, Semi-light, Blackの5種類。
フォントファイルの入手は Design Templates for Windows Phone 7からダウンロードすることができる。（その他のデザインテンプレートPSDファイルと同梱のzipファイル）
Developers can embed their own fonts for use within their application, but they will only be available for use within that application.
引用元：UI Design and Interaction Guide for Windows Phone 7 v2.0.pdf
上記のように書いてあるけど、SegoeってWindowsPhone7アプリにしか使えないってことなのかな？？
登録:
投稿 (Atom)