Gradient chat bubbles that are scrollable

Looking for a unique white container adorned with chat bubbles masked to a gradient effect that will dynamically change as you scroll, similar to the example provided:

In my attempt to achieve this, I made sure that the portion of .container behind any chatBubble is transparent so that the background of .root remains visible.

.root {
  background-color: linear-gradient(red, yellow);
  width: 100vw;
  height: 100vh;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: white
}

.chatBubble {
  background-color: transparent;
  border-radius: 4px;
  min-width: 50;
  padding: 10px;
}
<div class="root">
  <div class="container">
    <chatBubble>This is a chat bubble</chatBubble>
    <chatBubble>This is another chat bubble</chatBubble>
  </div>
</div>

csscss-selectorscss-gradients

Answer №1

If you want to create "drop shadows" for elements with the class .bubble, here's how you can do it:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  --gap: 20px;
  --width: 800px;
  --background: #fff;
  display: flex;
  flex-direction: column;
  max-width: var(--width);
  margin: 16px auto;
  padding: 0 16px;
  overflow: hidden;
  gap: var(--gap);
  box-shadow: 0 0 0 100vw var(--background);
  font-family: sans-serif;
}

.container:before {
  content: '';
  inset: 0;
  position: fixed;
  z-index: -1;
  background: linear-gradient(purple, blue);
}

.bubble {
  max-width: 80%;
  background-color: lightgray;
  border-radius: 16px;
  padding: 8px 16px;
  box-shadow: 0 0 0 var(--gap) var(--background);
  position: relative;
}

.bubble::before,
.bubble::after {
  content: '';
  position: absolute;
  inset: calc(var(--gap) / -2) auto;
  background-color: var(--background);
  width: var(--width);
}

.bubble::before {
  right: 100%;
}

.bubble::after {
  left: 100%;
}

.bubble.primary {
  background-color: transparent;
  color: #fff;
  align-self: flex-end;
}
<div class="container">
  <div class="bubble">show weekend?</div>
  <div class="bubble primary">I'm down!</div>
  <div class="bubble">lets do this its been way too long since we were all together!</div>
  <div class="bubble primary ">Whos down for a pregame</div>
  <div class="bubble">YES! I got the day off! Say when and where?</div>
  <div class="bubble primary">Hows about Old Town at 4? we can get some grub and then head over to the venue</div>
  <div class="bubble">Yeah getting the band back together</div>
  <div class="bubble">show weekend?</div>
  <div class="bubble primary">I'm down!</div>
  <div class="bubble">lets do this its been way too long since we were all together!</div>
  <div class="bubble primary ">Whos down for a pregame</div>
  <div class="bubble">YES! I got the day off! Say when and where?</div>
  <div class="bubble primary">Hows about Old Town at 4? we can get some grub and then head over to the venue</div>
  <div class="bubble">Yeah getting the band back together</div>
  <div class="bubble">show weekend?</div>
  <div class="bubble primary">I'm down!</div>
  <div class="bubble">lets do this its been way too long since we were all together!</div>
  <div class="bubble primary ">Whos down for a pregame</div>
  <div class="bubble">YES! I got the day off! Say when and where?</div>
  <div class="bubble primary">Hows about Old Town at 4? we can get some grub and then head over to the venue</div>
  <div class="bubble">Yeah getting the band back together</div>
</div>

Answer №2

I've been working on this code to create a gradient effect with a white background, here's what I have so far.

html,
 body,
 .container {
   height: 100%;
 }

 body {
   margin: 0;
   font-family: Arial, sans-serif;
 }

 .container {
   display: flex;
   flex-flow: column nowrap;
   max-width: 60ch;
   margin: auto;
   padding: 1rem;
   background-color: white;
 }

 .container::before {
   content: '';
   position: fixed;
   inset: 0;
   background: linear-gradient(blue, green);
 }

Here's the HTML structure for displaying some messages in bubbles: 

<div class="container">
  <div class="bubble">Hello</div>
  <div class="bubble primary">Hi there!</div>
  <div class="bubble">How are you doing today?</div>
  <div class="bubble primary ">I'm good, thanks!</div>
  <div class="bubble">Great to hear!</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to select a div element with a specific attribute using nth-child in CSS

I have encountered some outdated legacy blog code and am currently attempting to isolate the first div element with the attribute of "text-align: left". Below is a simplified example of the code snippet I am dealing with: <div class="et_pb_module e ...

css

Clicking on Fixed Positioning triggers a reset

When I activate the sidebar by clicking the menu button, it remains fixed in position until the first scroll. However, if I interact with the sidebar by clicking on it, the button resets and goes back to the top of the page. This issue seems to only occur ...

javascriptjqueryhtmlcss

Responsive Bootstrap tables nested within responsive tabs

Utilizing footable in conjunction with Boostrap Responsive Tabs leads to an issue post-resize. When the page is initially loaded on a desktop, everything functions properly until the screen is resized. Once the screen is resized, the tables within the tabs ...

javascripthtmlcsstwitter-bootstrapresponsive-design

