PNG形式の小さいアイコンへのCSS任意色割り当て技術_html/css

PNG形式の小さいアイコンへのCSS任意色割り当て技術_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:16:04

オリジナル

1354 人が閲覧しました

この記事は 2016 年 6 月 8 日水曜日 01:17 に公開され、css 関連に分類されます。今日は 3 回、2 回読んでください

byzhangxinxu http://www.zhangxinxu.com より

記事のアドレス: http://www.zhangxinxu.com/wordpress/?p=5429

1. 百聞は一見に如かず

CSS は画像の色を変更できます。はい、変更できます。百聞は一見に如かずです。ここをクリックできます: png 小さいアイコン CSS カラーデモ

上のアイコンはあまり黒ではない元のアイコンで、PNG 画像です。次のアイコンは色を付けることができます:

以下で 1 つを選択します。紫などの色を付けます。

最高な気分になりませんか!将来的には、デザイナーは複数の色のセットの写真を提供する必要がなくなります。

SVG やアイコンフォントなどのテクノロジーは、もうそれほど眩しくはありません。

2. 原理は実際には非常に単純です

原理は実際には非常に単純です。ドロップシャドウフィルターは、CSS3 フィルターの非透明領域に影を追加します。要素または画像。

ドロップシャドウについてあまり詳しくない場合は、以前に書いた記事「CSS3 フィルター: ドロップシャドウフィルターとボックスシャドウの違い」を読むことをお勧めします。

背景が透明な小さなpngアイコンの場合、ぼかしなしで影を適用すると、別の色の小さなアイコンを生成するのと同じではありませんか？

次に、元のアイコンをコンテナの外側に隠して、コンテナの中央にアイコンを投影すると、色付け効果のように感じませんか?

たとえば、この記事のデモでは、アイコンの親から overflow:hidden を削除すると、元のアイコンが表示されます。

3. 実際に実装するのは難しいです

原理は上記のとおりですが、最初に実装したときは、自分のアイデアを数分で実現できるため、非常に簡単だと思いました。素朴で、Chrome ブラウザでは、FireFox ブラウザではできないことがすべて表示されました。おい、何が起こったんだ。

Chrome ブラウザでは、ドロップシャドウには次のレンダリング特性があります:

Chrome ブラウザでは、要素の主要部分が、どのような状態であってもページ上に表示されない場合、そのドロップシャドウは影は見えません。ベタ部分が 1 ピクセルでも表示されると、ドロップシャドウは完全に表示されます。

そこで、私は試してみました:

text-indent 負の値を使用して元の画像を非表示にすると、投影は行われず、失敗しました。
クリップが非表示、投影なし、失敗しました!
負のマージン値は元の画像を隠します。投影されません。失敗します。
左の値が負の場合、元の画像が非表示になり、投影されず、失敗します。

何も機能せず、実装は大きな障害に遭遇します。

その後、私の物理的な部分も可視領域内にあるが、透明である場合 (とにかく投影されない)、どうなるだろうかというアイデアが思い浮かびました。

ということで、これまで数々の実績を上げてきた透明フレームを試してみました、またまた実績を上げました、完成です！

したがって、次の CSS ステートメントが不可欠です:

border-right: 20px solid transparent;

ログイン後にコピー

4. 互換性について

IE13 以降のサポート、Chrome および FireFox ブラウザのサポート、モバイル iOS のサポート、Android4.4 以降のサポート。つまり、基本的に、このテクノロジーはモバイルでも利用できるようになりました。

これにより、トラフィックが節約されるだけでなく、開発が簡素化され、メンテナンスがより便利になります。

5. 結論

実は、この記事の技術的発明（主に透明枠の処理）は、「ドロップシャドウ vs ボックスシャウ」の記事の完成後に研究されました。もともと私は小さな特許を書いて朝食代を稼ぎたいと思っていました。その結果、新規企業は無料で特許を取得でき、そのサイクルには 3 年かかります。

私の息子は3年で醤油を作れるようになります。だから、それは忘れて、ただ共有してください。

今日は今月すでに6記事書いてます。それは、継続的に大量の余暇を解放し、他の大きなプロジェクトを密かに実行するためです。

タイムマシン

3 ～ 5 年後、あなたがこの記事を読んでいて、2016 年に大学に通っていたとしたら、私がこの記事を書いているとき、あなたは寝返りを打ったり、眠れなかったり、まだ不安を抱えているかもしれません。明日。つまり、心配しないでください。大学受験について心配する必要がなく、安心して眠れるよう、しっかりとした背景を見つけました。そうだ、どこのバックステージなのか気になるね。ふふふ、言ったら怖がらせてしまうよ――観音菩薩！

この記事はスクリプトの動作を含むオリジナルの記事であり、ナレッジポイントは頻繁に更新され、いくつかのエラーは修正されます。そのため、古い情報や誤った知識による誤解を避けるために、再版するために元のソースを保管してください。、より良い読書体験をお楽しみください。

この記事のアドレス: http://www.zhangxinxu.com/wordpress/?p=5429

(この記事はここまで)