タグ

alphaimageloaderに関するnabinnoのブックマーク (8)

  • NLOG - FC2 BLOG パスワード認証

    ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.

  • クロスブラウザのためのHTML/CSSのテクニック集 | コリス

    anthonyshortのエントリーから、クロスブラウザのためのHTMLCSSのテクニックの紹介です。 How to get Cross Browser Compatibility Every Time 簡単な意訳なので、詳細やキャプチャは上記エントリーを参考ください。 サマリー doctypeはstrictを使用し、正しいHTML/CSSを使用してください。 スタイルをリセットするスタイルシートを使用してください。 Firefoxでのレンダリングのために、テキストのスタイルシートに「-moz-opacity:0.99」を指定してください。 Safari用には「text-shadow:#000 0 0 0」を使用してください。 画像のリサイズをCSS/HTMLで行わないでください。 全てのブラウザでフォントのレンダリングを確認してください。 「Lucida」は使用しないでください。 テキ

    クロスブラウザのためのHTML/CSSのテクニック集 | コリス
  • AlphaImageLoader - CSS Dencitie

    画像のアルファチャンネルを有効にする為のフィルタです。InternetExplorerは、まだPNG画像のアルファチャンネルをデフォルトでサポートしておらず、それを有効にする為には、このフィルタを使用する必要があります。 画像は背景の上に描かれます。使用方法としては間違っているかもしれませんが、この特性を利用して、同時に2つの背景を適用することも出来ます。 <div style="width:100%; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='earth.png');"> フィルタの例です。</div> Enabled 値

  • アルファ画像を扱うalphafilter.jsライブラリ[to-R]

    アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a

    アルファ画像を扱うalphafilter.jsライブラリ[to-R]
  • AlphaImageLoader - filter,フィルタ

    画像の貼り付け方を指定します。 設定値はcrop、image、scaleとなります。デフォルト値はimageとなります。 ・cropはそのまま貼り付けます。 ・imageは要素のwidth、heightの値に関係なく要素を画像の大きさに合わせます。 ・scaleは要素の大きさに合わせて画像を拡大縮小。要素の大きさが画像のサイズ以下ならば指定したwidth、heightに合わせますが、要素サイズの方が大きい場合には、拡張して表示します。

  • IEと透過PNG

    このページはIE7で致命的なエラー出るという情報を頂き、暫く公開を中止して 修正予定のまま放置しておりましたが、ようやく修正致しましたので再び公開します。 PNGのアルファチャンネルによる 透過(半透明)もサポートされていないインターネットエクスプローラ6。 (GIFと同レベルの256色での単色透過は問題ありません) バージョン7でようやく半透明PNGがサポートとなりましたが、他のブラウザと比較して 余りにも遅れすぎ…。 更にIE7は、Windows Vista、Windows XP、 Windows Server 2003だけですね。これらより古いWindowsには使えません。 そして2006年末の現時点では、まだまだIE6 のユーザーが圧倒的に多いようです。 WEBサイトを作る側からすれば困った問題ですね。うかつに透過PNGを使ってしまうと、 IE6ユーザーから見ると「透過失敗してる…

  • PNG ちょっと裏技 (2)

    Windows版 IE 5.5以降の CSSAlphaImageLoader」で 24BitアルファチャネルPNGを表示する 前回は、SVG ActiveXプラグインを経由する方法でしたが 今回は、基的にプラグインは不要です。 Internet Expolorer 5.5から DirectX機能が 大幅に強化された事は、Webデザインを勉強されている人は、多分ご存知でしょう。 今から行う方法は、DirectX機能の AlphaImageLoader を使って 24BitアルファチャネルPNGを透過させます。 解説は、まず下の画像を見た後で...。 8Bitグレイ + Alpha-Chanel PNG (IMG) 22.1KB Windows IE だと全く背景に透けていません。 Netscape 6以降や、Moziila、Safari、Mac IE 5では、背景に透けて見えます。 8

  • IE6対応!jQueryで透過PNGのロールオーバーを作る (1/3)

    透過PNGに対応したロールオーバーのサンプル。メニュー画像は半透明になっており背景が透けている。IE6を含むクロスブラウザーに対応している(画像クリックでサンプルページを表示します) ロールオーバーの基部分をおさらい 「透過PNG対応」といっても、IE6以外のブラウザーでは単に透過PNG画像を用意するだけですので、通常のロールオーバーと変わりません。まずは前回のおさらいをかねて、通常のロールオーバーを作成しましょう。以下のようなHTML/XHTML(以下、HTML)を用意します。メニューはul/li要素で記述し、img要素のclass属性には「rollover」を設定します。ここでは、次のような半透明の透過PNG画像を用意し、img要素のsrc属性に指定しています。 ▼サンプル01(HTML部分) <ul> <li><a href="#"><img src="images/jquery.

    IE6対応!jQueryで透過PNGのロールオーバーを作る (1/3)
  • 1