[JS]HTML5 Canvasを使って、画像にさまざまなエフェクトを与えるスクリプト -CamanJS
デモページ これらのエフェクトの種類は数多く用意されていますが、独自のプラグインを作成して使用することも可能です。 詳しくは、ドキュメントを参照ください。 CamanJS Document Creating a Plugin [ad#ad-2] CamanJSの実装 「caman.full.min.js」を外部ファイルとして記述し、下記のようにスクリプトを記述します。 <script type="text/javascript"> Caman("images/example-image.jpg", "#example-canvas", function () { this .saturation(20) .gamma(1.4) .vintage() .contrast(5) .exposure(15) .vignette(300, 60) .render(); }); </script>
サーバー不要で保存できる「Web Storage」の使い方 (1/5)
HTML5とともにW3Cで標準化が進められているDOM APIの1つに「Web Storage」があります。Web StorageはCookieと同様にローカルディスク上にデータを保存する機能で、Cookieに比べて「有効期限がない」「データサイズの制限がない」といった特徴があります。ローカル上に永続的にデータを保存できるので、フォームの入力内容の保存やゲームのプレイ履歴の記録、各種サービスの状態保存など、などさまざまな用途に利用できます。 Web Storageにはローカルストレージとセッションストレージがあり、永続的にデータを保存する場合はローカルストレージを、ブラウザーを開いている間の一時的な保存であればセッションストレージを使います。ローカルストレージ、セッションストレージとも同じメソッドを持ち、記述方法に違いはありません。 今回のJavaScriptラボは、HTMLフォームに入力
Safari 3.1 に実装された「Client-side database storage (SQL API)」とは何か？ - IT戦記
はじめに Safari 3.1 には Client-side database storage （SQL API とも呼ばれています。）という新しい仕様が実装されました。 というわけで、この新しい API について色々調べたことを簡単にまとめておきます。 Client-side database storage が使えるブラウザ 2008 年 03 月 27 日現在では、 Safari 系のブラウザのみです。 Safari 3.1 WebKit Nightly Client-side database storage とは Selectors API とは HTML5 で定義された仕様です。詳細に関してはこちらをどうぞ。 簡単に説明すると JavaScript 内でリレーショナルデータベースを使えるということです。 もっと簡単にイメージするために、実際のコードを示すとこんな感じです。 va
JavaScriptで並列処理ができる「Web Workers」 (1/5)
HTML 4時代のJavaScriptは主にWebページの装飾に使われていたので、マシンやブラウザーへの負担はそれほど高くなく、JavaScriptの処理にユーザーが待たされることはほとんどありませんでした。ところが「Webアプリケーションのプラットフォーム」と位置付けられるHTML5時代になると、JavaScriptのプログラムは巨大で複雑になります。そのため、各ブラウザーベンダーはJavaScriptエンジンを高速化し、複雑で時間のかかる処理を素早くこなせるように努力してきました。 しかし、いくら高速化しても回避できないこともあります。従来のJavaScriptはJavaのようなスレッド処理ができないので、時間のかかる処理を実行するとブラウザーが停止状態になってしまい、その間、ユーザーはUI操作がまったくできなくなる問題がありました。 そこで、ブラウザーで複数の処理を並行して実行させる
HTML5のcache manifest（キャッシュマニフェスト）を導入してみよう！ | HOPS Laboratory
ホップスの辻です。今回はキャッシュマニフェストをご紹介します。 キャッシュマニフェストを使うと、ローカル上（自分のパソコン）にファイル（htmlやjpg等）をキャッシュできます。 通常のブラウザのキャッシュの最強版みたいな感じです。 キャッシュマニフェストを使用しているサイトなら、初回アクセス時にはキャッシュ（ローカルに保存）をし、次からはローカルからファイルを見るので高速化が期待できます。 さあ、早速使ってみよう！ まずは確認用のブラウザを準備しましょう。 2010年6月29日段階では以下のブラウザで使用できます。必要に応じてダウンロードしましょう。 １）Firefox 3.6.6 [ダウンロード先] ２）Safari 5.0 [ダウンロード先] ３）Google Chrome [ダウンロード先] マニフェストファイルを作る キャッシュマニフェストを使う場合には「好きな名前.mani
HTML5+CSS3で実装された、さまざまなUIエレメントのコレクション
パラグラフ・リスト・見出しなど [ad#ad-2] UIパーツの使い方 下記の3つのステップで、これらのUIを自分のページで利用できます。 IEへの対応 IEにHTML5を理解させるために、2つの重要なファイルを使用します。 <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" href="ie.css" type="text/css" /> <![endif]--> CSSのインクルード スタイルシートファイルをインクルードしてください。もし使用するエレメントが限られているのであれば、その箇所のみで大丈夫です。 <link rel="stylesheet" href="reset.css"
[CSS]今、そして近い将来に使用するであろうスタイルシートのテクニック集
CSS3のテクニックはさまざまなものがありますが、その中からまさに今、そして次のプロジェクトに使用したくなるテクニックを紹介します。 The Bright (Near) Future of CSS [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 はじめに Styling HTML5 Classing like HTML5 Media Queries Styling Occasional Children Styling Occasional Columns RGB Alpha Color HSL and HSL Alpha Color Shadowy Styles Multiple Backgrounds 2D Transforms はじめに ここでフォーカスするのは、今、そして近い将来に使用するであろうスタイリングのテクニックです。HTML5の要素のスタイリング
CSS3・HTML5のブラウザ対応状況一覧 – creamu
Deep Blue Skyというサイトで、CSS3・HTML5のブラウザ対応状況一覧がまとまっています。 自分のブラウザのCSS3・HTML5対応状況を調べてくれるjavascriptライブラリ、Modernizrを使って調べたようですね。 ↑はMac Firefox3.5。ちょっと残念な感じですね。。 対応状況は以下のようになっています。 Internet Explorer 6, 7 & 8 Firefox 3.5 (Win) Google Chrome (Win) Opera 10 (Win) Safari 4 (Win) Safari 4が一番優れていますね。IEがひどいことになっている。。。 詳しくは以下からどうぞ。 Browser support for CSS3 and HTML5 姉妹サイトである以下のサイトでは、自分のブラウザの対応状況が見られます。IPとかも調べられますよ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5の勉強に役立つチートシートやリファレンスのまとめ