『アニメPNG画像 JavaScriptとCSSを使った疑似アニメーション画像の作り方』
かぜなどいじでもひくものか こんにちは、たすくです。 先日、家で背景画像付きのGoogleの検索トップを見ていて、 ちょっと気になったことが。 なんだこれ？なんか動いてる。 「クリックすると今日のDoodle（ホリデーロゴ）を表示します」だそうです。 どんな風にやってるんだろう、と思ってCSSを調べたら・・・ （※↓長すぎるので小さくしています。実際は28px×2856px。） 長いパラパラマンガだ！ Firebugを見てみると、CSSの数字が増えたり減ったりしてる。 要するに、CSSの背景画像の位置をいじって、 疑似アニメーション画像を作ってるみたいな感じだとわかったわけです。 難読化されてるJSを読む気はしなかったので、自分で作ってみることにしました。 縦長のpng画像 (50px×400px) 参考までに、アニメgifでも書き出してみた。（50px×50px） CSS #hoge{
スマフォのHTML5環境向けに作られたjQueryライクな軽量フレームワーク・jQ.Mobiの日本語サンプル作った - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 なかなか良さそうだったので備忘録。iOSやAndroidなど、スマートフォンでのHTML5環境に合わせて作られた軽量モバイルフレームワークです。jQuery互換なので慣れてる方は使い方もすぐに覚えられると思います。特に軽量なのが嬉しいですね。 現状、jQueryを使うのであればスマートフォンにはjQuery Mobileという選択肢となりますが、やはりファイルサイズが気になります。そこで、jQueryをなんとか軽量に使おう、という動きが少し目立ってきました。 例えばzepto.js。がそうですし、jquipという、目的に合わせてjQueryを細分、モジュール化するライブラリなどもあります。 jQ.Mobiもその一つで、jQueryっぽく使えるHTML5環境のスマート
2011年の中から選ばれた開発者のためのWEB開発リソース50選
2011年も多くのWEB開発のためのリソースが公開され、開発者を助けてくれました。今回紹介するのは2011年に公開された中から選ばれた開発者のためのWEB開発リソース50個、紹介する「Our 50 Favorite Web Developers Resources and Tools from 2011」です。 Less Framework 4 CSSのフレームワークから、便利なjsライブラリ、オンラインツールなどなど、それぞれのジャンルで選びぬかれた50ものリソースがまとめられています。今回はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 Sencha CSS3 Animator & HTML5 Animations スマートフォンのフレームワークでも有名なSenchaからリリースされて入るCSS3とHTML5をタイムラインで編集できるツール CSS
HTML5+CSS3の導入時に役立つ7つの設定
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 １．HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
Webデザイナー・開発者向けの３２個のチートシート集まとめてみた。
デザイナー向けのチートシートまとめ カラーシート Color Combination Cheat Sheet さまざまな色の基本原則がわかるカラーチートシートです。 使いたい色を直感的に選んで、その色のコードを調べることができます。 オンラインシートなので、ブックマークに保存しておくとすぐに調べられます！ Web Designer Color Reference Hexagon Mouse Pad Webデザイナー向けのカラーチートシートです。 拡大するとそれぞれのカラーのコードがわかります。 色彩バランスを把握しやすいので、デザイン時に重宝します。 ウェブ制作者向けのチートシートまとめ HTMLのチートシート HTML5タグ★チートシート HTML5のチートシートです。 かなり詳細にまとめられているので、辞書のように使うこともできます。 印刷して参照するのが向いているので、すぐに確認で
HTML5製のスーパーマリオブラザーズ·Mario HTML5 MOONGIFT
Mario HTML5はHTML5で作られたWebベースのスーパーマリオブラザーズ。効果音も出る。 Mario HTML5はHTML5/JavaScript製のフリーウェア（ソースコードは公開されている）。ファミコン世代であれば誰しもが一度は遊んだことがあるであろうゲームがスーパーマリオブラザーズだ。2はディスクシステムだったのであまり遊んでいないが、3はアイテムもゲーム要素も増えて良く遊んだ覚えがある。 ゲーム中の画面 年月は流れど、スーパーマリオブラザーズの魅力は決して色あせることがない。キャラクターは今も任天堂ゲーム機の主役であり続ける。さらに面白いのは、Webブラウザの中で再現してしまったのがMario HTML5だ。 Mario HTML5は以前紹介したWebブラウザベースのスーパーマリオブラザーズ「Infinite Mario Bros」をHTML5/JavaScriptにポー
ブラウザ上でカッコいいメニューを作れる「Menu Maker CSS3」:phpspot開発日誌
JavaScript - Menu Maker CSS3 jQuery - CodeCanyon ブラウザ上でカッコいいメニューを作れる「Menu Maker CSS3」 次のような検索窓つきのメニューをブラウザ上でパラメータ調整するだけで作れちゃう仕組みです。 jQueryプラグインベースのメニューが作れます。有料＄４ですが、なかなか面白い仕組みだったのでご紹介です。 作成画面 関連エントリ 超カッコいい確認ダイアログをjQueryで実装するチュートリアル jQueryを使ったアニメーションする投票グラフを作るチュートリアル 古いブラウザも考慮した角丸実装jQueryプラグイン「DivCorners」
IEでHTML5やCSS3に対応させる、html5.jsとie9.js
HTML5×CSS3の実装で抑えておくべきこと (シャンディ・ガフを飲みながら) Internet Explorer 6から8でHTML5の新要素を使えるようにする「html5.js」と、Internet Explorer 5.5から9でCSS3の互換性を向上させる「ie9.js」が紹介されています。 以下のように呼び出すようです。 <!--[if lte IE 8]> <script src="html5.js" type="text/javascript"></script> <script src="ie9.js" type="text/javascript"></script> <![endif]-->
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで高度な3D表現ができると話題の「Sprite3D.js」で作った凄いデモ
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Reconnect Your Domain | Wix.com
http://inputxoutput.com/css-sprites%E3%81%A8css%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A7%E3%82%B3%E3%83%9E%E3%82%A2%E3%83%8B%E3%83%A1%E3%82%92%E4%BD%9C%E3%82%8B/
CSS Nite LP9 - CSS3 FOR TOMORROW - CSSアニメーション