The foundation gem is encountering an issue with incompatible units: 'rem' and 'px'

After installing the foundation gem version 5.5.2.1, I encountered an error when starting the application: Showing /home/user/Scrivania/sites/store/app/views/layouts/application.html.erb where line #9 raised: Incompatible units: 'rem' and &apos ...

cssruby-on-railssasszurb-foundationzurb-foundation-5

ImageMapster for perfect alignment

I'm struggling with centering a div that contains an image using imagemapster. When I remove the JS code, the div centers perfectly fine, indicating that the issue lies with the image mapster implementation. It's a simple setup: <div class=" ...

javascriptjqueryhtmlcss

Achieve vertical center alignment of elements within the sticky-top class using Bootstrap 4

I have been attempting to center elements within a div using the sticky-top class, but so far, I have not been successful. I have tried using the following classes: d-flex justify-content-center align-items-center flex-column body, html { height: 100 ...

htmlcssbootstrap-4

CSS page rule option for optimal display in Safari

What is the workaround for using alternative rules in Safari? I am currently implementing the angularPrint directive to enable print functionality on certain pages. This directive includes some helper classes in my document and utilizes the @page direct ...

htmlcssprintingsafarimedia-queries

Can HTML and CSS be used to create button text that spans two lines with different fonts?

When working with HTML attribute values, I am facing an issue where I can't get button text to display in two lines with different font sizes. I have attempted using whitespace in CSS for word wrap, but this solution does not solve my problem. I also ...

htmlcss

Using Vue.js to pass an image URL as a prop for CSS animation by converting it to a CSS variable

Need help with a component that features a hover animation displaying 4 rotating images: animation: changeImg-1 2.5s linear infinite; @keyframes changeImg-1 { 0%, 100% { background-image: url('images/wel1.png'); } 25% { background-image: ur ...

cssvue.js

Effective ways to position images within a card alongside a changing title

I have a requirement for displaying multiple cards with dynamic titles fetched from the backend. The challenge is to align images in a row regardless of the title length, ensuring alignment based on the longest title. Below is an illustration of what I am ...

javascripthtmlcsssass

Center-aligned Bootstrap responsive column with a fixed width

Currently, I am working on creating a login page with a fixed width and a centered column layout. This is similar to the design of the login page at https://www.amazon.com/sign-in. I attempted to achieve this layout using offset columns, as shown below: ...

htmltwitter-bootstrapcss

Alternative image loading in a figure element

I'm currently in the process of putting together an image gallery using Angular 4.3.0, where images are displayed as background images within figure elements rather than img tags. The images are initially resized to smaller dimensions before being use ...

javascripthtmlcssangularimage

Alignment of button within bootstrap column is skewed when screen size is reduced

My button is perfectly centered in one of my bootstrap columns, but things start to get messy when the screen size shrinks and the button overlaps with another column containing text. Adjusting the margins only seems to make things weirder. .center-btn- ...

htmlcsstwitter-bootstrap

Dynamic content alongside a stationary sidebar that adjusts in width

Attempting to create a switchable sidebar (toggling between short and long form) using bootstrap, multiple examples, and online resources. The width of the sidebar changes when toggled, and I want the content to appear next to it regardless of its length. ...

htmlcsstwitter-bootstrapcss-positionsidebar

Static size element overlapping side panel

I am trying to center a fixed width element on my page, ensuring that it stays centered if it fits within the page width but extends beyond the page if needed with scroll accessibility. I have almost achieved this, but the element overlaps with the sidebar ...

htmlcss

Column div being obscured by footer

My footer is causing overlap issues with the div above it on my mobile website. Here's a visual representation: Current view on my phone: https://i.stack.imgur.com/RpvWM.png Desired view: https://i.stack.imgur.com/KHVcm.png The code for the are ...

htmlcss

Encountering a TimeoutException error while utilizing WebDriverWait in Selenium logging on the glassdoor.co.in website

I am currently developing a web scraping tool to extract company reviews from Glassdoor. For the initial step, I am required to log in before extracting the reviews. Despite implementing a time.sleep and wait time for clicking the "Sign In" button, I encou ...

pythonseleniumweb-scrapingcss-selectorswebdriverwait

Tips for optimizing HTML5 markup elements to render effectively in Internet Explorer

How can I ensure that HTML5 markup elements such as <header>, <section>, and <footer> are displayed properly in Internet Explorer? I've noticed that when I apply CSS to these elements, the styling doesn't always work as expecte ...

csshtmlcss-selectorsmarkup

Tips for transferring a prop from a parent component to a child in Vue.js

I have a main component named Stepper that includes a child component called ShortSummary. I am attempting to pass a property from Stepper to ShortSummary by clicking on a radiobutton, but it is not working! Here's my setup. This is the code for Stepp ...

javascripthtmlcssvue.jsvuetify.js

Using JavaScript to Implement a Scrolling List

Currently, I am diving into the world of coding with HTML, JavaScript, and CSS for a college project. Unfortunately, my instructors aren't providing any assistance, so I'm turning to you for help. I have managed to put together some code to crea ...

javascripthtmlcssscroll