サイト制作で使用するCSSプロパティってそんなに多くないですよね。
また、要件的にIE11が含まれていて一部のプロパティの使用を見送るとか。。
そこで今回は、勉強も兼ねて案件ではあまり使っていないプロパティをいじってみて理解を深めていこうと思います。
CSS filterをいじってみる
filterについて
filter は CSS のプロパティで、ぼかしや色変化などのグラフィック効果を要素に適用します。フィルターは画像、背景、境界の描画を調整するためによく使われます。
（引用：https://developer.mozilla.org/ja/docs/Web/CSS/filter ）
要素に対して色々なフィルター効果をかけられますよっていうプロパティです。
対応ブラウザ
みんな大好きIE11では使用できません。。
https://caniuse.com/#search=filter
使えそうなケース
blur（ぼかし）
See the Pen
by un-T Morikawa (@unt-morikawa)
on CodePen.
filter: blur(3px);
grayscale（グレースケール）
See the Pen
by un-T Morikawa (@unt-morikawa)
on CodePen.
filter: grayscale(100%);
sepia（セピア）
See the Pen
by un-T Morikawa (@unt-morikawa)
on CodePen.
filter: sepia(100%);
opacity（透明度）
See the Pen
by un-T Morikawa (@unt-morikawa)
on CodePen.
filter: opacity(50%);
この関数は、より確立されたopacityプロパティに似ています。違いは、フィルターを使用すると、一部のブラウザーはパフォーマンスを向上させるためにハードウェアアクセラレーションを提供することです。
（引用：https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/opacity()）
opacityプロパティよりメリットがある？らしいです。（ほえ〜）
もっと実践的なサンプル（アニメーション）
filterプロパティにはtransitionプロパティを用いることにより、アニメーションを当てることができます。
下記はホバーによるアニメーションのサンプルです。
ホバーでblur（ぼかし）
See the Pen
by un-T Morikawa (@unt-morikawa)
on CodePen.
transition: 0.3s;
&:hover {
filter: blur(3px);
}
ホバーで色味を加える
See the Pen
by un-T Morikawa (@unt-morikawa)
on CodePen.
filter: grayscale(100%);
transition: 0.3s;
&:hover {
filter: grayscale(0);
}
もっと実践的なサンプル（複数付与）
filterプロパティは複数の関数を設定できます。
ホバーで色味を加えてぼかしを取る
See the Pen
by un-T Morikawa (@unt-morikawa)
on CodePen.
filter: grayscale(100%) blur(3px);
transition: 0.3s;
&:hover {
filter: grayscale(0) blur(0);
}
もっと実践的なサンプル（ドロップシャドウ）
See the Pen
by un-T Morikawa (@unt-morikawa)
on CodePen.
filter: drop-shadow(5px 5px 15px rgba(0,0,0,0.8));
左の画像にはbox-shadowプロパティを使用していますが、それだと画像の枠に対してシャドウを当ててしまいます。
filterのdrop-shadowを用いることで、画像の内容自体にシャドウを当てられます。
mix-blend-modeをいじってみる
filterプロパティについてはこんなところでしょうか。
ここからはmix-blend-modeプロパティをいじってみます。
mix-blend-modeについて
mix-blend-mode プロパティは、要素の内容物と親要素の内容物や要素の背景をどのように混合するかを設定します。
（引用：https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode ）
例えば2枚の画像を合成したり、オーバーレイさせたり、色をかけ合わせたりできるよというプロパティです。
対応ブラウザ
こちらもみんな大好きIE11では使用できません。。
https://caniuse.com/#search=mix-blend-mode
文字色を反転させてみる
今回は最近巷で見かける、背景要素に対して乗っている要素の色味を反転させる。を試してみたいと思います。
See the Pen
by un-T Morikawa (@unt-morikawa)
on CodePen.
// 乗算
mix-blend-mode: multiply;
// ハードライト
mix-blend-mode: hard-light;
// 差の絶対値
mix-blend-mode: difference;
blend-modeは種類がたくさんあるので、複雑な仕様の場合は試行錯誤しながら実装することになりそうですが、追従するロゴとかに使うと印象付けられそうですよね。
position:sticky をいじってみる
relativeやabsolute、fixedはよく使用するかと思いますが、stickyという値があります。
おそらく実務で使用したことがないので、こちらもいじってみます。
position:stickyについて
粘着位置指定と呼ぶそうです。
相対位置指定と固定位置指定を組み合わせたものです。粘着位置指定された要素は、指定したしきい値に達するまでは相対位置指定として、しきい値に達したら固定位置指定として扱われます。
対応ブラウザ
こちらも…（割愛）
https://caniuse.com/#search=position:sticky
粘着させてみる
百聞は一見に如かず、ということで見てみましょう。
See the Pen
by un-T Morikawa (@unt-morikawa)
on CodePen.
dt {
position: sticky;
}
上記ではアルファベットの見出しに使用しています。
各見出しは、ページ上部にぶつかると親要素エリアが終わるまで固定位置指定となります。
// 注意点
粘着位置指定を想定したとおりに動作させるためには、 top, right, bottom, left のうち少なくとも一つでしきい値を指定しなければなりません。しきい値を指定しなければ、相対位置指定との違いがなくなるでしょう。
（引用：https://developer.mozilla.org/ja/docs/Web/CSS/position ）
結び
あまり使ったことのないプロパティを実際に触ってみて、理解を深めようという試みでした。
表面をちょろっと触った程度なのでまだまだ深堀りできていませんが、一回触っておくとハードルが下がると思うので、（IE11が対象ブラウザから外れる日も近いはずだし）案件でも積極的に提案していきたいですね。
↧