[JS]自分仕様のかなりかっこいいローディング用アニメーションを生成できる -Sonic Creator
かっこいいデザインのローディング用アニメーションのCanvas版、アニメーションGIF版、CSSスプライトPNG版を同時に作成できるオンラインサービスを紹介します。 Sonic Creatorの前に、まずはSonicのデモから。 Sonic Sonicは、HTML5 Canvasを使ってローディング用のアニメーションを作成する超軽量（約3K）のスクリプトで、実装方法などは下記をご覧ください。 かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic 今回紹介するのは、このSonicをコードベースでオンラインで簡単に設計でき、それをアニメーションGIFやCSSスプライト用のPNG画像を生成するオンラインツールです。
【使用例】IE PNG Fix 2.0 Alpha 2
下準備 http://www.twinhelix.com/css/iepngfix/ から IE PNG Fix 2.0 Alpha 2 をダウンロードします。 CSSファイルに以下の１行を入れておきます（htcへのパスは、CSSではなくHTMLからのパスである点に注意） img, div, input { behavior: url("iepngfix.htc") } 以上！ ※背景画像にPNGを使い、それをリピートさせたい時は、JavaScriptファイル「iepngfix_tilebg.js」を<head>内に読み込んでください。 <script language="JavaScript" type="text/javascript" src="iepngfix_tilebg.js"></script> The standard Lorem Ipsum passage, used s
CSSとJavaScriptを巧みに使用した面白いデモンストレーション -PushingPixels
PushingPixelsからPNG画像の影をコントロールするデモとアニメーションで二つの画像を表示するデモを紹介します。 dynamic PNG shadow 「dynamic PNG shadow」では左下のスイッチをオンにすると、その光源の位置に従ってロゴに影が表示されます。 また、ロゴと光源はマウスのドラッグ操作で移動させることができます。 Animated HDR Photo 「Animated HDR Photo」では真ん中のスライダーを移動させることで、二つの画像のビフォーアフターを表示することができます。 スライダーはアニメーション動作に対応しており、画像の任意の場所をクリックするとそのポイントにアニメーションでスライドします。
Flash制作に欠かせない3つのツール・道家編 | _level0 - KAYAC Front Engineer Blog
※このエントリーのJSXおよびJSFLは個人的に使うレベルで作りこまれていません。何か製作中のファイルに不具合が起こっても責任を負いかねますのであらかじめご了承ください！ その1・PSDファイルのレイヤーをすべてPNGで書き出すJSX PhotoshopのデザインデータをFlashに効率よくインポートするために、レイヤーやレイヤーグループをすべてPNGに書き出す自作JSXを使います。完全にFlash用なのでPNGの余白カット&1px確保までします。 PNGファイルはPSDと同名のディレクトリに保存されます。グループ名_レイヤー名.pngのようになるのでレイヤー名をきちんとするといい感じに書き出せます。デザイナーと命名規則を共有すれば素材の更新も効率よくできるかもしれません。 ただし、即席かつ強引に行っているので書き出し自体はとても遅いです。100以上レイヤーを書き出すのはマシン環境によって
続：PNG画像をより美しく、より軽量に最適化するテクニック | コリス
上記のように半透明な箇所がある画像の場合、PNGで保存する前にモードをグレースケールにすることは非常に重要です。 グレースケールモード：[イメージ]-[モード]-[グレースケール] 2. 色数はより少なく 画像のカラーを減らす方法として、前回紹介したポスタリゼーションに代わる方法を紹介します。 この方法は256色限定で、カラーを最適化できます。 半透明の画像からイメージ箇所のみを抽出し（半透明は削除）、インデックスカラーに変換しマスクを適用します。 詳しい手順は下記の通り。 画像を開き、[イメージ]-[複製]で画像を複製します。 複製した画像に、[フィルタ]-[PhotoWiz]-[Remove Transparency]で透明箇所を取り除きます。 ※「PhotoWiz」はRemove Transparencyを参照ください。 [イメージ]-[モード]-[インデックスカラー]を選択し、イン
PNG画像をより美しく、より軽量に最適化するテクニック | コリス
先日、紹介した「JPEG画像の最適化テクニック」に続いてSmashingMagazineから、PNG画像をより美しく、より軽量に最適化するテクニックを紹介します。 追記：2009/07/27 本エントリには続きがあります。 続：PNG画像をより美しく、より軽量に最適化するテクニック Clever PNG Optimization Techniques 下記、各ポイントをピックアップして紹介します。 最後のはCS3向けで不明だったので、途中省略しています。 はじめに PNG画像フォーマットの概要 1. ポスタリゼーション 2. 手のはいってない透過 3. 透過による分離 4. マスクを活用 はじめに ウェブデザイナーとしてあなたは既にPNGのフォーマットに精通しているかもしれません。PNGは劣化のないフォーマットとして、GIFの非常に良い代わりとなります。 Photoshop（あるいは他の画
DD_belatedPNG: better PNG background-image support in IE6
Long story short, this uses Microsoft's implementation of VML instead of Microsoft's AlphaImageLoader filter. I stumbled upon the notion that PNG images show up correctly in a VML fill element while working on DD_roundies. Thereafter, some Googling revealed that a few people had already known about this. The intended implementation is pretty easy: Download a copy of the DD_belatedPNG Javascript fi
[JS]超軽量で設置も簡単な、透過PNGをIE6で表示するスクリプト -Unit PNG Fix | コリス
Unit Interactiveのエントリーから、透過PNG画像をIE6で表示する、超軽量(2KB)の設置も簡単なスクリプトを紹介します。
チバのブログ: IE6で背景画像に透過pngを指定してリピートさせる
Copyright © chibatch.jp All Rights Reserved. | お問い合わせ先
| ＾＾ |秒刊SUNDAY | ここに無ければもう無い！2008年無料アイコンベストサイト集まとめ
2008年12月10日 ここに無ければもう無い！2008年無料アイコンベストサイト集まとめ 2008年に話題となったアイコンサイトをまとめたサイトを紹介します。サイトは50個ありますので、デスクトップに、サイトのアクセントに、使えるのでは。 ◆1. OldSchool Icon Set ◆2. Free Hand Drawn Doodle Icon Set for Bloggers ◆3. Milky icon set ◆4. Archigraphs Porcelain Icons ◆5. I-KID ICONS FOR IPHONE ◆6. Socialize Icons ◆7. Distortion Icons ◆8. Merry Christmas Icons ◆9. Coquette Icons ◆10. Turqua 3d Isometric Vector Icon Pack
透過pngを多用したサイトを作って、完全にIE6が嫌いになりました | エアロパス ::: ユーザビリティ,情報アーキテクチャ他、webについて思うことを綴るブログ
IE6の透過png対策のまとめ。なのだが、透過pngを多用したサイトがこれ。 ハーレー専門店「オールドスクールアイアン」。 最近リリースしたこのサイト、クライアントの要望は「かっちりとしたサイト」ではなく「遊び心を加えたものを」というもの。 遊んだ感じのデザインにはなったけど、HTML＋CSSで組むには苦しくなった。しょうがないので、コーディングでは透過pngを多用したけど、ご存知の通りIE6は透過pngに未対応...。この問題に丸一日はまってしまい、完全にIE6が嫌いになりました。 とは言うものの、しばらくはIE6もターゲットブラウザとして残さないといけないだろうから、透過pngの扱いについて今後のためにまとめておく。 IE6で透過pngを適用するには、IE独自拡張のfilterプロパティを使うことになるのだが、次のような方法が知られている。 JavaScriptを使う方法 minm
p15.jp
以前から IE 6 で透過 png を表示したいときに愛用していた iepngfix.js がバージョンアップしていました。 帰って来た IEPNGFIX 改め PNG-TR | YungSang’s PNG-TR | Google グループ 私的注目機能は iepngfix.js だと png 画像が要素のサイズに合わせて拡大・縮小されていたのですが、PNG-TR では behavior の指定方法が 3 種類 (後方互換も含めると 4 種類) 用意されており、画像のサイズを維持して表示することもできます。 何ができるようになったのかというと、例えばリストアイコンとか要素のサイズは横幅いっぱいだけど画像サイズは 15 x 15 なんていうとき、iepngfix.js では無惨に拡大された画像に胸を打ち砕かれ諦めるしかなかったのですが、PNG-TR を使うとハッピーターンを 10 袋大人買
VistaIcons.com World - Free Vista Style Icons, Vista Wallpapers, Free Icon Sets and Windows Vista Desktop Icons
RECOMMENDED TOOLS: - convertico.com - favico.com - optimizepng.com VISTAICONS.COM PACKS: - Vista Alarm Icons - VISTA Style Icons - World Cup Flags ICON PACKS: - CONTAINERS ICON SET 4 - Brand Camp Badges Icons - Seasons Tweetings Icons - Metro UI Dock - Global Security Icons - Global Warming Icon Pack ICON PACKS 2: - Old School Icons - Peppers Icon Pack - Pure Icon Pack - Quiet iCons Pack - Chemi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery.belatedPNGをアップデートしました。 | プログラマ気分
HugeDomains.com
http://magic-happens.net/ca/2009/05/ie6pngjavascript.html
ava7 patterns