HTML5/CSS3のニュースやTIPSなどのまとめ (2012年6月24日)

ニュース

イベント・セミナー

HTML5とか勉強会番外編 - ブラウザとサーバの間を考えよう

http://html5j.komasshu.info/ya31st.html

https://groups.google.com/forum/?hl=ja%3D8307499583e010a6&fromgroups#!topic/html5-developers-jp/QOB-0g0ugW0

2012/7/5(木) 19:15-22:00、NTTコミュニケーションズ (港区芝浦)、会費 1,500円

Adobe Creative SuiteではじまるHTML5の民主化 (SlideShare)

http://www.slideshare.net/otachan/adobe-creative-suitehtml5

6/1に行われた「Creators Night vol.5 Adobe次世代セミナー＠沖縄」のプレゼン資料。

サイト・アプリ

EXILIM 10th Anniversary (CASIO)

http://casio.jp/dc/sp/10th/

カシオのデジカメ「EXILIM」の10周年記念サイトがHTML5で作られている。流行りのスクロールで見せるパララックスな作り。

SKiD Racer

https://skid.gamagio.com/play/

WebGLで作られたカーレースのゲーム。Google (かFacebook?) のアカウント必須 (英語)

大手広告代理店「電通」もHTML5を使ったページ遷移の無いタイプのホームページを採用 (Html5 Collect)

http://jp.html5collect.net/%e5%a4%a7%e6%89%8b%e5%ba%83%e5%91%8a%e4%bb%a3%e7%90%86%e5%ba%97%e3%80%8e%e9%9b%bb%e9%80%9a%e3%80%8f%e3%82%82html5%e3%82%92%e4%bd%bf%e3%81%a3/

http://dentsunetwork.com/#/today

GoodReader for iPadがアップデートでHTML5ビデオがダウンロード可能に (AppBank)

http://www.appbank.net/2012/06/22/ipad/431309.php

http://bit.ly/PMU9YM

ツール

Introducing Gladius 0.2 (Mozilla Labs)

http://blog.mozilla.org/labs/2012/06/introducing-gladius-0-2/

http://dothtml5.com/archives/20111006_gladius.html

モジラ製のゲームエンジン「Gladius」がv0.2に (英語)

TIPS

3D Audio (PlayCanvas)

http://apps.playcanvas.com/dave/tutorials/3d_audio

Web Audio APIとWebGLのデモ。3Dのオブジェクトの動きに合わせてサウンドも大きくなったり左右にバランスを変えたり (英語)

HTML5 Web Storageの使い方 (Web/DBプログラミング徹底解説)

http://keicode.com/script/html5-webstorage.php

HTML5 オフラインWebアプリケーションとキャッシュマニフェスト (Web/DBプログラミング徹底解説)

http://keicode.com/script/html5-cache.php

CSS3

CSS3 Iron Man (Mozilla Developer Network)

https://developer.mozilla.org/ja/demosdetail/css3-iron-man/launch

CSS3で作られたアイロンマン。なんか違う。。 (英語)

CSS3でシャレオツなリストを作るチュートリアル (phpspot開発日誌)

http://phpspot.org/blog/archives/2012/06/css3_50.html

http://www.red-team-design.com/css3-ordered-list-styles

[CSS3] GradientFinder - グラデーション画像からCSSを生成するジェネレーター (mBlog)

http://mantiddesign.com/archives/12310

http://gradientfinder.com/

http://coliss.com/articles/web-services/online-css3-gradients-code-gradientfinder.html

[Tutorial] How to Create Calendar using jQuery and CSS3 (DesignModo)

http://designmodo.com/calendar-jquery-css3/

CSS3+jQueryでカレンダーを作るチュートリアル (英語)

Quick Tip - Make a Full Screen Image Background With a Line of CSS (Tutorialzine)

http://tutorialzine.com/2012/06/quick-tip-fullscreen-backgrounds/

http://demo.tutorialzine.com/2012/06/quick-tip-fullscreen-backgrounds/

全画面背景の background-size: の Contain; と cover; について (英語)

SVG

SVG clipPath's (Sawyer Hollenshead)

http://labs.sawyerhollenshead.com/lab/svg-clippath/

http://sawyerhollenshead.com/writing/23/using-svg-clippath/

SVGで作られた六角形の画像が重なったナビゲーション (英語)

sie用のインラインsvg表示スクリプトを作ってみた (ゲームミュージックと生存確認をかねた画期的な)

http://defghi1977-onblog.blogspot.jp/2012/06/siesvg.html

（＊価格は掲載時のものです。購入時にご確認ください。）