HTML/CSS のどんな質問にも優しく答えるｽﾚ 52 (858ﾚｽ)
上下前次1-新
285(1): 2023/12/18(月)13:38 ID:??? AAS
firefoxも開発ツールの右ペインにフォントタブがある
286: 2023/12/20(水)00:23 ID:??? AAS
Firefox121、規定で:has()有効になったね
287: 2023/12/21(木)16:48 ID:??? AAS
>>284 >>285
できました、どうもありがとうございます
288: 2023/12/22(金)14:38 ID:??? AAS
画像にcssでfilter drop-shadowで影をつける際に
影だけ乗算を適用させることってできますか？
289: 2023/12/22(金)21:40 ID:??? AAS
drop-shadowとmix-blend-mode用に::beforeで同サイズのblockを画像の下に重ねるとか？
乗算ならberforeのblockにbackground-color: white;入れとくといいかも
290: 2023/12/22(金)22:02 ID:??? AAS
画像が矩形じゃなくて透過で形通りの影を乗算にしたいとかなら無理じゃねーかな
291: 2023/12/22(金)22:08 ID:??? AAS
矩形の画像ならdivの背景にしておいて、後ろに乗算で同サイズの擬似要素を追加すればできる
背景抜いた画像は擬似要素のcontentに同じ画像を指定すればいける
ただしサイズ調整が利かないのでレスポンシブ使用には厳しい
手間の割に効果は薄いので、自分なら乗算は使わずそれっぽく見える透明度に調整するかな
イラレとかだとデフォが乗算になってるだけで、デザイナーがどうしても乗算を要求するってケースは少ないし
292: 2023/12/23(土)10:02 ID:??? AAS
288です
ありがとうございます！ おっしゃる通り矩形ではなく透明のあるpng画像です
擬似要素に同じ画像ってのは考え付かなかったです
それでできるか試してみます！
293(1): 2023/12/24(日)15:43 ID:??? AAS
filter dropshadowをかけた要素内でposition fixedが効かなくなる
バグ（？）に初めて出会った
SafariだけOKでChrome、Edge、FFがNG
Safariの挙動が正しくないのかな
294: 2023/12/24(日)20:49 ID:??? AAS
ホントだ
ChromeもFirefoxも、親にfilter使った途端に子がabsoluteの挙動になるね
これはWebkitの方が正しいんでない？
295: 01/02(火)01:34 ID:??? AAS
>>293
外部ﾘﾝｸ:developer.mozilla.org
>固定位置指定は絶対位置指定に似ていますが、要素の包含ブロックがビューポートによって
>定義される初期包含ブロックであるという点が異なり、祖先の一つに transform, perspective, filterの
>何れかのプロパティが none 以外 (CSS Transforms Spec を参照) に設定されている場合は例外で、
>その場合は祖先が包含ブロックとしてふるまいます。
まあいつもの通りでSafariが悪い
296: 01/02(火)19:30 ID:??? AAS
開発側にとっては謎仕様やな
297: 01/02(火)22:07 ID:??? AAS
謎でもないと思うぞ
transformやらが親要素に効いてるのに子要素がfixedだと、親とは全く無関係な位置に配置されちゃうから
transformの効果をどう処理したらいいのか解釈があいまいになっちゃうだろ
そういうややこしいことが起こらないように、fixedさせたいならなるべくbody直下に置いておけという
仕様になってもそれは妥当なんじゃないか
298: 01/03(水)01:39 ID:??? AAS
fixed要素はルート直下の設置がいいのは同意だけど、filterやtransformで動作が変わるってのは納得いかないな
Webkitの実装の方が直感的だと思うわ
まあその辺は散々議論された上でこの仕様なんだろうけど
299: [kotomitanaka1021@gmail.com] 01/03(水)14:00 ID:??? AAS
初歩的な質問ですみません
画像の位置とテキストの位置ってどうやって調整するんですか？
どこかと揃えたいんじゃなくて位置を変えたいです。お願いします
300(3): 01/03(水)14:51 ID:??? AAS
position:absolute;
で自由に配置しよう！
301: 01/03(水)16:42 ID:gZE/gVdw(1/4) AAS
>>300できました！！！すごい！ありがとうございます！！本当に助かりました！
302: 01/03(水)17:00 ID:gZE/gVdw(2/4) AAS
>>300
すみませんposition:absolute;ってテキストには使えないんですか？
303(1): 01/03(水)17:00 ID:gZE/gVdw(3/4) AAS
>>300
すみませんposition:absolute;ってテキストには使えないんですか？
304: 01/03(水)17:18 ID:??? AAS
>>303
divなりspanなり、タグでテキストを囲えばいい
上下前次1-新書関写板覧索設栞歴
あと 554 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 0.013s