CSS3で簡単にページ切替を追加できる「Animsition」

フェードアウト、インでページ切り替えをしたりその他色々なトランジションで切り替えできる。ちょっと動きを追加したい時や動きに合わせた表現方法も考えられるかも。

◯サポートブラウザ
モダンブラウザとIE10以上

◯リンク

A simple and easy jQuery plugin used to add page transition on css animations.

クオリティの高い商用フリーWEBフォント+フォントまとめ

Google web fonts

日本語フォント

Noto Sans Japanese

M+ OUTLINE FONTS

セリフ体

Lusitana

EB Garamond

Gravitas One

Great Vibes

ゴシック体

Raleway

Quicksand

Questrial

Lato

Montserrat

Arvo

Roboto

参考サイト

Webフォントをできるだけ軽く表示する圧縮の.htaccessや遅延ロードJSを作ってみた

[CSS3]使ったら面白いかもマウスジェスチャーで動くアニメーション

[CSS]重なった複数のパネルを扇状にアニメーションで優雅に開くスタイルシートのテクニック

demo

[JS]このホバーエフェクト楽しい！シールのようにぺらっとめくるスクリプト -Sticker.js

demo

ダイナミックなアニメーション、フルスクリーン対応のスライダーを実装する(jQuery+CSS3)

ダイナミックなアニメーション、フルスクリーン対応のスライダーを実装する(jQuery+CSS3)
<参考サイト>
 http://coliss.com/articles/build-websites/operation/work/tutorial-fullscreen-slit-slider-by-codrops.html
<元サイト>
http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/

IE6/7/8をCSS3対応にする 「CSS3 PIE」

CSS3 PIEの使い方
(1)CSS3 PIEからファイルをダウンロード。
(2)ファイルの中にあるPIE.htcだけを任意のホームページサーバーディレクトリに
入れる。（ドメイン直下とか）
(3)CSSに以下のように記述する。
#css3box{ padding:15px; background:#ff907f; -webkit-border-bottom-right-radius:5px; /*Webkit系のブラウザで右下に半径5pxの角丸*/ -webkit-border-bottom-left-radius:5px; /*Webkit系のブラウザで左下に半径5pxの角丸*/ -moz-border-radius-bottomright:5px; /*firefox12以降で右下に半径5pxの角丸*/ -moz-border-radius-bottomleft:5px; /*firefox12以降で左下に半径5pxの角丸*/ border-radius:0 0 5px 5px; /*普通のCSS3 左右下に半径5pxの角丸*/ -pie-border-radius:0 0 5px 5px; /*IE8以降で左右下に半径5pxの角丸*/ behavior: url(PIE.htc); /*PIEの読み込み、角丸を適用するファイルからの相対パスで記述*/ }

(4)完了、注意点は「PIE.htc」のパスは角丸を効かせるhtmlまでのパスを
書く事。また-pie-border-radius:0 0 0 0;はPIEのジェネレーターでは出てこない,
左上から時計回りに4つの角丸を指定出来る。

(5)バグに関して
radiusを効かせている要素がIEで消えるバグがあったが
この要素のCSSの最初にpositon:relative;を効かせたら直った。
以下にバグ解決の参考サイトを載せる。

「CSS3 PIE」参考サイト
・コリス
・「IEの角丸を一行で指定出来る」参考サイト
・Firefox 13 リリース、接頭辞　-moz-border-radius* と -moz-box-shadow のサポート終了
・CSS3 PIE」がうまく動かなかった時の対処法

HTML5×CSS3の実装で抑えておくべきこと。

html5についてまとめ

『ie9.js』『html5.js』について
http://shoonm.com/2010/03/html5css3.html
IE6、7のバグに対しても有効なjsの解説。
『ie9.js』はかなり使えるらしい！！

  

HTML5 初期テンプレート
http://blog.asial.co.jp/856 

HTML5 テンプレート参考
http://yoppa.org/taumedia10/1695.html 


HTML5タグリファレンス
http://www.html5.jp/html5doctor/aside-revisited.html