asked on

CSS - add inset shadow to speech bubble

Hi, I have some code I found to create a speech bubble. However the code has a shadow on the outside of the bubble. How do I get this to be an inset shadow on the inside edge of the bubble?

.bubble {
  background-color: #ffffff;
  background-image: -webkit-linear-gradient(
    top,
    hsla(0, 0%, 100%, 0.5),[embed=file 1335990]
    hsla(0, 0%, 100%, 0)
  );
  background-image: -moz-linear-gradient(
    top,
    hsla(0, 0%, 100%, 0.5),
    hsla(0, 0%, 100%, 0)
  );
  background-image: -ms-linear-gradient(
    top,
    hsla(0, 0%, 100%, 0.5),
    hsla(0, 0%, 100%, 0)
  );
  background-image: -o-linear-gradient(
    top,
    hsla(0, 0%, 100%, 0.5),
    hsla(0, 0%, 100%, 0)
  );
  background-image: linear-gradient(
    top,
    hsla(0, 0%, 100%, 0.5),
    hsla(0, 0%, 100%, 0)
  );
  border-radius: 5px;
  box-shadow: inset 0 1px 1px hsla(0, 0%, 100%, 0.5),
    3px 3px 0 hsla(0, 0%, 0%, 0.1);
  color: #333;
  display: inline-block;
  font: 16px/25px sans-serif;
  padding: 15px 25px;
  position: relative;
  text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.5);
}

.bubble:after,
.bubble:before {
  border-bottom: 25px solid transparent;
  border-right: 25px solid #ffffff;
  bottom: -25px;
  content: "";
  position: absolute;
  right: 25px;
}

.bubble:before {
  border-right: 25px solid hsla(0, 0%, 0%, 0.1);
  bottom: -28px;
  right: 22px;
}

Open in new window

bubble.jpeg

Julian Hansen

Can you give us some HTML that goes with this or a link to show it in action.

Simon

ASKER

<span class="bubble">Speech bubble with a shadow</span>

using codepen....https://codepen.io/catmull/pen/wBwPZv

Simon

ASKER

Wrong codepen there sorry. Just use the html.

Julian Hansen

And how do you want it to look?

Simon

ASKER

sorry I have a codepen saved now - try this link.....https://codepen.io/Sjohnson805/pen/xzLRZP

Simon

ASKER

So if you look at the bubble it has a drop shadow on the outside, I need this shadow on the inside of the bubble.

Julian Hansen

Ok, still need to understand what you want to change.

Simon

ASKER

ok I just uploaded an attachment, this image shows where the shadow should appear. The shadow should appear inside the bubble not on the outside, using the 'inset' css syntax I believe. I have had a play but could not get it to work.

Thanks

Julian Hansen

The box-shadow inset attribute puts the shadow on the inside.
So adding this style to the box-shadow
inset 0 0 10px #000000
Will put the shadow on the inside.

However the trick is how to do that on the triangle.

Does the image you posted come from an existing site?

Simon

ASKER

ok thanks, no the image posted is from our graphic designer. This is the requirement for the new web page I'm creating.

Simon

ASKER

So I have got to this part before :). The bit of code you mentioned does insert the box shadow inside the bubble but not inside the triangle of the speech bubble. This was where I was struggling yesterday. Any ideas how I can follow suit with setting the inset box shadow on the triangle part of the bubble. I am beginning to think this cannot be done via CSS and may have to just have a standard bubble with no shadows, what do you think?

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Simon

ASKER

Thanks Julian, good idea, I shall go down this route. Many thanks for your advice.

Julian Hansen

You are welcome.