CSS3
HTML5 Clear from Evan You on Vimeo.ソースコードはこちらで公開されています。 yyx990803/HTML5-Clear - GitHub https://github.com/yyx990803/HTML5-Clear 元のiPhoneアプリはこちら。 Clear for iPhone - Breathtakingly-simple todos for iPhone and iP…
Chrome、Safari対応。 CSS3-D Clock http://andrew-hoyer.com/experiments/clock/
Firefox 10で遂にFirefoxもCSS 3D Transformsに対応しました。これで未対応のメジャーブラウザはIEとOperaだけとなりました(まぁ、IEはまだ次の10で対応予定みたいですが)。 その為、以前作ったこのプログラムなんかも「Firefoxで動く様になるはずだ!!」と期…
prezi.comにインスパイアされて作られたライブラリみたいです。 data-x や data-y で表示位置を指定します。 <div id="bored" class="step slide" data-x="-1000" data-y="-1500"> data-rotate で回転、 data-scale で拡大率を変更します。 <div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5"> JSファイルはbodyの閉じタグの前に記述しておかないと正しく動作しない様なので注意し…</div></div>
どのサイトも様々な解像度のデバイスに上手く対応していますね。 Media Queries http://mediaqueri.es/
他のエフェクトはどんな実装してるか予想が付きますが円形が回転するエフェクトは実装方法が予想出来ませんでした。こちらのライブラリはオープンソースなので早速、ソースを確認してみると「角丸＋background-image」で実装されてました。うーん、CSS3使い…
Animated Buttons using CSS3 Transitions and Transforms http://webdesigncrowd.com/animated-buttons-css3-transitions-transforms/ デモページはこちら。Firefoxには対応していない様です。ChromeやSafariで見てください。 Custom jQuery Accordion http…
こちらのデモを現在サポートしてるブラウザはSafari 5かChrome 9。 Pure CSS animated 3D Super Mario Icon - An experiment by Andreas Jacob http://cordobo.com/wp-content/uploads/pure-css-animated-3d-super-mario/
Boxについているボタンをドラッグして操作し、変形を行います。するとその形に変形する為のCSS 2D Transformsの記述が画面の下部に表示されます。 Playing with matrices http://www.xs4all.nl/~peterned/matrices/ 関連情報 Using CSS transforms - MDC Doc…
CSSアニメーションではアニメーションに緩急を付ける事が出来ます。例えば右から左に移動をさせるアニメーションを作った場合、同じ速度で移動する事も可能ですが「最初はゆっくり加速して終わり近くになったらゆっくり減速させる」「最初に急加速して終わり…
Togetter - 「みんなにいじめられた、あるiPhone開発者」 http://togetter.com/li/13221 このまとめでよく分かる様にみんなにいじめられイジられる、iPhone開発者の世界でのアイドルの様な存在の方がおられます。その id:paella 氏がこの度、fladdictさんが…
「第 0 回 HTML5 プログラミング&クリエイティブ・コンテスト」に応募したけど選ばれなかった作品を公開します。 「第 0 回 HTML5 プログラミング&クリエイティブ・コンテスト」のお知らせ - Google Japan Developer Relations Blog http://googledevjp.blog…
こちらのサイトで解説されています。 How To Create 3D Text using CSS3 | CSSReX http://www.cssrex.com/tips-tricks/how-to-create-3d-text-using-css3/ CSS3での実装なのでもちろん、日本語のテキストでもOKです。 Webフォントを使ったテキストにも適用可…
3D Molecules on the iPad from jackadam on Vimeo.CSSで処理すればiPadでもこんなスムーズな動きをする3D表現が出来るんですね。 3D Rotating Molecules on the iPhone/iPad | jackadamblog http://blog.jackadam.net/2010/3d-rotating-molecules-on-the-ip…
まぁ、そりゃ作っているよね。と予想していた人も多いでしょうがついにAdobeがHTML5環境向け(正確にはCSS3+JavaScriptだと思いますが)のアニメーション作成ツールを作成中で有ることがAdobe MAX 2010で話されました。Flashの様にタイムラインベースでアニメ…
英語のサイトですが図やソースコード中心で解説して有り、英語が読めなくても何とかなる感じです。 というか英語より、3Dの知識が多少有った方が理解し易いかも？。 Understanding CSS 3D Transforms 1 | eleqtriq http://www.eleqtriq.com/2010/05/understa…
Ultimate CSS Gradient Generator - ColorZilla.com http://www.colorzilla.com/gradient-editor/
Google DevFest Bangkok 2010のHTML5のスライド。以下のページにHTML5やCSS3、WebGLなどについての解説されているスライドがこちらにアップされています。HTML5製でWebGLを有効にしたChromeで観るのが一番良いみたいです。 HTML5 Tech Talk http://kurrik-sl…
以下のサイトで確認できます。 When can I use... http://caniuse.com/ それぞれのブラウザでサポートしているバージョンは「黄緑色」、サポートしていないバージョンは「赤色」と分けられていてサポート状態をブラウザ＋バージョンで一望できる便利な画面構…
GIZMODE(ギズモード)がエイプリルフールネタとしてこの様な文字＆画像の反転ネタをやってました。 ギズモード・ジャパン http://gizmodo.jp/ これは面白い!!と自分でもちょっと似たようなネタを考えてみました。対応ブラウザは最近バージョンのFirefoxとSafa…
このサンプルの動作確認済み環境。 マシン 環境 iPhone iPhone OS 3.1.2に付属のSafari Mac Safari 4.0.4 基本的には前回紹介した「自動的に3D回転(3D Transforms)をさせ続ける」サンプルと同様の事を行っています。 自動的に3D回転(3D Transforms)をさせ続…
このサンプルの動作確認済み環境。 マシン 環境 iPhone iPhone OS 3.1.2に付属のSafari Mac Safari 4.0.4 以前、3D回転の解説を行いました。このときのサンプルはマウスでのクリックをトリガーに回転を行うというものでした。 3D回転(3D Transforms) - 強火…
前回、3D回転(3D Transforms)についての話をしましたがこちらの回転軸の位置関係が一般的なものとちょっと変わってるのでこの辺りについて解説をしてきます。 3D回転(3D Transforms) - 強火で進め http://d.hatena.ne.jp/nakamura001/20100125/1264444424 ro…
このサンプルの動作確認済み環境。 マシン 環境 iPhone iPhone OS 3.1.2に付属のSafari Mac Safari 4.0.4 基本設定 CSS -webkit-transform-style: preserve-3d; /* 3D表現使用する */ -webkit-perspective: 100; /* パース(遠近感)の設定 */ -webkit-transit…
iPhoneのSafariでCover Flowを行う事ができるライブラリcss-vfxを使ってみました。 css-vfx - Project Hosting on Google Code http://code.google.com/p/css-vfx/ 実行するとこの様に動作します。 付属のサンプルではFlickr APIを使ってFlickrから画像ファ…
このサンプルの動作確認済み環境。 マシン 環境 iPhone iPhone OS 3.1.2に付属のSafari Mac Safari 4.0.4 角丸 .sample1 { -webkit-border-radius: 10px; } 設定する値は「角丸の半径のサイズ」になります。 角丸+影 .sample2 { -webkit-border-radius: 10px…
このサンプルの動作確認済み環境。 マシン 環境 iPhone iPhone OS 3.1.2に付属のSafari Mac Safari 4.0.4 サンプルの主な部分。 <style type="text/css"> .sample { background-color: #000000; top: 5px; left: 5px; width: 70px; height: 70px; -webkit-transform: rotate(0deg); …
このサンプルの動作確認済み環境。 マシン 環境 iPhone iPhone OS 3.1.2に付属のSafari Mac Safari 4.0.4 サンプルの主な部分。 <style type="text/css"> .sample { background-color: #000000; top: 5px; left: 5px; width: 70px; height: 70px; -webkit-transform: rotate(0deg); …
