BLOG

CSSでマスクする

| HTML / CSS

IEのサポートがおわるから使えなかったCSS3の技術がたくさん使えるようになりました。
その一つにCSSでマスクですね。

Can I use mask-image

使える技術はどんどんつかっていこーってことでメモメモ

まずはグラデーションでマスクしてみたよ。

See the Pen
mask : Gradation
by msys (@msys)
on CodePen.

イメージはこんな感じです。
画像にグラデーションでマスクしたみたイメージです。

img{
  width: 100%;
  height: 100%;
  object-fit: cover;

  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 50%);
  mask-image: linear-gradient(to top, transparent 0%, black 50%);
}

mask-image が書いてるところがそれ、画像にグラデーションのっけて、それでマスクしたってことですかね。

See the Pen
mask : svg
by msys (@msys)
on CodePen.

img{
  width: 100%;
  height: 100%;
  object-fit: cover;

  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="691px" height="549px"><path fill-rule="evenodd"  fill="rgb(229, 43, 41)" d="M127.199,0.150 L690.299,0.150 L690.299,548.150 L0.0,548.150 L0.0,128.585 L127.199,0.150 Z"/></svg>');
  mask-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="691px" height="549px"><path fill-rule="evenodd"  fill="rgb(229, 43, 41)" d="M127.199,0.150 L690.299,0.150 L690.299,548.150 L0.0,548.150 L0.0,128.585 L127.199,0.150 Z"/></svg>');
  -webkit-mask-size: cover;
  mask-size: cover;
/* } */

svgを作ってそのまま、それを指定してもいいですね。
簡単なsvgなら直接ぶっこんだほうが、早いかなっておもいます。

mask-position: 0 0; // マスクのポジションを指定
mask-size: cover;      // マスクのサイズを指定

まぁ、位置とかサイズを指定する場合はこういう感じのを指定してください。

ほんとに簡単にできて良い世の中になったよね。

RECENT POSTS

【CSS】text-decorationのカスタマイズができるの知ってた?

CSSでフッターの下に隙間ができないように調整する

「reduce」を使って配列を値を処理する

data属性の取得・設定・更新【JavaScript】

変数のタイプを調べる、変換する 【Javascript】

VS CodeでLive Serverを使ってプレビューのリロードをしてみよう

メディアクエリでhoverが使えるデバイスかどうか

markdown-wasmというすごく高速なMarkdownパーサー

SNSシェアボタンをオリジナルで設置する

CSSでマスクする

CATEGORY

POPULAR POSTS

PAGE TOP