可滚动的渐变聊天气泡

huangapple
go评论91阅读模式
英文:

Scrollable gradient chat bubbles

问题

我想要一个白色的容器，其中的聊天气泡被掩盖成渐变，当滚动时，它将随下方的渐变而变化，就像这个示例中所示：

可滚动的渐变聊天气泡

我尝试过使.container中位于任何chatBubble后面的部分变为透明，以便.root的背景可见。

  1. .root {
  2.   background-color: linear-gradient(red, yellow);
  3.   width: 100vw;
  4.   height: 100vh;
  5. }
  7. .container {
  8.   width: 100%;
  9.   height: 100vh;
  10.   background-color: white
  11. }
  13. .chatBubble {
  14.   background-color: transparent;
  15.   border-radius: 4px;
  16.   min-width: 50;
  17.   padding: 10px;
  18. }
  1. <div class="root">
  2.   <div class="container">
  3.     <chatBubble>This is a chat bubble</chatBubble>
  4.     <chatBubble>This is another chat bubble</chatBubble>
  5.   </div>
  6. </div>
英文:

I want a white container with chat bubbles masked to a gradient that when scrolled will change with the gradient below, as seen in this example:

可滚动的渐变聊天气泡

I've tried making the part of .container that is behind any chatBubble transparent so that the background of .root is visible.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .root {
  2.   background-color: linear-gradient(red, yellow);
  3.   width: 100vw;
  4.   height: 100vh;
  5. }
  7. .container {
  8.   width: 100%;
  9.   height: 100vh;
  10.   background-color: white
  11. }
  13. .chatBubble {
  14.   background-color: transparent;
  15.   border-radius: 4px;
  16.   min-width: 50;
  17.   padding: 10px;
  18. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;root&quot;&gt;
  2.   &lt;div class=&quot;container&quot;&gt;
  3.     &lt;chatBubble&gt;This is a chat bubble&lt;/chatBubble&gt;
  4.     &lt;chatBubble&gt;This is another chat bubble&lt;/chatBubble&gt;
  5.   &lt;/div&gt;
  6. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 2

你可以从 .bubble 中添加 "投影阴影"：

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. .container {
  8.   --gap: 20px;
  9.   --width: 800px;
  10.   --background: #fff;
  11.   display: flex;
  12.   flex-direction: column;
  13.   max-width: var(--width);
  14.   margin: 16px auto;
  15.   padding: 0 16px;
  16.   overflow: hidden;
  17.   gap: var(--gap);
  18.   box-shadow: 0 0 0 100vw var(--background);
  19.   font-family: sans-serif;
  20. }
  22. .container:before {
  23.   content: '';
  24.   inset: 0;
  25.   position: fixed;
  26.   z-index: -1;
  27.   background: linear-gradient(purple, blue);
  28. }
  30. .bubble {
  31.   max-width: 80%;
  32.   background-color: lightgray;
  33.   border-radius: 16px;
  34.   padding: 8px 16px;
  35.   box-shadow: 0 0 0 var(--gap) var(--background);
  36.   position: relative;
  37. }
  39. .bubble::before,
  40. .bubble::after {
  41.   content: '';
  42.   position: absolute;
  43.   inset: calc(var(--gap) / -2) auto;
  44.   background-color: var(--background);
  45.   width: var(--width);
  46. }
  48. .bubble::before {
  49.   right: 100%;
  50. }
  52. .bubble::after {
  53.   left: 100%;
  54. }
  56. .bubble.primary {
  57.   background-color: transparent;
  58.   color: #fff;
  59.   align-self: flex-end;
  60. }
  1. <div class="container">
  2.   <div class="bubble">show weekend?</div>
  3.   <div class="bubble primary">I'm down!</div>
  4.   <!-- 更多内容 -->
  5. </div>
英文:

You can "drop shadows" from .bubble:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. .container {
  8.   --gap: 20px;
  9.   --width: 800px;
  10.   --background: #fff;
  11.   display: flex;
  12.   flex-direction: column;
  13.   max-width: var(--width);
  14.   margin: 16px auto;
  15.   padding: 0 16px;
  16.   overflow: hidden;
  17.   gap: var(--gap);
  18.   box-shadow: 0 0 0 100vw var(--background);
  19.   font-family: sans-serif;
  20. }
  22. .container:before {
  23.   content: &#39;&#39;;
  24.   inset: 0;
  25.   position: fixed;
  26.   z-index: -1;
  27.   background: linear-gradient(purple, blue);
  28. }
  30. .bubble {
  31.   max-width: 80%;
  32.   background-color: lightgray;
  33.   border-radius: 16px;
  34.   padding: 8px 16px;
  35.   box-shadow: 0 0 0 var(--gap) var(--background);
  36.   position: relative;
  37. }
  39. .bubble::before,
  40. .bubble::after {
  41.   content: &#39;&#39;;
  42.   position: absolute;
  43.   inset: calc(var(--gap) / -2) auto;
  44.   background-color: var(--background);
  45.   width: var(--width);
  46. }
  48. .bubble::before {
  49.   right: 100%;
  50. }
  52. .bubble::after {
  53.   left: 100%;
  54. }
  56. .bubble.primary {
  57.   background-color: transparent;
  58.   color: #fff;
  59.   align-self: flex-end;
  60. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;container&quot;&gt;
  2.   &lt;div class=&quot;bubble&quot;&gt;show weekend?&lt;/div&gt;
  3.   &lt;div class=&quot;bubble primary&quot;&gt;I&#39;m down!&lt;/div&gt;
  4.   &lt;div class=&quot;bubble&quot;&gt;lets do this its been way to long since we were all together!&lt;/div&gt;
  5.   &lt;div class=&quot;bubble primary &quot;&gt;Whos down for a pregame&lt;/div&gt;
  6.   &lt;div class=&quot;bubble&quot;&gt;YES! I got the day off! Say when and where?&lt;/div&gt;
  7.   &lt;div class=&quot;bubble primary&quot;&gt;Hows about Old Town at 4? we can get some grub and then head over to the venue&lt;/div&gt;
  8.   &lt;div class=&quot;bubble&quot;&gt;Yeah getting the band back together&lt;/div&gt;
  9.   &lt;div class=&quot;bubble&quot;&gt;show weekend?&lt;/div&gt;
  10.   &lt;div class=&quot;bubble primary&quot;&gt;I&#39;m down!&lt;/div&gt;
  11.   &lt;div class=&quot;bubble&quot;&gt;lets do this its been way to long since we were all together!&lt;/div&gt;
  12.   &lt;div class=&quot;bubble primary &quot;&gt;Whos down for a pregame&lt;/div&gt;
  13.   &lt;div class=&quot;bubble&quot;&gt;YES! I got the day off! Say when and where?&lt;/div&gt;
  14.   &lt;div class=&quot;bubble primary&quot;&gt;Hows about Old Town at 4? we can get some grub and then head over to the venue&lt;/div&gt;
  15.   &lt;div class=&quot;bubble&quot;&gt;Yeah getting the band back together&lt;/div&gt;
  16.   &lt;div class=&quot;bubble&quot;&gt;show weekend?&lt;/div&gt;
  17.   &lt;div class=&quot;bubble primary&quot;&gt;I&#39;m down!&lt;/div&gt;
  18.   &lt;div class=&quot;bubble&quot;&gt;lets do this its been way to long since we were all together!&lt;/div&gt;
  19.   &lt;div class=&quot;bubble primary &quot;&gt;Whos down for a pregame&lt;/div&gt;
  20.   &lt;div class=&quot;bubble&quot;&gt;YES! I got the day off! Say when and where?&lt;/div&gt;
  21.   &lt;div class=&quot;bubble primary&quot;&gt;Hows about Old Town at 4? we can get some grub and then head over to the venue&lt;/div&gt;
  22.   &lt;div class=&quot;bubble&quot;&gt;Yeah getting the band back together&lt;/div&gt;
  23. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

这是我目前的代码，尝试将其遮蔽以便可以使用渐变的白色背景。

  1. html,
  2. body,
  3. .container {
  4.   height: 100%;
  5. }
  7. body {
  8.   margin: 0;
  9.   font-family: system-ui;
  10. }
  12. .container {
  13.   display: flex;
  14.   flex-flow: column nowrap;
  15.   max-width: 60ch;
  16.   margin: auto;
  17.   padding: 1rem;
  18.   background-color: white;
  19. }
  21. .container::before {
  22.   content: '';
  23.   position: fixed;
  24.   inset: 0;
  25.   background: linear-gradient(red, yellow);
  26. }
  28. .bubble {
  29.   z-index: 1;
  30.   min-width: 50px;
  31.   width: fit-content;
  32.   background-color: #eee;
  33.   border-radius: 4px;
  34.   padding: 0.5em;
  35.   margin: 0.2em;
  36.   text-wrap: balance;
  37. }
  39. .bubble.primary {
  40.   color: white;
  41.   background-color: transparent;
  42.   background-blend-mode: multiply;
  43.   align-self: end;
  44.   text-align: end;
  45. }
  1. <div class="container">
  2.   <div class="bubble">show weekend?</div>
  3.   <div class="bubble primary">I'm down!</div>
  4.   <div class="bubble">lets do this its been way to long since we were all together!</div>
  5.   <div class="bubble primary">Whos down for a pregame</div>
  6.   <div class="bubble">YES! I got the day off! Say when and where?</div>
  7.   <div class="bubble primary">Hows about Old Town at 4? we can get some grub and then head over to the venue</div>
  8.   <div class="bubble">Yeah getting the band back together</div>
  9.   <div class="bubble">show weekend?</div>
  10.   <div class="bubble primary">I'm down!</div>
  11.   <div class="bubble">lets do this its been way to long since we were all together!</div>
  12.   <div class="bubble primary">Whos down for a pregame</div>
  13.   <div class="bubble">YES! I got the day off! Say when and where?</div>
  14.   <div class="bubble primary">Hows about Old Town at 4? we can get some grub and then head over to the venue</div>
  15.   <div class="bubble">Yeah getting the band back together</div>
  16.   <div class="bubble">show weekend?</div>
  17.   <div class="bubble primary">I'm down!</div>
  18.   <div class="bubble">lets do this its been way to long since we were all together!</div>
  19.   <div class="bubble primary">Whos down for a pregame</div>
  20.   <div class="bubble">YES! I got the day off! Say when and where?</div>
  21.   <div class="bubble primary">Hows about Old Town at 4? we can get some grub and then head over to the venue</div>
  22.   <div class="bubble">Yeah getting the band back together</div>
  23. </div>
英文:

This is what I've got so far, trying to mask it so I can get the white background to work with the gradient.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. html,
  2. body,
  3. .container {
  4.   height: 100%;
  5. }
  7. body {
  8.   margin: 0;
  9.   font-family: system-ui;
  10. }
  12. .container {
  13.   display: flex;
  14.   flex-flow: column nowrap;
  15.   max-width: 60ch;
  16.   margin: auto;
  17.   padding: 1rem;
  18.   background-color: white;
  19. }
  21. .container::before {
  22.   content: &#39;&#39;;
  23.   position: fixed;
  24.   inset: 0;
  25.   background: linear-gradient(red, yellow);
  26. }
  28. .bubble {
  29.   z-index: 1;
  30.   min-width: 50px;
  31.   width: fit-content;
  32.   background-color: #eee;
  33.   border-radius: 4px;
  34.   padding: 0.5em;
  35.   margin: 0.2em;
  36.   text-wrap: balance;
  37. }
  39. .bubble.primary {
  40.   color: white;
  41.   background-color: transparent;
  42.   background-blend-mode: multiply;
  43.   align-self: end;
  44.   text-align: end;
  45. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;container&quot;&gt;
  2.   &lt;div class=&quot;bubble&quot;&gt;show weekend?&lt;/div&gt;
  3.   &lt;div class=&quot;bubble primary&quot;&gt;I&#39;m down!&lt;/div&gt;
  4.   &lt;div class=&quot;bubble&quot;&gt;lets do this its been way to long since we were all together!&lt;/div&gt;
  5.   &lt;div class=&quot;bubble primary &quot;&gt;Whos down for a pregame&lt;/div&gt;
  6.   &lt;div class=&quot;bubble&quot;&gt;YES! I got the day off! Say when and where?&lt;/div&gt;
  7.   &lt;div class=&quot;bubble primary&quot;&gt;Hows about Old Town at 4? we can get some grub and then head over to the venue&lt;/div&gt;
  8.   &lt;div class=&quot;bubble&quot;&gt;Yeah getting the band back together&lt;/div&gt;
  9.   &lt;div class=&quot;bubble&quot;&gt;show weekend?&lt;/div&gt;
  10.   &lt;div class=&quot;bubble primary&quot;&gt;I&#39;m down!&lt;/div&gt;
  11.   &lt;div class=&quot;bubble&quot;&gt;lets do this its been way to long since we were all together!&lt;/div&gt;
  12.   &lt;div class=&quot;bubble primary &quot;&gt;Whos down for a pregame&lt;/div&gt;
  13.   &lt;div class=&quot;bubble&quot;&gt;YES! I got the day off! Say when and where?&lt;/div&gt;
  14.   &lt;div class=&quot;bubble primary&quot;&gt;Hows about Old Town at 4? we can get some grub and then head over to the venue&lt;/div&gt;
  15.   &lt;div class=&quot;bubble&quot;&gt;Yeah getting the band back together&lt;/div&gt;
  16.   &lt;div class=&quot;bubble&quot;&gt;show weekend?&lt;/div&gt;
  17.   &lt;div class=&quot;bubble primary&quot;&gt;I&#39;m down!&lt;/div&gt;
  18.   &lt;div class=&quot;bubble&quot;&gt;lets do this its been way to long since we were all together!&lt;/div&gt;
  19.   &lt;div class=&quot;bubble primary &quot;&gt;Whos down for a pregame&lt;/div&gt;
  20.   &lt;div class=&quot;bubble&quot;&gt;YES! I got the day off! Say when and where?&lt;/div&gt;
  21.   &lt;div class=&quot;bubble primary&quot;&gt;Hows about Old Town at 4? we can get some grub and then head over to the venue&lt;/div&gt;
  22.   &lt;div class=&quot;bubble&quot;&gt;Yeah getting the band back together&lt;/div&gt;
  23. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月25日 06:46:16
  • 转载请务必保留本文链接：https://go.coder-hub.com/76327853.html
  • css
  • css-gradients
  • css-selectors
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定