どうやらcss3でいろいろな関数が使えるようになっていたようです

どうやらcss3でいろいろな関数が使えるようになっていたようです

6月から人生充電中です。最近だいぶ調子がよくなってきたので、web界隈を探っていたところ、どうやらcssで関数が使えるようになってた模様です。すべてのブラウザに対応しているわけではないとはいえ、cssとjavascriptの垣根がなくなっていくような予感がします。というか、html、css、javascript合わせて一つの塊にしようとしている雰囲気がプンプンです。

それはきっとそのうちのアップグレードで見えてくるんでしょうなぁ。

ということで、本題。

久しぶりにWebPlatform.orgにアクセスしてcssの関数についてざっと調べてみました。(※僕が知らなかったものが中心になるので注意)

画像フィルター系関数について

どうやら画像をcssでフィルターかけていじれるようになってたようです。知らないって罪ですね。

画像にぼかしを入れるフィルター blur()

フィルターのプロパティで使えるblur。blur()の()の中身でぼかしのレベル、つまりぼかす度合いを決めます。

試しに使ってみました。

通常版 blur使った
静岡浅間神社(56) 静岡浅間神社(56)

blurを使ってみた方には上のようなのを試しに使ってみてます。ベンダープレフィックスも念のため。

めっちゃぼけます。なおblurが使えるブラウザはCan I useによるとけっこう普通に使える模様

:hoverを組み合わせると面白いことができそうなかんじがします。:hoverで画像がはっきりするっていうアレがcssだけで実装できますね。ワクワクしてくる。

画像の輝度を調整するbrightness()

brightness()の()の中に数値を入れます。100%または1を画像のオリジナルの輝度に設定して、0にすると輝度がなくなるから真っ黒です。

 

通常版 brightness(80%) brightness(50%) brightness(120%)
静岡浅間神社(56) 静岡浅間神社(56) 静岡浅間神社(56) 静岡浅間神社(56)

画像のコントラストをいじるcontrast()

contrast()はその名の通り画像のコントラストをいじれます。100%または1をオリジナルにします。

 

通常版 contrast(80%) contrast(50%) contrast(120%)
静岡浅間神社(56) 静岡浅間神社(56) 静岡浅間神社(56) 静岡浅間神社(56)

画像の色を反転させるinvert()

invert()は色の反転です。0%~100%または0~1の範囲で値を決めます。0%と0がオリジナルになります。

 

通常版 invert(80%) invert(50%) invert(20%)
静岡浅間神社(56) 静岡浅間神社(56) 静岡浅間神社(56) 静岡浅間神社(56)

50%や0.5に設定すると画像がグレー一色になるのが面白いところですね(笑)

画像にセピアの魔法をかけるsepia()

sepia()は画像をセピア色にする関数です。0%~100%または0~1の範囲で値を決めます。0%と0がオリジナルになります。

 

通常版 sepia(80%) sepia(50%) sepia(20%)
静岡浅間神社(56) 静岡浅間神社(56) 静岡浅間神社(56) 静岡浅間神社(56)

画像の彩度を調整するsaturate()

saturate()は画像の彩度を調整するものです。100%と1がオリジナルになります。0にすると彩度がなくなりグレー化します。

 

通常版 saturate(80%) saturate(50%) saturate(120%)
静岡浅間神社(56) 静岡浅間神社(56) 静岡浅間神社(56) 静岡浅間神社(56)

画像系フィルターの充実にビックリした

ここまで画像系フィルターを調べてて思ったのは、予想以上の充実ぶり。色を調整するとかぼかすとかだったら、いちいち新しい画像を用意しなくてもCSSをつかって表現できるようになっていました。

工夫して使うともっといろいろなことができるんだろうと思えました。日進月歩とはいうけれど、ちゃんと調べるというのはやっぱり大切ですね。

次回はいよいよvar()について調べてみようと思います。cssの世界に登場したvar()の働きってどんななのかな。


コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)

Back to Top