現状のHPを無料で診断いたします。
お気軽にお問い合わせください。
お役立ち
ニッティ・グリッティの
お役立ち情報
CSSで吹き出し
UPDATE :
投稿者 : ニッティ・グリッティ
ひきつづき
https://css-tricks.com/perfect-tooltips-with-css-clipping-and-masking/
をゆっくり読んでいきますね。
| CSSのmask-imageプロパティで発見したことがあります。マスクレイヤーを組み合わせることができるのです。これは、CSSの背景画像のようなものだと思ってください。ひとつの要素に複数のグラデーションや画像を適用することができます。では、それらのレイヤーをすべて組み合わせて、最終的に必要なマスクを生成するとしたらどうでしょう？ |
つまり、1つの要素にマスクレイヤーを複数重ねることができる、ということです。
そして、clip-pathとmaskが異なるのは、
| パスを定義するのではなく要素の上にマスクレイヤーを定義します。CSS でマスキングを行うには mask-image プロパティを使用し、マスクレイヤーとして使用する画像を指定します。 |
という違いがあります。
そしてこの方法を使用することによって、
| 長方形はツールチップのサイズに合わせて伸縮し、矢印は常に固定されたサイズを保ちます。 |
ということで、矢印のサイズを変更したくないときに便利ですね！
さて、それではコードです
.tooltip {
mask-image: —-①
linear-gradient(#fff, #fff), /* Rectangle */
url(‘data:image/svg+xml;utf8,—svg記載、矢印の形—‘); /* Bottom arrow＊/
mask-position: */ —②
0 0, /* Rectangle */
50% 100%; /* Bottom arrow */
mask-size: —③
100% calc(100% – 18px), /* Rectangle */
38px 18px; /* Bottom arrow */
mask-repeat: no-repeat; —④
}
① mask-imageに設定する画像を設定します。
ひとつめでグラデーションをかけています (開始色 #fff #fff)
※グラデーション画像や、透明色を設定するなどして、透明部分を作成する必要があります。
ふたつめは矢印のかたちのSVG画像です
詳細↓
<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 38 18″>
<path d=”M0,0c10.6919355,1.0289959,18.997036,8.6949739,18.9980297,18h0.0039406c0-9.3050261,8.3060932-16.9710045,18.9980297-18H0z”/>
</svg>
②mask-positionでマスクの場所の指定です。
左、上の順に設定します、つまり、長方形部分は 左0 上0の場所に、
矢印部分は、左50％ 上100％の場所に表示されます
③mask-sizeでマスクのサイズの設定です
幅、高さの順で設定します
④mask-repeatで、繰り返すかどうかを設定します
今回は繰り返しません
maskの各種設定については下記リンク先がとても分かりやすかったです
https://www.webdesignleaves.com/pr/css/css_mask_image.html
ランキング
BLOG
お役立ち情報
-
雑に選んでいませんか？フォントでデザインに表情をつけよう！
2024.12.03
CATEGORY
お役立ち情報 -
【初心者さん必見！】使えると超おしゃれ！「ブレンドツール」とは！~イラレの便利機能紹介Part6~
2024.12.02
CATEGORY
お役立ち情報 -
テンプレートで簡単!?もう悩まないプレゼン資料作成!
2024.11.28
CATEGORY
お役立ち情報 -
ホームページ集客のコツとは？コンサルティング会社が紹介！
2023.08.21
CATEGORY
お役立ち情報 -
IT導入補助金のご案内
2023.08.07
CATEGORY
お役立ち情報 -
【3分でわかる】Threads（スレッズ）とは？登録方法やTwitterとの違いをご紹介
2023.07.07
CATEGORY
お役立ち情報
