filterプロパティを使いこなそう

See the Pen Drop-shadow vs box-shadow (3) en png´s by Ryo Sakai the ferret Web Writer (@ferretxryoxsakai) on CodePen.

今回は*filter: drop-shadow()*をご紹介しましたが、CSSフィルターはPhotoshopを使わずとも実に様々な効果を演出することができます。

複数のフィルターを組み合わせる場合のほとんどはフィルターの順序が問われることはありませんが、基本的にフィルターはCSSの行番号の順番に適用されるので、中には他のフィルターを上書きしてしまうものもあります。

また、フィルターはアニメーションにも対応しています。アニメーションを上手に使いこなせば、非常に面白い効果を演出することができます。

例えば、キーフレーム50％のところで影を付けたり、写真をセピア調に変えてドラマチックに演出したりすることも可能です。
　　

ボックスシャドウだけではなく、ドロップシャドウも覚えておこう

影の落とし方の選択肢としてbox-shadowだけではなく、*filter: drop-shadow()*を覚えておけば、状況に応じて使いわけることができるようになります。

実際のところ、前者と後者では役割が違います。しかし、適材適所で使いこなすことができれば、よりリッチな表現を演出することができるでしょう。

CSSフィルターは、影だけではなく、明度や彩度も気軽に変えられることのできる注目技術です。この機会にぜひマスターしてみてはいかがでしょうか。
　　

知っておくと便利なCSSの知識

CSS

CSS

Webページを構築する際、テキストへの下線配置や矢印など、コンテンツをよりわかりやすくする工夫をしたくなるものです。CSSを使うと、簡単なコードを書くだけでテキストの装飾などが思いのままにできます。今回ご紹介するCSSの書き方は、コンテンツの中でユーザーに注目してほしいところを示せる便利なものです。矢印や三角の作り方など、この機会にチェックしてみてください。
Photoshopはもう使わない!? 場所を問わず画像編集できるCSSデザインフィルターの画像編集エフェクト9選

Photoshopはもう使わない!? 場所を問わず画像編集できるCSSデザインフィルターの画像編集エフェクト9選

CSS3では、Photoshopのようなフィルター効果を再現するイメージフィルターという機能があります。Photoshopを使用すれば画像加工を行うことができますが、外出先などで画像の編集が行えない……そのような経験、Photoshopを使用するデザイン関連の仕事をされている方なら一度や二度ありますよね。そんな時に、少しのコードをCSSに足すだけで画像編集できてしまう機能がイメージフィルターです。 今回は、画像の明度や彩度などを簡単に調整することができる、CSSイメージフィルターについてご紹介します。