opacityとスタッキングコンテキストに立ち向かう
CSSのhover時にopacityを指定すると画面がチカチカ点滅する、「スタッキングコンテキスト(重ね合わせコンテキスト)」。要素が勝手に浮かび上がり無限ループに陥る原因と、具体的な対策の備忘録です。
CSSのhover時にopacityを指定すると画面がチカチカ点滅する、「スタッキングコンテキスト(重ね合わせコンテキスト)」。要素が勝手に浮かび上がり無限ループに陥る原因と、具体的な対策の備忘録です。
cssでレイアウト用のHTMLタグのネストをさせずに、linear-gradientを使ってシンプルな方眼紙(マス目)レイアウトを作成する方法の解説をしています。ネストしたdivタグなどを使って作成する方法もありますが、今回紹介している内容はネストが不要なので、既存のHPでタグ構成を中々修正出来ない状態でマス目レイアウトを作りたい時に役に立ちます。
svg画像をCSSのfillやstrokeを使って色付けしようとする場合、HTMLに直接svgの埋め込みが必要です。(imgタグのsrc読み込みでは色付け出来ない。)mask-imageというCSSプロパティを使えばimgタグで埋め込んでいても、色も付けられることが分かったのでその方法と、それを使って簡単にsvgアイコンの色を反転させてインタラクティブなボタンを作れる方法を解説しています。