【CSS】filter:drop-shadowが面白い！【実験】
どうも！LSSです！！
だいぶ古い記事ですが、
で、CSSフィルターのdrop-shadowを使ってみた事がありました。
CSSフィルターは他にも色々あり、それを用いて
↑こんな事も試してみた事がありました。
今回はまたdrop-shadowを使い、他のshadow関連プロパティであるtext-shadowやbox-shadowとはまた違った影効果を試してみます。
影つき吹き出し
radial-gradientで描いた
影の形に基づいた
影がつきます！
影の形に基づいた
影がつきます！
コード
<style>
.fukidashi{
width:300px;
text-align:center;
padding:5%;
background:
radial-gradient(farthest-side,#ffffff 30%,#aaddaa 99.9%,transparent 100%) 0% 0%/100% 100%
,radial-gradient(farthest-side at 0% 0%,transparent 99.9%,#aaddaa 100%) 0% 100%/50% 50% no-repeat
;
filter:drop-shadow(5px 10px 3px #446644);
}
</style>
<div class="fukidashi">radial-gradientで描いた<br />影の形に基づいた<br />影がつきます！</div>
例えばbox-shadowでやると、こうなります
box（枠）としては四角で、
その中に楕円を描いてるので
まぁこうなるわけです。
その中に楕円を描いてるので
まぁこうなるわけです。
filter:drop-shadow(5px 10px 3px #446644);
の部分を、
box-shadow:5px 10px 3px #446644;
に書き換えてみると↑のようになります。
box-shadowはboxにつける影、という事ですね。
例えばtext-shadowでやると、こうなります
text-shadowは文字に
影をつけるプロパティ
なので、こうなります。
影をつけるプロパティ
なので、こうなります。
text-shadow:5px 10px 3px #446644;
に書き換えるとこうなります。
あとがき
box-shadow、text-shadowは割と役割がはっきりしているのに対し、filter:drop-shadowは描かれたものの形を認識して、いい感じに影を作ってくれますね^^
ちなみに、今回の実験台に使ったのは、
ですが、吹き出しの尖った部分をconic-gradientからradial-gradientに変えてみました。
他に、楕円部分にグラデーションをかけてみたりも。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
