drop-shadowの検索結果1 - 4 件 / 4件

• あとで読む

  【CSS】filter:drop-shadowが面白い！【実験】 - Little Strange Software

  • 8 users
  • little-strange.hatenablog.com
  • テクノロジー
  • 2022/01/28

  どうも！LSSです！！ だいぶ古い記事ですが、 little-strange.hatenablog.com で、CSSフィルターのdrop-shadowを使ってみた事がありました。 CSSフィルターは他にも色々あり、それを用いて little-strange.hatenablog.com ↑こんな事も試してみた事がありました。 今回はまたdrop-shadowを使い、他のshadow関連プロパティであるtext-shadowやbox-shadowとはまた違った影効果を試してみます。 影つき吹き出し コード 例えばbox-shadowでやると、こうなります 例えばtext-shadowでやると、こうなります あとがき 影つき吹き出し radial-gradientで描いた 影の形に基づいた 影がつきます！ コード <style> .fukidashi{ width:300px; text-a

  
• あとで読む

  【CSS】filter:drop-shadowなら、グラデーション文字にも影をつけられました^^ - Little Strange Software

  • 5 users
  • little-strange.hatenablog.com
  • テクノロジー
  • 2021/08/15

  どうも！LSSです！！ 【CSS】グラデーション文字をアニメーションしてみました - Little Strange Software 【CSS】グラデーション文字 応用編 - Little Strange Software でサンプルとして使用していた「きんきらきんのきーん」ですが、背景がグレーの枠に入れた状態でお披露目していました。 それには理由があって、「グラデーションに白を使っているため、そのまま白背景の記事に配置するとどうにもしまらない」からでした。 かといって、text-shadowで影をつける、という方法はグラデーション文字に関しては使用できず、背景色つきの枠で出していたんですね。 ですが今回、「グラデーション文字に影をつける」方法を見つけました！ きんきらきんのきーん filter:drop-shadow 参考までに、きんきらきんのきーん失敗例ｗ もし「きんきらきんのきーん」

  
• あとで読む

  画像の形に影を落とすfilter:drop-shadowのジェネレーターとプロパティについて | bad-company

  • 4 users
  • www.bad-company.jp
  • 世の中
  • 2020/10/26

  画像の形に影を落とすのによく使われるfilter関数のdrop-shadowを確認するためのジェネレーターです。 各種プロパティなどページ下部に詳しい説明を書いてあります。 box-shadowやReact Nativeのshadowのジェネレーターは別ページになります。 /* preview */ background-color: #fff; /* drop-shadow */ filter: drop-shadow(0px 0px 16px rgba(0,0,0,0.6));

  • お役立ち

  
• あとで読む

  CSS { In Real Life } | Drop-Shadow: The Underrated CSS Filter

  • 3 users
  • css-irl.info
  • テクノロジー
  • 2020/08/07

  This article was updated on 13 August 2020 to include additional reference material. If you’re familiar with CSS, you probably know all about the box-shadow property. But did you know there is a CSS filter, drop-shadow, that does something similar? Like box-shadow, we can pass in values for x-offset, y-offset, blur radius and colour: .my-element { filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0,

  • CSS
  • techfeed
  • あとで読む