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

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

CSSでマスクする

クリッカブルマップのレスポンシブ対応ができる「image-map-resizer」が優秀らしい

我が家の植物たち

カスタムフィールドを含む複数の条件でソートをする【WordPress】

脱jQuery!$.ajax使わない書き方

検索用のフォームを設置する【wordpress】

docker-composeをつかってWEBサーバーをたてる

カスタムフィールドを検索範囲にいれる【ACF】

WordPressに大量に投稿をインポートする【CSV】

CATEGORY

POPULAR POSTS

PAGE TOP