filter: drop-shadow()（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 04日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 04 日目 今日は普通に便利な filter: drop-shadow() です。 box-shadow や text-shadow のように影を落とすことができる CSS の機能ですが、画像の場合透過部分を落としてよしなにやってくれるところが魅力です。 filter – CSS: カスケーディングスタイルシート | MDN デモ：https://codepen.io/ginpei/pen/zYdmMVE 基本的な使い方 box-shadow はプロパティでしたが、drop-shadow() は filter プロパティの値として使える <filter-function> です。
使い勝手のよい繊細なパターンの透過テクスチャ素材を探す時はここが便利！ -Transparent Textures
さまざまなカラーにマッチする繊細なパターンの透過テクスチャ素材をコレクションしている「Transparent Textures」を紹介します。 もちろん、全てシームレスに利用できます。
CSSで半透明にできるOpacityプロパティとIEでの問題について
ちょっと上手くいって感動したので書きます。今回も番外編で、小ネタです。 ブログのデザインを変更していると、ある要素を透明にしたい時がある。透明にするには、CSSでは次のように設定する。 要素を透明化する CSS プロパティ CSS3 で入ってきたプロパティのようだが、opacity を設定すれば透明化できる。 opacity:0.7; 0 が透明で 1 が不透明、0～1 の値を指定する。 これで Firefox や Chrome では透明化できたのだが、IEでは出来ない。ネットで調べると、IE では Opacity は使えず、filter を使うそうだ。 filter: alpha(opacity=70); /* ie 6 7 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ IEの透明度は0～100の％で指定する。 この他、Firefox や
[IE7|IE8] jQueryのfadeIn/fadeOutした時にpng画像が変になる時のTips - Web 業界の技術屋 | VIVID Labs.
悪名高き IE6 がついに Yahoo さんからも干されてデベロッパー歓喜！となってから、それなりに時間が過ぎましたね。 あなたの会社では IE6 のサポート状況は如何なものでしょう？当社では Yahoo さんもこうしていますよ、せめて IE7 にしましょ？ね？ね？と言う地道な活動を続けて、それなりに効果が出ています。 実際 IE6 をサポートしなければ CSS がシンプルに書けたり、png のアルファチャンネルをプラグイン無しで描画出来…で、き… 出来てないじゃん！ と言う訳で今回は IE7 と IE8 で再現を確認したアルファチャンネルの描画バグをフィックスします、症状は下記のような感じ。 普通に img 要素で描画する分には問題無い 既に描画されている要素の opacity を弄るとアルファチャンネル部分が黒くなる 普通にサイトを作っていて、png ファイルの要素の opacity
DD_belatedPNG / jQuery.belatedPNG についてメモ的な | プログラマ気分
一定期間更新がないため広告を表示しています
rgba()とfilterで背景だけを透過させる。 | かえラボBlog
"背景だけ"を透過させたい時には、background-colorにrgba()で色と不透明度を指定してやるだけでOKです。 ･･･最近のブラウザは。 rgba()に対応してないブラウザ、まぁ主にアレですが･･･にもオリジナルな素晴らしい機能filter: alpha()があります。 filter: alpha(opacity=50)とやると要素の不透明度が50％になるというやつです。 0.5じゃなくて50と指定するところもまた強い自己主張を感じますね。昔気質とでも言いましょうか。 しかし、この素敵機能filter: alpha()では、"背景だけ"でなく子要素含め、すべて透過してしまいます。 とても面倒見が良いです。 しかし、今回のように"背景だけ"に透過を適用したい。そんな時は"DirectX FilterのGradient Filter"の出番です。 これを使って背景にグラデ
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
透過PNGや角丸などをIE6や7でも実装出来るJavaScriptのメモ
cssやプログラミングIEのバグはJSで IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 もうIEはいいよとも思いますが、現実そうも行かないのはもどかしいですね。万能では無いですけど、作業工数を減らせるならjsに頼ってもいいと思います。そういう訳で、透過の問題や角丸、ドロップシャドウを実装してくれるjsのメモ。 IE7.js IE6以下でもIE7と同じようなXHTML / CSSの解釈をしてくれます。要DOCTYPE 宣言。 IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 DD_b
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
壁紙多数フリー