CSSのヒント：マルチカラーとカットアウトのドロップシャドウ
ボックスの影は退屈です。 あなたは私の声を聞いた。 一度に使用できる色は1つだけで、アニメーション化または遷移が遅くなります。 あなたは何がきちんとしているのか知っていますか？ 要素の背景の色を使用するドロップシャドウを作成します。 したがって、要素の左上隅が赤の場合、シャドウの左上隅は赤になります。 右下隅が青の場合、影の左下隅は青になります。 それはきちんとしていませんか？ 残念ながら、CSSでそれを行う方法はありません…まあ、あります。飛び込みましょう。
方法
実際、私たちがしなければならないのは、親要素のすぐ後ろに疑似要素を作成し、backgroundやborder-radiusなどの関連するプロパティを継承させることだけです。 次に、CSSblur()フィルターを追加します。 これにより、要素の背景の2番目のコピーが作成され、要素の背後でぼやけます。 やさしい。 背景と関連するプロパティを継承することで、それらを繰り返し指定する必要がなくなります。
さらに良いことに、何らかの方法でシャドウをアニメート/スムージング/スカッシュしたい場合は、疑似要素で利用可能なCSS変換と不透明度のフルパワーを利用できます。
キャッチは何ですか？ CSSブラーフィルターをサポートしていないブラウザーではシャドウが表示されません。
コード
/* The element that will have the blurred shadow. */
.fancy-box {
/* We need to set the position value to something other than `static`
* so that position: absolute for the pseudo-element will be relative
* to this element. */
position: relative;
/* A nice Alligator.io-themed linear gradient. */
/* This technique works with any and every background type. */
background: linear-gradient(to bottom right, rgb(107,183,86), rgb(0,143,104));
/* Whatever else you want in here. */
}
/* The shadow pseudo-element. */
.fancy-box::before {
content: ' ';
/* Position it behind the parent. */
z-index: -1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* Inherit the background and border radius of the parent. */
background: inherit;
border-radius: inherit;
/* Blur it for maximum shadowy-ness. */
filter: blur(15px);
/* Hide the shadow until the element is hovered over. */
opacity: 0;
transition: opacity 300ms;
}
/* Show the shadow on hover. */
.fancy-box:hover::before {
opacity: 1;
}
結果
透明な画像でも機能することに注意してください。 いよいよ形のある影が作れます！ 🎉
（function（）{document.addEventListener（'DOMContentLoaded'、（）=> {var styleEl = document.createElement（'style'）; styleEl.type ='text / css'; styleEl.appendChild（document.createTextNode（`。 article-demo .fancy-box-wrapper {display：flex; flex-wrap：wrap; justify-content：center;} .article-demo .fancy-box {position：relative; display：block; height：215px; width： 215px;マージン：25px; border-radius：50px;} .article-demo .fancy-box :: before {content：; z-index：-1; position：absolute; top：0; right：0;bottom ：0;左：0;背景：継承;境界線-半径：継承;フィルター：blur（15px）;不透明度：0;遷移：不透明度300ms;} .fancy-box：hover :: before {不透明度：1;}。 article-demo .fancy-box.gradient {背景：linear-gradient（右下、rgb（107,183,86）、rgb（0,143,104））;} .article-demo .fancy-box.shape {背景：url（ ' /images/logo-fancy.svg'）; background-size：cover;} .article-demo .fancy-box.image {background：url（' data：image / jpeg; base64、/ 9j / 4AAQSkZJRgABAQEASABIAAD / 2wB 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 bYkt+2/tNtttAJJAACSbbQAANttv/wD/ALbbb2gNsAl7aW2ZNkFqX6UlJJAAAAJJJJJttQW3bb+22222AAAJJtsgAG2//wD2222229tAbaBL21tuyTIDcl+lKSQJJJJJAAAASbbQlt223/8A/wD/AAASSbbIABt/+22222229tATbADe0ltWSJAT8n+paSAJJttpJJIAAAbaUts222222ySSbbIAk/8A9ttpJJJbbbYEk2AH9pbekkSQm5P9KUkATSSW222SSSAAG0lLZJttttu222SAJP8A7aSS22220kkBJNkAP6S37JAkpJmT+QtIAkl/bbbbbf8A7ZABbS1tskkkkrbJAAH/APtJLbbb/wD/APaSSTZIDfkk/wCkCSUkzJ/oG0ASftttttttttv2ACWlt7bbbbYAAAH/APyS23tJJJJJJJJkkgJPyS/pAElJImTfyVpAl/bbbaSSSSbbd9gAlpbf2222AAf/ AP0kt/SSSAJJJJJJJIST9kn/AEASWkkTZv5K2gCettpJbbbbbJJN+0ASUlttttu23/pJL/kgCSSSSSSSS0kk/ZJ/8AC20gCbt/ZG0AD1tJJLbbbbbbZJP2kASQkkkkn/APSST/5AEklJJJJJJJJJ+2yb/wAALbSANO21sibABfWkkttttv8A/bbZJO0kCSSQABJJJJ/+gCS0kkkkkkAAATbbNv8A0ANtIAk/ba2TNoAtvaSW22/7bbb/ANsknaSQJJJJJFt//wCgCWkkiSbbbbbbbbNtv7QA20gAT/ttbJm2AC3tJLbb9tttttv/AGSUtpJIAAAA/wD/AMACW0gSbbttttttttt/bQA20AAf/ tpbZt2QAW1pJbbftttttttv7JLW2kkkkklJAAS20gTbttttttttpbbbAE22ACX9tpbbNuyAC29pJbb9tttttttv / ZJLW222220SSW2kgTdttrbbbbbbbbAEm2wAC39tJbbts2QAG2tJJbbttt SS0kkkkstttJAE37b22222SabZJJNtkABt7aS23bbdkABNtaSS237bbbb+2bbb//AMkkgAAAACSQAJP+2ttt22SSSSTbZJAADb+0ltu223JIACba0kltv+2223tttk22/wD/AGSSSSSSEkkl/wC2ltu2ySbbJJJJAADbf2ktt2229JIADbbUkktt/wBttt7bbbbbNt//AP8Av9ttt5bf+20ltu22ZJJJJAACTbbWklt+229pJAATbbQkkttv/wBttvbbaSbbbNtv/wD/AP8A/wD/AG220ltt+2zZJJAASSbbbYkktv22/pJAASbbbAkkttv/ANttt7baAACbbbNtt/8A/wD+29ttttv22TJJICSTbbbIkktv+ 23pJAASbbbYEkttt/8A/tttvbaAAEgATbbNttttttvbf/tttvSSAEk22yQBJLb/ALbb0kgBJtttoCSW23//AG22229tsAACSSSBNttkkkkklm2222lpJACSbbZAAkt//wBttbSQEm222AAJbbf/ALbbbbbbW22AQJJJJJJE2222222222kkkkgBJJtsgASX/wD221ttACTbbYAAFtt/+2222221tttoECSbbbaSSSJttttttgAAAASSSTbZAAk//wDttLbbAEm22wABbbf/ALbbbf8A9tttttoEiTbbbbbbSSSRtttskiSSSSSbbZIAAn//ANtJbbbEk22yAALbf/tttv8A22222222ySBJttttttttJJJIAAAAtttttkkgAAH/AP8AtpLbbNkm22AABbb/ALbbb/22kAAAASSSQJJttttpNttttpJJJJJJAEkgAAAAB/8A/wBpJbbZtk22yAADbf8Abbbf22gAAABJJJJJJNttttJJJIJttttJJJJJAAAAABf/AP8A9tJLbbNsk22QAADb/wDbbb+22SQBJJNtttttttttpJJAAAABNttttttttttv/wD / AP8AbaS223bZJtsgAAElv7bbb22ySAJNtttttttt tttpIIAAAAAAAJtttttt/wD/AP8A/baSS2237ZJttkAAAkt/7bbe22ySBJttttttttttttpJAAASSQAAAABsltttbbaSSSS2237bJNtkgAAElt/bbbe22yQJNttttpJJJJJJJJJAASSSSSQAAAAAkkkk2222222/7bbdskgAAAkt/wC2223ttkkCTbbbSSSAAAAAAAAAAkkkkkkkkAAAAAJJJNttt/8A/ttt2ySQAACS2/ttttvbbZJAk2220kgABJJJIAABJJJJJLbbJJAAAAAASST/AP8A2222yZJJIAAJbb+22229tttkkgbbbbSQAEkkkkkkkkkkkltttttskAAAAAAAAG222yyAJJIAADbb+22229tttskkAbbbbSQAkkttttttttttttttttttkAAAAAJJJG22AAAJJIACTf8AttttrbbbbJJIA22220kAJJLbbbbbbbbbbbbbbbbbbZBJAACSSSRJAAASSS0kn3/ttt7bbbbJJIAG2222kkAJJbbbbbbbbbbbbbbbbbbbZJJIJTabSRIAAAAG22ll/wD7SS2222SSQANtttttpJASSW2222222222222222222ySSS222SSQTABJJJtt7b+2SS222SSAJttttttpJIASS22222ySSSSSW22222222ySSS22gAL/8A/wAkkkkkv/pLbJJbZIAkm222222kkgAJJLbbbbJJJJJJJJJf7bbbbbJJJbSQAG2/9tu2229trbZJbJLblkk222220kkgAJJJbbbbbJJJJJJJJJP/AP2/22ySSW0kAFtpbf8A/wAk/wC22yS2yW7btpJJtttJJAAASSSW22222SSSSbbbbbf/ AP8A / wD / AP0kktpIABJSb + 2220kkkklsk / 27SbaSbbYAAAAkkkltttttskkkk2222223 / wD / AP8A / wDttCSQACSAWlv / APbSSSW22Tf / ADaTaTaAJJIAkgEktttttttskkkk2222SST / AP8A / wD / ANtt+SQASQCQG1t/ZJLbbZJt+02k0CQCQCSSIJJLbbbbbbbbbf8A/wD+2ySSf/8A/wD/AP222/bYAJIAJBKTe1tgANt223bSbAIJBAJABNkkklttttttttt//wD/AP8A/wD/AP8A/wD/AP7bbb//AKSBJABIBAbT+lpABP8Atsm2kSCQQTLZbJLbJJJJbbbfbbbbf/8A/wD/AP8A/wD/APtttt//AP7ZNkgAkAkEhtPyUgJttpJJsgEAy2Wff7 / bf / bbbbf + / wD / AP8A / wD / AP8A / wD / AP8Abbbbf / 8A / wBtv / 0kCSBbLZSm17KQm / 8AttoAkgGS77777fb / AG // ANttttv / AP8A / wD / AP8A / wBttttv / wD / AO222 / 8Atk AP222/8A/wDSb/pJNoS2SyWVpqWFreyAAAkiT7fb75sFMNJpNtJJtttJLbbbbbf/AP8A9tt//wD7be2yS2tJNpS2SyWdJywNa2AJmiT/AG/2+IIJBBBBAJAJICSbbb//AP8A/wD+223/APtt/wD/AEkttkltSTbWslstzTcob1pCT2/+3/3wIIIJBBBBBAJABJJIASW2222//wDtt/8Abbf+SS2yS2yAtpfyWy7tOXpyUpb+bb/b8AgkJ77fb77fWySkgAEkkv8A/wD9ttv/ ALb/AO2/skltkltkhJSf2tl+aFnSsje0tP8At/ASCU99vv8Afb7/AH+3+0lJJIAH/wD/AP7bNrb/AG39kltkn/22toBa3+3yYszVsT8kBHtgJAIT331spBAITX+/+2//AIAAAJtv/wDJNpN/b+SW2TdtJP8A20JAb27TEublqXsASQJIBALX3lhAIJBBBBIBaX/+2wAAEk3/AMk2k3t/JbZC2kmSQB//AAEgMgmXp2VrWkpbAEgEpPeSkFNpvffEAgEgAt7bbIACSX/ZtJ/ byWyQtJMkgAkk bf0AkA2dK2N6Qt//AABIDa/lgIbX2+/32+/0tABJK22QABtsm/2+lktkLSbJkn/+wAP+1sluzUtS9gS//wACSE1vZYUl9ZbKCDPt/t/pCSQNtkCSZJbJZLLQCUmwJP8A/bb/ALIG/wBv+k5K1rS1ttoS0m9rLQ09ZYSCCCAQCQv9tqSTf/2yADZLJQCAUm3Jf8gASTbsgSVu0jbk/IG//wDylpN7WShtWWEJpprsEgkgEvbfsk3/AOSRIBIJBDaX8l/SAJbbYAm7IAJAl6XtCS//APYk2l7LQ2rLCmvvvt9/ tbACSBttgAJNv0m02ml9vZK2gL//AP7ZIH/6C2zdsSEtbbbbtpPyWxtGSpp6yyy2b/b/AG1JIE22QAtv2/32+3loCbUm/wCSSZNkSftt/wBJ22BN/wD/AP8AJt6WStNyxNOWUEgkAkBt7b+kgDbZskgWyWSgkApL2zJAkkkgTYklbNtqSUtLbf8A/wAk35LQ2rZ0jLCm02ASACSEn/8A0kE//wDSBIBAIDS/0lLaAm237JG2JJSSNtgTb+2226WtktSYliYtjTa/2/2lJAAJb/8AySSb9t/t/v8Af7WkJI2//wC22zJ+0JJsklLSSf8A /wDbyS2SNJ2Vp2VJr/b/AG3/APtISSSft+SSQJf9/t+ASAm/ZMkgCT/sA/8ASSW2hJtpJMkkSS2QtK2dqWNp+WyS/wD223/9gAAW3/ZIAJIBIBID/wDpAkiSSQFvSEv7ZIA20k2QAABLbYm1LY2pUmtZCSAAW2/9ttpAABNv/wDaEkC2zb/aABN222QAv6AtrSElpJtoAkkk20BNqWxNyVJ6WgEkgABJtt//AP8ASQAJv/8A7b/7f/IAAN+22ySUla0pJttJJtoEkAC3kBNtS2puQtPyEgAkkkkAJJJLbf8ApJIAAbbSTbYAAA//ALbbpJaE / ZE2kkm2kSADftsm39paE35Wl7ASAEXSSSSSS2239ttCSSQACSQAAAf / AP2kkgCWxNyXtJJtpMgAmbb/AP22lsCf0pa9gBIW29tpJJJJACSX/wD9IACSSAAABf8A/wDpJJJAFsTYl+yTbSZAJm3/APtLbaAm9pSl/YCVttv7bbJAAAASW3tt/wD22SCSS2//AP8AySSSQBbM2Jftu2kyATN/9siQAC29pSQv4AS1tt//AG2SSSQkkkBJ/wD+22239t//AP8A9skAkkgC3NgW7b/bEgET/bEkktvbb0kD/wAAJO23/wD/AP2SSSS0kAAlt7bbf/8A/wD/AP8A/bbJABJJAv2YBu2/25IJG / 2JJG22 / wDQAD / sCSNtv / 8A / wD / ALJJJbbAASSEkv8A / wD / AP8AbbfttskgAkkC / bkE / b / aEglb7Ukg ++ wAAE / bYkgTb / 8A / wDJ2 / wD2SSW2yQEkAJNt / wC222227 +1IDe3/koDW+kJAJIkk22/bYAEt/8Askkk223JJLbJJSSAAS220kkkkkkm2ySSSUl/tCAG9v8AykN7+Qkgbbf/AP8A2kAJbbfkkkkkm22kNJbZJLSAASWW2kkkkkkkm2ySSUk/9KQE3tvJQmt7IST/AP8A+SSSANttkSSSSSSTbbSSGtskltAAJJJLaSSSSSSSLbJbSS/8lJCbe3kIT2tkJCSSSTJJNttskSSSSSSSbbaSS1tkktoAAJJJJbSSSSSSSLbaSS39khJSb2shSe1sALbJJJJttkkkCSSTSSSSTbbSSS/skltoEABJJJLaSSSSSSLaSS2/skpKSb1sKT2toJJJJEkkkkkkSSTbbSSSSTbbSST9skttskgABJJJZCSSSSaSSSS3tskBaTetjSf0tgEkkkkkkkkASTbbbbSSSSbbaSSXNkktttkkAAJJJJICSQLaSSSW3tskBaT0sbT/AJJJJJJJJJJAEm222222kkkkm22k kmzbJJbbbZJAASSSSW2220kkkktbbZC0npYml/ZJJJJJJbbSSS2222222kkkkm22kkm3bJJLbbbZIAASSSSSS220kktpLbZG0//AP8A9tv7bSSSSSTbbLbbbbbbbbbbaSSSSSSSSSSSTbbbbSQAAlttttttttmzaZkts/8A/wC3/wDpbbSSSSSbbZbbbbbbbbbbbbSSSSSSSSSSSSSTbbbaCAAEkkkkktt2bSJklm222/8A/wDlttJJJJNttlttttttttttttpJJJJJJJJJJJJJNtttskgAASASSW/ZtIE2bbbbbf8AbbbaSSSSTbbbbbbbbbbbbbbbbbbbbbbbbbbaSSSSTbbbZJJJJNkk/wAk2kBttttttv8AtttpJJJJtttttttttttttttttttttttttttttpJJJJIIAAAAkmyT/wCSbW2222222/bbbSSSSSTbbbbbbbbbbbbbbbbbbbe22237bbbbbbSSSQAAAAAJtk3/APv/AP7bbbbbJtttpJJJJJJJJttttttttttttt7bZJJbbbJJP9tttttttkkkkgAA23bb/wD/APtttttk2220kkkkkkkkkkk222222229tkktttttttttttk2222SSSSSSSAALbf/AP8A/wDttttsk222kkkkkkkkkkkkm222223tklttttttttttttttkkkkkgAAASSSQAD/AP8A/wD9ttttkm220kkkkkkkkkkkkm22221sktttttt//wD/AP2222222SSAJIAAAAAJJP8A/wD/AP8Attttsk2220kkkkkkkkkkkk22221skttttt/ / AP8A / wD / AP8A / wD / AP8A / wD7bbbaSSSQAAD / AP8A / wD / APbbbbZNtttpJJJJJJJJJJJJttttbJbbbbb / AP8A / wD / AP8A / wD / AP8A / wD / APttttttttpJJP8A / wD / AP8A P8A/wD+2kkkkkkkkv8A/wD/AP8A9ttttsk222222222220kkkkm222sktttt/8A/wD/AP8A2/bbbbbbbbbbbbSSSSSS/wD/AP8A/wD222222SfbbbbbbbbbbaSSSSbbbbSSW223/wD/AP8A92222222222222//ALbbbbZv/wD/AP8A9tttttklv22222222220kkkk2222kltlt/8A/wD/APttttttttttt/8A/wD/APbbbbZt/wD/AP8Attttttkkv22220kkk222kkkk2222kktltv8A /wD/ANttttttttt//wD/AP8Ab/7bJJJtt/8A7bbbbbbZJL9tttJJJJJtttJJJJtttpJLbLb/AP8A/wDbbbbbbbb/AP8A/wD23/6SSSSSbbbbbbbbbbbJJb9ttJJJJJJJttpJJJttttJJbJbf/wD+2222222//wD/AG3/AOkkm2kkkm2222222222yS37bbaSSSSSSbbaSSSbbbbSSSyW3/8A/ttttttt/wD/ANt/0kkm0kkkkm22222222222237bbaSSSSSSTbbSSSbbbbSSS2S3/8A/wDbbbbbb/8A /t/0kkm0kkm22v222222222222/bbbaSSSSSSTbbSSSbbbbSSSWS2/8A/wDbbbbbf/8A9v8ApJJpJJJtJJL/ALbbbbbbbbbbftttttJJJJJJNttJJJttttJJJZLb/wD/ANttttt//wC//SSaSSSTSSSS/wC2222222222/bbbbbSSSSSSSbbSSSbbbbSSSSSW/8A/wDbbbbb/wD9/wDpJtJJJJJJJJL/APbbbbbbbbbfttttttJJJJJJJttJJJttttJJJLJb/wD/ANttttv/AP3/AEk2kkkkkkkkkv/EABQRAQAAAAAAAAAAAAAAAAAAAOD/2gAIAQMBAT8QAAH / xAAUEQEAAAAAAAAAAAAAAAAAAADg / 9oACAECAQE / EAAB / 8QAIBABAQEBAAIDAAMBAAAAAAAAEQABE FBgIEBwMICwwP/aAAgBAQABPxD/AJvl4zMz7uzMzM8fdWZmZmZmZmZmZ9tZmZmZmZmZn4MzMzMz7EzMzMzMzMzMzMzMzMzMzxmZmZ9ZZmZmZmZmZmZmZmZmZmZmZmZmfgzPqbMzMzMzMzMzMzMzMzMzMzMzMzMzMzMz6YzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzxmZn0ZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmfMMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMz49mZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZs2zZmZmfEMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzZtm2bMzMzMzMzMz/A/RZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZs2zbNs2zbNmZmZmZmZmZmZmZnr//TeM8eMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzxmfrMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzM8ZmZmePGZn7T1mZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmePHjPHr4VmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZ48eszPXjMzMzPHrx8czMzMzMzMzMzMzMzMzMzMzMzMzMzMz1n7j9FmZmfDszMzMzMzMzMzMzMzMzMzM+xMzMzMzMzMzMzMzMzMzPl3yTMzMzM9ZmZmfizPm2fJMzMz8GZmZnzz5Z68fi/3GI/sCf5Ox+Bnv5HvZ+AH4ERHvx+Bnv5/gBf/Z'); 背景サイズ：含む; } `））; document.head.appendChild（styleEl）; }）; }）（）;
では、パフォーマンスはどうですか？ ええと、背景を頻繁に変更したり、ぼかし半径を調整したりしない限り、それは可能な限り高速です！ 全体として、この手法のパフォーマンス特性は、パフォーマンスボックスシャドウトランジションについて前に示した方法に匹敵します。
