rainyday.js
About The idea behind rainyday.js is to create a JavaScript library that makes use of the HTML5 canvas to render an animation of raindrops falling on a glass surface. Simple enough, right? Have a look at the demos to see it in action. Features rainyday.js features extendable API, collision detection and is easy to extend with your own implementations of different animation components. Cross-browse
HTML iOS Notifications
iOS-style notifications implemented with CSS3 and JavaScript. Read the blog post or alternatively download or log issues on the GitHub repository. A Quick Demo Default Message Demo // default example ios.notify(); // an example message ios.notify({ title: "Michael Bluth", message: "It's as plain as the Ann on egg's face." }); Parameter Default Expects
タイルレイアウトjsIsotope
Install Download isotope.pkgd.js un-minified, or isotope.pkgd.min.js minified CDN Link directly to unpkg. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script> <!-- or --> <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> Package managers Install with npm: npm install isotope-layout Install with Bower: bower install isotope-layout --save
CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ
前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー（colorプロパティ）にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体
Demo: Pure CSS speech bubbles – Nicolas Gallagher
By Nicolas Gallagher The demo page for Pure CSS speech bubbles. For a detailed explanation view the CSS file. It is heavily commented. All examples use simple, semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images (apart from that Twitter logo). Have a look at the source code. The basic bubble variants This only needs one HTML element. For example, <p>[text]</p>
HTML5時代の広告を考えた：HTML5でソーダ – Tender Surrender
ちょっと前になりますが、ThinkMobile2011というイベント向けに制作したHTML5製ソーダ缶のデモをご紹介します。 担当の方から、広告主向けにHTML5を使ったスマートフォン広告の新しい形を紹介したいので、何かアイディアはないかと依頼を受けました。技術的にHTML5の何かを使った広告を作ること自体は難しくないかもしれませんが、イベントのデモとして見せるということで、ある程度の派手さとHTML5ならではという部分のわかりやすさが要求されたため、アイディア出しそのものに最も時間を割きました。 コンセプト ネイティブアプリケーションにできてウェブアプリケーションにできないことはまだまだ多いですが、いかにネイティブアプリケーションに近づけるか、という部分がHTML5の醍醐味でもあります。逆にウェブアプリケーションのネイティブアプリケーションに対するアドバンテージに、インストール無しでさら
CSS 3D Slideshow
With 3D effects. And stuff. This is old, check out the new version! Heads Up This requires a browser with support for CSS3 3D transforms, such as Mobile Safari. Vertical Slides Slides can be nested inside of other slides, try pressing down. Basement Level 1 Press down or up to navigate. Basement Level 2 This is totally the Google logo: Basement Level 3 That's it, time to go back up. Marvelous Unor
Xlune::Blog
可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる（？）ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008
Canvasを使ったグロー効果が幻想的!!HTML5/Videoタグ用jQuery Plugin | ゆっくりと…
新年、明けましておめでとうございます。旧年中、このブログ読んで下さった方々、お世話になりました。今年もがんばりますので、よろしくお願いします 😀 。 新年一発目のお題は、Philips 社 の TV に装備された Ambilight を模した jQuery Plugin の紹介です。このギミック、日本ではほとんど馴染みがないと思いますが、液晶 TV の背面外周に取り付けられた LED が画面に合わせた色に発光し、映画館の環境 （アンビエント） 光の雰囲気を演出するというものです。 デモ & スクリプト CodeZine さんの 「HTML5で実現できるマルチメディア系機能 – ここが違う！サンプルで見るHTML5（4）」 で紹介されていた デモ を辿って、セルゲイさんのエントリー 「Ambilight for the tag video」 に行き着きました。Firefox 3.5、Ope
HTML5 + JavaScript で動作するモックアップアプリ「jMockups」 - everything might happen tomorrow - yhass - builder by ZDNet Japan
JavaScript でここまで出来るのか！と驚かされる Web アプリケーションをときどき見かけますが、最近みてすごいなと思ったのが jMockupsです。その名のとおり JavaScript で動作する軽快なモックアップアプリ。ドラッグ&ドロップ形式で要素を自由に配置することが出来ます (デモはこちらから)。HTMLやCSSの知識がなくても直感的にレイアウトを組むことが出来るのが最大の魅力です。スナップ機能もあるので、あるオブジェクトと揃えたり、同じ大きさにするといった作業を容易にできます。また、グリッド表示も可能なのでグリッドレイアウトでモックアップをつくりたい場合に便利です。 制作したすべてのモックアップにはユニークな URL が用意されているので、他の方にモックアップを見せることができます。パスワード保護も出来ますし、共有した相手は観覧だけでなくコメントも残せるようになっています
CSS3 PIE: CSS3 decorations for IE
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. Try the Demo This quick demo shows just a few of the CSS3 properties PIE can render. Use the controls to adjust the CSS3 applied to the box. Load this page in IE to see that it is rendered properly!
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebGL cars (dynamic cubemap reflections)
HTML5 Video Destruction
Ambilight