CSS を使って IE 6 で PNG の半透明を有効にする | ヨモツネット
概要 IE 6 で img 要素で埋め込んだ PNG ファイルの半透明を有効にする JS はいろいろありますが、CSS でこれを行うための方法です。 利点として、JS で実現した場合、一瞬グレーの部分が表示されてしまいますが、この方法ではそれがありません。 PNG が読み込まれた時点で半透明が有効になっています。 また、CSS のセレクタを用いて、どの img 要素に対して半透明を有効にするかなどを決めることができます。 さらに、onload 後にドキュメントに appendChild や innerHTML などで追加された PNG ファイルについても、半透明が有効になった状態で追加されます。 動作確認用の demo (IE 6 用) 説明 アルファチャンネルを有効にしたい個所に対して以下のようなCSSを適用します。この例では、#sample の中の img 要素となります。(セレクター
PNGファイルをMacで最適化 | alifedesign
PNGファイルをMacで最適化 このブログでは、写真にJPEG、その他は主にPNGを使っている。何となくPNGは、容量が大きくなりがちだと思っていたけど、まとめてiPhoneのスクリーンショットをアップしたのを機に最適化について調べ直した。 まず、PNGは3種類ある。Macで使っていると、保存のダイアログでPNGと出てくるので、形式は1つだけでオプションも無いと思っていたけれど、PNGには、256色のPNG-8と1677万色のPNG-24、そして、あまり使われていないようだけれど、PNG-32もある。 PNGのファイルサイズが大きくなりがちだったのは、フルカラーのPNG24が使われているからで、PNG8なら、256色でGIFとだいたい同じくらいのサイズに収まる（例外もある）。 Webの高速化を追求しているStoyan StefanovさんのImage Optimization Part 2
Yahoo! Smush.it™
Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a "lossless" tool, which means it optimizes the images without changing their look or visual quality. After Smush.it runs on a web page it reports how many bytes would be saved by optimizing the page's images and provides a downloadable zip file with the minimized image files. Do not
PNGCRUSH
[DOWNLOAD] [CHANGELOG] Pngcrush is an optimizer for PNG (Portable Network Graphics) files. It can be run from a commandline in an MSDOS window, or from a UNIX or LINUX commandline. Its main purpose is to reduce the size of the PNG IDAT datastream by trying various compression levels and PNG filter methods. It also can be used to remove unwanted ancillary chunks, or to add certain chunks including
kys-lab.com - このウェブサイトは販売用です！ - リソースおよび情報
このウェブサイトは販売用です！ kys-lab.com は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、kys-lab.comが全てとなります。あなたがお探しの内容が見つかることを願っています！
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
IE7で透過PNGの表示が汚い。なぜ？ | ウェブを作っている人のブログ WEB LP制作
Q: IE7で透過PNGが汚いことがあります。なぜですか？ A: 「gAMAチャンク」あるいは「補助チャンクのどれか」が、変な値になっている可能性がある。 PNGファイルの構造について。 PNGファイルの構造 ├ 識別部 └ 本体部 ├ 標準チャンク │ ├ 基本チャンク │ │ └ IHDR PLTE IDAT IEND │ └ 補助チャンク │ ├ cHRM gAMA sBIT sRGB iCCP │ ├ bKGD hIST tRNS pHYs sPLT │ └ tIME tEXt zTXt iTXt └ 付加チャンク └ 公式登録チャンク ├ oFFs pCAL sCAL └ gIFg gIFt gIFx fRAc PNGの内部は「チャンク」という項目に分かれていて、画像情報だけでなく「その他情報」を持つ事ができる。 “gAMAチャンクの問題”。gAMAチャンクとは画像の
PHPでPNGやGIFの透過属性を維持したまま縮小する - mzktの日記
class.image.phpを使って、画像を縮小していたんだけど、画像がPNGやGIFだった場合に透過属性が失われて背景が黒くなってしまう。 透過属性を維持したまま簡単にリサイズする方法を探して見つけたのがこれ。GDだけでOK。 Smart Image Resizing while Preserving Transparency With PHP and GD Library アスペクト比を維持した拡大縮小も簡単にできるすぐれもの。 widthを縮小画像の横幅、heightを0に指定すると、アスペクト比を維持するようにheightを自動計算してくれる。 サンプル:$filenameを縮小して$newfilenameに保存 $filename="./images/samle.png"; $newfilename="./images/new_sample.png"; $image=smart
IE PNG Fixを使ったら、クリックできない～
年末からのご依頼で、 トップページのデザインを支給していただいて、 それを基に下層ページをデザイン＆HTMLコーディングしました。 かなり繊細なデザインで、 どうしても透過pngを必要とする箇所がありました。 その箇所というのは、 大きな矩形グラデーション画像の上に、 ドロップシャドウ付きの小さなボタン画像を配置、 また、その矩形グラデーション画像の両端にも ドロップシャドウが付けられており、 ブラウザ背景には文様がある、というもので、 ドロップシャドウごと矩形グラデーション画像を切り出す際に 透過pngを使わないと、桁ズレを起こすか、 シャドウまわりのエッジがギザギザになるか、 の状態でした。 透過pngで鬼門になるのがIE6.0なのですが、 それは前にも見つけた、 IE6.0でも透過pngが表示できる 「IE PNG Fix」というものを使いました。 http://www.twinhe
jquery.pngFix.js - PNG 透過ライブラリ Windows IE 5.5 & 6 (IE PNG Fix)
jquery.pngFix.js - PNG transparency for Windows IE 5.5 & 6 (IE PNG Fix)This plugin will fix the missing PNG-Transparency in Windows Internet Explorer 5.5 & 6. Features unobtrusive script, simple to setup works now also with CSS-Backgrounds (but scaling backgrounds) works with PNG-Images within Links TITLE, ALT, CLASS and STYLE-Attributes are considered This page uses jQuery Version Version
PNG画像をより美しく、より軽量に最適化するテクニック | コリス
先日、紹介した「JPEG画像の最適化テクニック」に続いてSmashingMagazineから、PNG画像をより美しく、より軽量に最適化するテクニックを紹介します。 追記：2009/07/27 本エントリには続きがあります。 続：PNG画像をより美しく、より軽量に最適化するテクニック Clever PNG Optimization Techniques 下記、各ポイントをピックアップして紹介します。 最後のはCS3向けで不明だったので、途中省略しています。 はじめに PNG画像フォーマットの概要 1. ポスタリゼーション 2. 手のはいってない透過 3. 透過による分離 4. マスクを活用 はじめに ウェブデザイナーとしてあなたは既にPNGのフォーマットに精通しているかもしれません。PNGは劣化のないフォーマットとして、GIFの非常に良い代わりとなります。 Photoshop（あるいは他の画
IE6の透過PNGメニューロールオーバー
MENU-1.通常の背景ポジション変更によるロールオーバー MENU-1 MENU-2 MENU-3 高さ40pxのメニューに対し高さ80pxのON-OFFをつなげた画像のpositionを上に40pxずらすことで、画像が変わっているように見せている。 もちろんIE6では画像が透過しないので、背景のグリッドが隠れてしまいます。 HTML <ul class="menu1"> <li><a href="#MENU-1">MENU-1</a></li> <li><a href="#MENU-2">MENU-2</a></li> <li><a href="#MENU-3">MENU-3</a></li> </ul> CSS ul { list-style: none; width: 110px; margin: 0; padding: 0; } .menu1 a { display: block
IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
＞＞ 詳細な使用法と注意点を追加エントリーしました。 いまだ絶大なシェアを誇るIE6（Internet Exproler 6）ですが、WEB制作者ならご存知の通り、さまざまなバグ・不具合を内包しております。 ・CSSでfloatしたブロックのmarginが倍になる。 ・後方互換モードの場合、text-alignが子要素にまで影響する。 ・透過png画像が透過されない。 上記以外にも、それはいくつもの制作者泣かせの問題があり、業界内では「IE6氏ねばいいのに」とまで言われているブラウザですが、前述の通りシェアは絶大なので、対応しないワケにもいかず。 すでにいくつもの対応策が出回っておりますが、その中でも自分的に一番オススメするのが、「DD_belatedPNG.js」を使用する方法です。 有名どころの対応策を併記・比較しながら、どこがオススメなのかを含めてエントリーしたいと思います。 有名な
Campbell Digital Soup – Prague – Center of Medical Tourism
Medical tourism can be defined as the process of traveling to another country for the purpose of receiving medical care. Contrary to popular belief, the concept of medical tourism is not new – in fact it can be traced back thousands of years to the ancient Greeks who would travel from all over the Mediterranean to a small territory in the Saronic Gulf called Epidauria. It was well known throughout
jQuery Plugins IE Png fixでIE6に透過pngを適用 | A Day in the Life
March 19, 2008 IE6で透過pngを表示させるのにユンサンのiepngfix.jsを良く使います。しかし最近jQueryを使用してサイトを構築するケースが増えたため、jQueryの透過pngをIE6に対応させるプラグインのIE Png fixを試してみました。 使い方は簡単でimg要素のsrc属性を調べ、pngファイルだったら適用させるようにします。 $(function() { $("img[src$=png]").pngfix(); }); 属性セレクタの後方一致である$を利用して拡張子がpngのファイルすべてに.pngfix()が適用されます。 cssの背景に透過pngを使う場合が多いので.iepngfixと言うクラスにも適用されるように記述しています。 $(function() { $("img[src$=png],.iepngfix").pngfix(); }):
今更だが現時点での透過PNGのIE6対策のまとめをしてみる の巻
来年も作りたい！ふきのとう料理を満喫した 2024年春の記録 春は自炊が楽しい季節 1年の中で最も自炊が楽しい季節は春だと思う。スーパーの棚にやわらかな色合いの野菜が並ぶと自然とこころが弾む。 中でもときめくのは山菜だ。早いと2月下旬ごろから並び始めるそれは、タラの芽、ふきのとうと続き、桜の頃にはうるい、ウド、こ…
[JS]超軽量で設置も簡単な、透過PNGをIE6で表示するスクリプト -Unit PNG Fix | コリス
Unit Interactiveのエントリーから、透過PNG画像をIE6で表示する、超軽量(2KB)の設置も簡単なスクリプトを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PunyPNG
caramel*vanilla
ユンサンの／／YungSang's: 透過PNG と IE と IE7