Basic Speech Bubbles
Code Snippet Library
The following examples are easy ways to create speech bubbles.
Example 1: Rounded Speech Bubble
In this example, border-radius styles are combined with a subtle background-image radial gradient to create rounded speech bubbles. Margins are also added to the code to create a back-and-forth effect.
“First, I want to say thank you for making the effort to be accommodating to our lifestyle and schedules. I would suggest communication be a key focus. A lot of us are in different time zones, or work 12-hour days where we do not have access to a phone. It would greatly help students in situations like that to be responded to via email. I know emails get buried quite often, but sometimes that is the only means of communication we have.”
“The first interaction with students and teachers is, in my opinion, the most important of the course. I would recommend an ungraded assignment that is an opportunity for the students and instructor to get to know more about each other.”
“Please clarify the due date time zone. Are assignments due 11:59 p.m. in the time zone the student is in or the time zone for University Park?”
Rounded Speech Bubble Code
<div>
<div style="margin: 2.5rem 0 2.5rem 15%; border: solid #EFF1F4 2px; border-radius: 100px; padding: 0.75rem 2.25rem 1.5rem 2.25rem; background-image: radial-gradient(#EFF1F410 55%, #EFF1F499 75%);">
<p style="text-align: center;">“Quote here.”</p>
</div>
<div style="margin: 2.5rem 15% 2.5rem 0; border: solid #EFF1F4 2px; border-radius: 100px; padding: 0.75rem 2.25rem 1.5rem 2.25rem; background-image: radial-gradient(#EFF1F410 55%, #EFF1F499 75%);">
<p style="text-align: center;">“Quote here.”</p>
</div>
</div>
Example 2: Conversational Speech Bubble
In this example, once again, border-radius styles are combined with a subtle background-image radial gradient to create speech bubbles. However, here, the border-radius style is only applied to three sides of the four sides of the box. The resulting effect creates a triangle which emphasizes who is speaking.
“First, I want to say thank you for making the effort to be accommodating to our lifestyle and schedules. I would suggest communication be a key focus. A lot of us are in different time zones, or work 12-hour days where we do not have access to a phone. It would greatly help students in situations like that to be responded to via email. I know emails get buried quite often, but sometimes that is the only means of communication we have.”
“The first interaction with students and teachers is, in my opinion, the most important of the course. I would recommend an ungraded assignment that is an opportunity for the students and instructor to get to know more about each other.”
“Please clarify the due date time zone. Are assignments due 11:59 p.m. in the time zone the student is in? Or the time zone for University Park?”
Conversation-Emphasizing Speech Bubble Code
<div>
<div style="margin: 2.5rem 0 2.5rem 15%; border: solid #EFF1F4 2px; border-radius: 100px 100px 0 100px; padding: 0.75rem 2.25rem 1.5rem 2.25rem; background-image: radial-gradient(#EFF1F410 55%, #EFF1F499 75%);">
<p style="text-align: center;">“Quote here.”</p>
</div>
<div style="margin: 2.5rem 15% 2.5rem 0; border: solid #EFF1F4 2px; border-radius: 100px 100px 100px 0; padding: 0.75rem 2.25rem 1.5rem 2.25rem; background-image: radial-gradient(#EFF1F410 55%, #EFF1F499 75%);">
<p style="text-align: center;">“Quote here.”</p>
</div>
</div>
Modifications
These basic speech bubble styles can be easily modified to change
- the background-image gradient color (
background-image: radial-gradient (#EFF1F410 55%, #EFF1F499 75%);) and - the thickness of border (
border: solid #EFF1F4 2px;).