いろんな形状の画像(clip-path)に影を付ける方法

クラッシックエディターでの「box-shadow」 ではブロックエディターでは不可?、画像に影(shadow)がつかない。いろいろ調べてみると、単純にclip-pathの要素に対してbox-shadowを指定すれば良いと思っていたが、clip-pathの場合は影の部分がカットされることが分かった。

【clip-pathに影(shadow)をつける方法】

試した投稿記事の影付き画像は、clip-pathをwrapする要素で作成して、「filter」を使用することで影が付くので下記の要領でコードをStyle.CSSに追加した。

/*---片方の影付き---*/
.clip-path-shadow {
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5)); /*画像の影*/
}
/*---全体の影付き---*/
.clip-path-shadow2 {
  filter: drop-shadow(1px 1px 8px rgba(0,0,0,1));  /* 画像の影 */
}
*影の色は「rgba」必須
【片方に影】
【全体に影】

Clip-pathで色々な形状を作って影を付ける事ができること又、クラシックエディターでも「clip-path画像」にfilterを使用して影を付けることができることで楽しみが倍増!!

クリックコメントを閉じる

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

TOP

Copyrighted Image