Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】filter:drop-shadowが面白い!【実験】

 どうも!LSSです!!

 

だいぶ古い記事ですが、

little-strange.hatenablog.com

で、CSSフィルターのdrop-shadowを使ってみた事がありました。

 

CSSフィルターは他にも色々あり、それを用いて

little-strange.hatenablog.com

↑こんな事も試してみた事がありました。

 

今回はまた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は描かれたものの形を認識して、いい感じに影を作ってくれますね^^

 

ちなみに、今回の実験台に使ったのは、

little-strange.hatenablog.com

ですが、吹き出しの尖った部分をconic-gradientからradial-gradientに変えてみました。
他に、楕円部分にグラデーションをかけてみたりも。

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^