株式会社グローバルゲート公式ブログ
画像加工いらず！最新のCSSでできるとっておきのテクニック
こんにちは。グローバルゲート制作部のモーリーです。
年度末ということもあるでしょうか、ホームページ制作やPCネットワークサービス導入についてのお問い合わせも他の月に比べて多くなってきました。
もし弊社のサービスにご興味がございましたらお気軽にお問い合わせください。
ホームページ制作について
WebChangerについて
PCネットワークサービスについて
さて、今回は最新のCSSを使ってできる、まるで画像加工を施したような表現技法を6点ご紹介します。
CSSというとかつては文字に色をつけたり枠線を引いたり…という程度のものでしたが、近年はできることが飛躍的に増え、グラフィックソフトを使わないとできなさそうな派手な装飾を行うことができるようになりました。
いずれもInternet Explorerでは使用できない効果ですが、令和3年ともなるとInternet Explorerユーザーも少なくなり、MicrosoftもEdgeへの乗り換えを推奨しています。今後は積極的に使っていってもいいと思います。
filter
filterはぼかしや色の変化などの効果を適用します。
最近流行の兆しがある（というか数年前に流行した効果がまた流行り出したともいえる）すりガラスのような表現であるグラスモーフィズムを実現することもCSSだけでできてしまいます。
filterの各種効果を適用するためには、以下のように記述します。
.blur {
filter: blur(20px);
}
.contrast {
filter: contrast(200%);
}
.grayscale {
filter: grayscale(100%);
}
.hue-rotate {
filter: hue-rotate(90deg);
}
.invert {
filter: invert(100%);
}
.saturate {
filter: saturate(200%);
}
.sepia {
filter: sepia(80%);
}
下記の効果が使用できます。
blur：ぼかし
contrast：コントラストを強める・弱める
grayscale：モノクロにする
hue-rotate：色相を変更する
invert：色を反転させる
saturate：彩度を上げる・下げる
sepia：セピア色にする
mix-blend-mode
mix-blend-modeは重なりあった要素をどのような合成方法で重ねるかを指定することができます。
グラフィックソフトにあるレイヤーの効果をCSSで実現できます。
.multiply {
mix-blend-mode: multiply;
}
.screen {
mix-blend-mode: screen;
}
.overlay {
mix-blend-mode: overlay;
}
.darken {
mix-blend-mode: darken;
}
.lighten {
mix-blend-mode: lighten;
}
.color-dodge {
mix-blend-mode: color-dodge;
}
.color-burn {
mix-blend-mode: color-burn;
}
.hard-light {
mix-blend-mode: hard-light;
}
.soft-light {
mix-blend-mode: soft-light;
}
.difference {
mix-blend-mode: difference;
}
.exclusion {
mix-blend-mode: exclusion;
}
.hue {
mix-blend-mode: hue;
}
.saturation {
mix-blend-mode: saturation;
}
.color {
mix-blend-mode: color;
}
.luminosity {
mix-blend-mode: luminosity;
}
mix-blend-modeのデモ
下記の効果が使用できます。
multiply：乗算
screen：スクリーン
overlay：オーバーレイ
darken：比較（暗）
lighten：比較（明）
color-dodge：覆い焼き
color-burn：焼き込み
hard-light：ハードライト
soft-light：ソフトライト
difference：差の絶対値
exclusion：除外
hue：色相
saturation：彩度
color：カラー
Photoshopなどのグラフィックソフトを使ったことがある方なら見覚えのある合成方法が並びます。
実際にCSSを適用させて結果を見るほうが分かりやすいでしょう。
background-blend-mode
background-blend-modeはmix-blend-modeの効果を背景に適用するものです。
.multiply {
background-blend-mode: multiply;
}
.screen {
background-blend-mode: screen;
}
.overlay {
background-blend-mode: overlay;
}
.darken {
background-blend-mode: darken;
}
.lighten {
background-blend-mode: lighten;
}
.color-dodge {
background-blend-mode: color-dodge;
}
.color-burn {
background-blend-mode: color-burn;
}
.hard-light {
background-blend-mode: hard-light;
}
.soft-light {
background-blend-mode: soft-light;
}
.difference {
background-blend-mode: difference;
}
.exclusion {
background-blend-mode: exclusion;
}
.hue {
background-blend-mode: hue;
}
.saturation {
background-blend-mode: saturation;
}
.color {
background-blend-mode: color;
}
.luminosity {
background-blend-mode: luminosity;
}
background-blend-modeのデモ
効果はmix-blend-modeと同じです。
現在のCSSでは複数のbackgroundを設定することができるので、うまく使えば奥行きのある表現も可能です。
object-fit
object-fitは画像やiframeなどを比率を保って配置することができます。地味ですがコーダーにとっては相当に便利です。
.cover {
object-fit: cover;
}
.contain {
object-fit: contain;
}
object-fitのデモ
cover：親要素の枠内を余白が出ないように拡大する（余白が出ないが指定要素の一部が見切れる可能性がある）
contain：親要素の枠内に収まるように拡大する（余白が出るおそれがある）
派手さはないのですが、同じ大きさのブロックを並べるようなレイアウトで画像を使うときに効果を発揮します。
clip-path
clip-pathは対象要素を自由な形で切り抜きます。従来は単純な長方形か切り抜き後の画像を作成するしかありませんでしたが、clip-pathを使用すると画像加工をすることなく複雑な多角形で切り抜くことができます。
.inset {
clip-path: inset(30px 50px);
}
.circle {
clip-path: circle(25%);
}
.ellipse {
clip-path: ellipse(50% 25% at 50% 50%);
}
.polygon {
clip-path: polygon(25% 0%, 100% 50%, 75% 100%, 0 50%);
}
clip-pathのデモ
inset：内側に食い込んで切り抜く
circle：円で切り抜く
ellipse：楕円で切り抜く
polygon：多角形で切り抜く
特に自由な形状で切り抜くことができるpolygonは強力です。
background-clip
background-clipは背景をどの部分（枠線を含むのか、paddingを含むのか、など）まで適用するかを指定するものですが、「text」と指定することで文字の背景を画像とすることができます。
ベンダープレフィックス（「-webkit-」の部分）がないと効かないので注意が必要です。
※2021年2月現在
特に自由な形状で切り抜くことができるpolygonは強力です。
.clip {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
background-clipのデモ
これはエモい。実にエモい。
特にWebフォントと組み合わせるとエモさ倍増になりそうです。
入力フォームの入力内容はformsというオブジェクト配下にありますので、そのformsオブジェクトを定期的にlocalStrageに保存します。
まとめ
このようにCSSの多機能化により、簡単な記述で多種多様な表現ができるようになりました。
弊社制作部も従来は…というかInternet Explorerによる閲覧を考慮しないといけない頃は使用をためらっていたのですが、そろそろInternet Explorerは考えなくてもよくなってきましたので、今後は積極的に新しいテクニックを使っていく予定です。
そんなわけで来年度も引き続きよろしくお願い申し上げます。
【関連記事】
