CSSのbox-shadowで吹き出しに影をつける

2018年6月14日

どうしても影（ドロップシャドウ）をつけたい方こんにちわ。
そうでもない方も参考までにみてってよ！

先日こんな依頼がありました。
「吹き出しに影（ドロップシャドウ）をつけて欲しい」
ふむ、出っ張った部分に影つけるのは大変じゃねぇ？
ってことで、実際に使った方法を。

CSSで影（ドロップシャドウ）をつける基本

まずは普通に影（ドロップシャドウ）をつけてみる

HTML

  1. <div class="foo">foo</div>

CSS

  1. .foo {
  2. width: 50px;
  3. height: 30px;
  4. background: linear-gradient(-6deg,#007eff,#ff17b1);
  5. box-shadow: 4px 4px 5px 0 #666;
  6. color: #fff;
  7. }
foo

指定の仕方は次の順番、
box-shadow: 左右の位置 上下の位置 ぼかし 広がり 色 内側指定;
ぼかし、広がりは右から省略できる。
色、内側指定も省略できる。

よくみる吹き出しに影（ドロップシャドウ）をつけてみる

HTML

  1. <div class="balloon">balloon</div>

CSS

  1. .balloon {
  2. background-color: orange;
  3. border-radius: 10px;
  4. width: 300px;
  5. height: 50px;
  6. padding: 1em;
  7. position: relative;
  8. }
  9. .balloon::before {
  10. content: '';
  11. display: block;
  12. position: absolute;
  13. top: 50%;
  14. left: -15px;
  15. transform: translateY(-50%);
  16. border-right: 15px solid orange;
  17. border-top: 10px solid transparent;
  18. border-bottom: 10px solid transparent;
  19. }
  20. .balloon,.balloon::before {
  21. box-shadow: 4px 4px 5px 0 #ccc;
  22. }
bolloon

突出部分の影がおかしいじゃないのー！？
というわけで失敗。

吹き出しのとがった部分を、ボーダー（透過）で表現してるから
そこまで影がついてしまうのですねぇ・・・

CSSを駆使して吹き出しに影（ドロップシャドウ）をつける

吹き出し
適当にグラデにしてみた。
けどドロップシャドウが分かりにくいのでやめ。

はい！出来ました～
コードはこちら↓

HTML

  1. <div class="bar">
  2. <div>吹き出し<br>適当にグラデにしてみた。</div>
  3. </div>
  4. <div class="bar baz">
  5. <div>けどドロップシャドウが分かりにくいのでやめ。</div>
  6. </div>

CSS

  1. .bar,.baz {
  2. position: relative;
  3. margin: 1em;
  4. color: #fff;
  5. }
  6. .bar,.bar::after,.baz {
  7. border-radius: 20px;
  8. width: 300px;
  9. height: 100px;
  10. }
  11. .bar::before,.bar::after {
  12. background: linear-gradient(-6deg,#007eff,#ff17b1);
  13. }
  14. .baz::before,.baz::after {
  15. background: orange;
  16. }
  17. .bar,.bar::before {
  18. box-shadow:0 0 5px 0 #333;
  19. }
  20. .bar::after {
  21. content: '';
  22. display: block;
  23. position: absolute;
  24. top: 0;
  25. left: 0;
  26. }
  27. .bar::before {
  28. content: '';
  29. display: block;
  30. position: absolute;
  31. width: 20px;
  32. height: 20px;
  33. transform: translateY(-50%) rotate(-45deg) skew(20deg,20deg);
  34. top: 50%;
  35. left: -10px;
  36. }
  37. .bar div,.baz div {
  38. position: relative;
  39. z-index: 5;
  40. padding: 1em;
  41. }

CSSで吹き出しに影（ドロップシャドウ）をつける まとめ

今回のポイントは吹き出しの突出部分（とがったとこ）をどうやって表現するか。
よく見る吹き出しのようにborderで表現すると、
余計なところまで影（ドロップシャドウ）が付いてしまうので、
transformで要素を変形し、さらに要素を重ねることで実現できました。

ポイントになるコードを抜粋↓

CSS

  1. .bar,.bar::after,.baz { /* POINT 要素を重ねる */
  2. border-radius: 20px;
  3. width: 300px;
  4. height: 100px;
  5. }
  6. …
  7. .bar::before {
  8. …
  9. width: 20px;
  10. height: 20px;
  11. transform: translateY(-50%) rotate(-45deg) skew(20deg,20deg); /* POINT 要素を変形 */
  12. top: 50%;
  13. left: -10px;
  14. }

CSS, HTML, web制作CSS, CSS3, HTML5, webデザイン, web制作, コーディング, ドロップシャドウ, 影

Posted by アツシオクムラ