I am an experienced web developer with an eye for a solid UI/UX design. I have specialized in front-end development, responsive web design, modern web frameworks, and Content Management Systems. I also have experience in mobile apps development and back-end coding with PHP, Node.js, and Java. So I am a Full Stackish web developer with a strong passion for a beautiful front-end.
Published on December 22, 2017. Modified on December 25, 2017.
Here is an example how to create a CSS speech bubble with borders and drop shadow.
Let's start by creating a simple one with just rounded corners and arrow.
We need just one div to create a simple speech bubble. Though <blockquote>
is more semantic element in case you're using bubble for somebody's comment.
<div class="speech-bubble">
<p><strong>Demo speech bubble</strong></p>
<p>This is a simple CSS speech bubble.</p>
</div>
.speech-bubble {
background: #efefef;
-webkit-border-radius: 4px;
border-radius: 4px;
font-size: 1.2rem;
line-height: 1.3;
margin: 0 auto 40px;
max-width: 400px;
padding: 15px;
position: relative;
}
.speech-bubble p {
margin: 0 0 10px;
}
.speech-bubble p:last-of-type {
margin-bottom: 0;
}
.speech-bubble::after {
border-left: 20px solid transparent;
border-top: 20px solid #efefef;
bottom: -20px;
content: "";
position: absolute;
right: 20px;
}
Now we have a base. Let's add borders and drop shadow next. We need to add new HTML element for the arrow because we need to simulate borders and drop shadow with another elements.
Let's add HTML element <div class="speech-bubble-ds-arrow"></div>
for arrow.
<div class="speech-bubble-ds">
<p><strong>Demo speech bubble</strong></p>
<p>This is CSS speech bubble with borders and drop shadow.</p>
<div class="speech-bubble-ds-arrow"></div>
</div>
CSS is a little bit more complex here because we need to use ::before
and ::after
pseudo-elements. Class .speech-bubble-ds-arrow
will be used for the shadow of the arrow and .speech-bubble-ds-arrow::before
will be used for the border. Pseudo-element .speech-bubble-ds-arrow::after
will be the arrow.
.speech-bubble-ds {
background: #efefef;
border: 1px solid #a7a7a7;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
font-size: 1.2rem;
line-height: 1.3;
margin: 0 auto 40px;
max-width: 400px;
padding: 15px;
position: relative;
}
.speech-bubble-ds p {
margin-bottom: 10px;
}
.speech-bubble-ds p:last-of-type {
margin-bottom: 0;
}
.speech-bubble-ds-arrow {
border-left: 21px solid transparent;
border-top: 20px solid rgba(0, 0, 0, 0.2);
bottom: -25px;
position: absolute;
right: 15px;
}
.speech-bubble-ds-arrow::before {
border-left: 23px solid transparent;
border-top: 23px solid #a7a7a7;
bottom: 2px;
content: "";
position: absolute;
right: 5px;
}
.speech-bubble-ds-arrow::after {
border-left: 21px solid transparent;
border-top: 21px solid #efefef;
bottom: 4px;
content: "";
position: absolute;
right: 6px;
}
Well, it's ready. You can modify arrow border values or absolute positioning to change arrow size or position.
Here is a code snippet at CodePen to play around with bubble styles.
Embedded content: https://codepen.io/teroauralinna/pen/JMKyeB
24.10.2019
12.06.2019
26.03.2019
02.12.2018
10.11.2018
02.05.2018
04.04.2018
28.03.2018
25.10.2019
07.08.2019
10.07.2019
11.06.2019
09.06.2019
23.03.2019
23.03.2019
09.12.2018