Android PHP デザインまとめ

android php を使ったプログラム等の書き方 phpで取得する

css3

【CSS3 - HTML5】 主要なブラウザ 対応状況一覧について

CSS3のプロパティ、セレクタ、HTML5のWebアプリケーション、コンテンツの埋め込み、フォーム 対応状況一覧について
HTML5 & CSS3 Checklist

対象ブラウザ
 Windows
  Chrome 25
  Firefox 15
  Opera 12
  IE6 - IE10
 Mac
  Chrome 25
  Firefox 20
  Opera 12  Opera15
  Safari 5.1 Safari6

CSS3の主要ブラウザの対応状況
CSS3 properties

CSS3 selectors

HTML5の主要ブラウザの対応状況
Web Applications

Embedded Content

Web Forms

にほんブログ村 IT技術ブログ 在宅プログラマーへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ IT技術情報へ

【css】ナビボタンなどで使うロールオーバー[CSS]

ナビゲーションなどで、マウスを画像などに載せた時に、画像が入れ替わったりする時の動作をCSSのみで作成する場合の確認をします。

サンプルはこちら

サンプル1) 1枚の画像でロールオーバーする

サンプル2) 2枚の画像でロールオーバー

にほんブログ村 IT技術ブログ 在宅プログラマーへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ IT技術情報へ

【css3】ベンダープレフィックス

CSSで各ブラウザに対応させる為に付ける
※ベンダープレフィックス無し(標準)を最後に記述すること

主要ブラウザのベンダープレフィックス
-moz-  ・・・ Firefox
-webkit- ・・・ Google Chrome、Safari
-o-    ・・・ Opera
-ms-   ・・・ Internet Explorer

書き方(css)
    -webkit-transition: All 0.8s ease;
    -moz-transition: All 0.8s ease;
    -o-transition: All 0.8s ease;
    -ms-transition: All 0.8s ease;
    transition: All 0.8s ease;   //ベンダープレフィックス無し(標準)も併記する
にほんブログ村 IT技術ブログ 在宅プログラマーへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ IT技術情報へ

【css3】アニメーション表現[transitions]

transitionとanimationの2種類がありますが、transitionについての確認をします。

transition・・・ transition効果を指定する場合に使用します。
サンプルはこちら

【まとめて記述】
 transitionプロパティでは、 transition-property、 transition-duration、 transition-timing-function、 transition-delay の各プロパティの値を、まとめて指定することができます。
 (例1)transition: All 0.8s ease 0;
 (例2)デフォルトなら記述しなくてもよい
    transition: All 0.8s ease;
 (例3)ベンダープレフィックスを付けた場合
    -webkit-transition: All 0.8s ease;
    -moz-transition: All 0.8s ease;
    -o-transition: All 0.8s ease;
    -ms-transition: All 0.8s ease;
    transition: All 0.8s ease;

【個別記述】
  1. アニメーションさせるCSSプロパティ(transition効果を適用するCSSプロパティ名を指定する)
    背景色・文字サイズ どこのCSSプロパティを変化させるか
    (例)transition-property: background;
  2. アニメーションしている時間の長さ
    AからBの状態に変化させる秒数
    (例)transition-duration:1.3s;
  3. アニメーションの速度変化(変化のタイミング・進行割合を指定する)
    始めは素早く動くけれども、変化の終盤はゆっくり動くなど、変化する過程にどう抑揚を付けるか
    (例)transition-timing-function:ease-out;
  4. アニメーションを開始するまでの時間(変化がいつ始まるかを指定する)
    マウスオーバなどのアクションがあってから、何秒経過してからアニメーションを始めるか
    (例)transition-delay:2.6s;

にほんブログ村 IT技術ブログ 在宅プログラマーへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ IT技術情報へ
スポンサードリンク









にほんブログ村 IT技術ブログへ
にほんブログ村

にほんブログ村 IT技術ブログ PHPへ
にほんブログ村

にほんブログ村 IT技術ブログ IT技術情報へ
にほんブログ村

QRコード
QRコード
  • ライブドアブログ