IEの透過PNG+opacityの不具合を治すメモ - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 透過PNGの処理が下手くそなのは、IE6だけではなく、IE7/8も同様です。 IEで透過PNGをあてた要素のopacityを弄ると、周りがグレーがかって汚くなります。 この現象はよく知られていると思いますが、今日はこの不具合の治し方のメモを記しておきます。 サンプルコード 例えば、こんなコード。 <style> .test { display:block; width:128px; height:128px; background:url(./test.png) 0 0 no-repeat transparent; } .test:hover { background-image:url(./test-hover.png); } </style> <a href="#" class="test"></a> test.pngとte
DD_belatedPNGを使ってる場合でもスマートロールオーバーが動くようにする - orangain flavor
はじめに DD_belatedPNGを利用すると、IE6でPNGファイルを透過させることが出来ます。 DD_belatedPNGはITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」で解説されているように、簡単にそして高速に透過PNGを表示できるという特徴があります。 しかし、ITキヲスク | IE6用透過png対応策、DD_belatedPNGの使用法と注意点で解説されていますが、次のような問題点があります。 ここで、img要素に使用する際のいくつかの注意点を。 ただimg要素にpng画像を使うだけなら、上記で何の問題もありません。 しかし、png画像のimg要素にロールオーバーを設定したい場合、少し注意とコツが必要なんです。 たとえば、png画像のimg要素を<a>要素で囲んでリンクボタンとして、img要素をロールオーバーさせたい場
Web Designer's Guide to PNG Image Format
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. Once upon a time, there was the mighty
40 Great Examples Of Transparency In Website Design - SpyreStudios
Transparency is one of those things that can really add depth and make a website design pop – when it’s done right of course! We’ve collected 40 websites that make great use of transparency. Some of them are using transparent PNGs and others are using the CSS opacity property. Enjoy! Go Life Church ↓ Blurb Creative ↓ Russ Kirby’s Portfolio ↓ Behance ↓ The Greenhouse ↓ Brad Colbow ↓ Tony Chester ↓
透過png専用のJavaScriptライブラリ(uupaa-suketrans.js) - latest log
Google Code Archive - Long-term storage for Google Code Project Hosting. から透過png処理だけを抜き出し Google Code Archive - Long-term storage for Google Code Project Hosting. としてリリースしました。 IE5.5とIE6で、アルファ成分を含むpng画像を自動的に透過処理します。 背景画像については、class="alpha" か class="png" が設定されている要素のみを透過処理します。 以下の要素が透過対象となります。 <img src="*.png"> <input type="image" src="*.png"> <* style="background-image: url(*.png)" class="alpha"> <*
OptiPNGとPNGGauntlet - faireal.net
画質に一切影響を与えずPNGのサイズを20%小さくする 2003年11月 4日 記事ID d31104 PNGのファイルサイズの最適化について。オープンソースとWindowsバイナリ。 概要 可逆圧縮画像フォーマットPNGでは、 アルゴリズムが固定されているGIFとは異なり、 内部的に、圧縮率に影響する多くのオプションを使える（例えば下記OptiPNGは自動で最大228パターン、手動では1000以上のオプション組み合わせを試せる）。 256色しか使えないGIFより優秀で、 256色以下でも通常GIFより5～25%コンパクトなPNGだが、 内部のオプションを最適化することで、さらに最大20%以上、サイズが縮む。 画像処理ソフトが作成したPNGを入力し、 最適化したPNGを出力するPNG→PNG再圧縮系フリーウェアを2点、ご紹介しよう。 PNGそれ自体は可逆（ロスレス）圧縮なので、再圧縮したか
PNGGauntlet - PNG Compression Software
PNGGauntlet isn't being updated anymore. It still works fine but you might want to look at the alternatives listed below! Combines PNGOUT, OptiPNG, and DeflOpt to create the smallest PNGs Lossless: No image quality is lost — only file size Converts JPG, GIF, TIFF, and BMP files to PNG Parallel batch mode to compress multiple files at once The software license for PNGGauntlet permits unlimited dist
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
IE6用透過png対応策、DD_belatedPNGの使用法と注意点
以前もこの「DD_belatedPNG.js」に関してはエントリーしましたが 『IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」』、あまりの素晴らしさにオススメするだけして使用法とか注意事項など大事な部分に触れずじまいでした。 この素敵な透過png対応策であるDD_belatedPNGちゃんですが、img要素に使用する際にも、div要素やp要素等の背景画像に対して使用する際も、ほんのちょっとしたクセがあります。 なので、今回はこの偉大なる「DD_belatedPNG.js」の使用方法と、使用に関するちょっとした注意点などをエントリーしようと思います。 DD_belatedPNGの使用法と注意点 1.使用するための準備 まずはこの「DD_belatedPNG.js」自体をダウンロードしないコトには始まりません。 配布元のDrew Diller’s bl
最良の画像フォーマットはPNG8、GIFはアニメーション、JPEGは写真に | エンタープライズ | マイコミジャーナル
Yahoo! User Interface Blog YSlowの開発者であり高速にロードされるWebサイトを構築するためのテクニックを紹介しているStoyan Stefanov氏による画像最適化解説シリーズの第2段がImage Optimization Part 2: Selecting the Right File Formatとして公開された。第2回目となる今回はGIF、JPEG、PNG8、PNG24/PNG32について説明し、どの場合にどのフォーマットを選択すればいいかがまとめられている。 Stoyan Stefanov氏はそれぞれのフォーマットの特徴を次のように説明。 GIF: 256色、可逆圧縮、透過機能あり(ただし透過かそうでないかの2種類だけ)、アニメーション機能あり JPEG: 何百万の色表現可能、非可逆圧縮、高い圧縮率、透過機能なし、アニメーション機能なし PNG8:
IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
＞＞ 詳細な使用法と注意点を追加エントリーしました。 いまだ絶大なシェアを誇るIE6（Internet Exproler 6）ですが、WEB制作者ならご存知の通り、さまざまなバグ・不具合を内包しております。 ・CSSでfloatしたブロックのmarginが倍になる。 ・後方互換モードの場合、text-alignが子要素にまで影響する。 ・透過png画像が透過されない。 上記以外にも、それはいくつもの制作者泣かせの問題があり、業界内では「IE6氏ねばいいのに」とまで言われているブラウザですが、前述の通りシェアは絶大なので、対応しないワケにもいかず。 すでにいくつもの対応策が出回っておりますが、その中でも自分的に一番オススメするのが、「DD_belatedPNG.js」を使用する方法です。 有名どころの対応策を併記・比較しながら、どこがオススメなのかを含めてエントリーしたいと思います。 有名な
「Windows IE6, IE5.5 で透過pngを使う」の決定版｜WEB制作（html,css(スタイルシート) )｜プログラムメモ
IE6,5.5で透過pngを表示させるため、今まで様々なスクリプトが開発されてきましたが、 とうとう決定版が出現。 ■ DD_belatedPNG http://www.dillerdesign.com/experiment/DD_belatedPNG/ ここからダウンロード。 /js/ に D_belatedPNG.jsをアップロードして、 <!--[if lte IE 6]> <script type="text/javascript" src="./js/DD_belatedPNG.js"></script> <script type="text/javascript"> /* EXAMPLE */ DD_belatedPNG.fix('.png_bg'); </script> <![endif]--> とするだけでOK。 DD_belatedPNG.fix('.png
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
わかばマークのMacの備忘録 : PNGPress