Главная » Языки программирования

Speech bubbles with css

Содержание
  1. How to create a speech bubble with CSS
  2. 🔔 Table of contents
  3. What are speech bubbles and when they are useful?
  4. A basic speech bubble
  5. Example #1 — Testimonial CSS speech bubble
  6. Example #2 — Speech Bubble on button hover (Tooltip)
  7. Concluding thoughts
  8. 👋 About the Author
  9. 👉 See Also 👈
  10. 21 CSS Speech Bubbles
  11. Related Articles
  12. Author
  13. Links
  14. Made with
  15. About a code
  16. CSS Only Speech Bubble
  17. Author
  18. Links
  19. Made with
  20. About a code
  21. Pure CSS Responsive Speech Bubble
  22. Author
  23. Links
  24. Made with
  25. About a code
  26. Speech Bubbles
  27. Author
  28. Links
  29. Made with
  30. About a code
  31. Speech Bubbles
  32. Author
  33. Links
  34. Made with
  35. About a code
  36. Hello. I guess.
  37. Author
  38. Links
  39. Made with
  40. About a code
  41. Black Lives Matter Dialog Boxes
  42. Author
  43. Links
  44. Made with
  45. About a code
  46. Hello, World
  47. Author
  48. Links
  49. Made with
  50. About a code
  51. 8-bit Pixel Speech Bubble Text Balloon
  52. Author
  53. Links
  54. Made with
  55. About a code
  56. Apple iMessage in CSS
  57. Author
  58. Links
  59. Made with
  60. About a code
  61. Chat Bubbles
  62. Author
  63. Links
  64. Made with
  65. About the code
  66. Speech Bubble
  67. Author
  68. Links
  69. Made with
  70. About a code
  71. Pure CSS Thought Bubbles
  72. Author
  73. Links
  74. Made with
  75. About the code
  76. Responsive Speech Bubble
  77. Author
  78. Links
  79. Made with
  80. About the code
  81. Speech Bubble Caret
  82. Author
  83. Links
  84. Made with
  85. About the code
  86. Alternating Speech Bubbles
  87. Author
  88. Links
  89. Made with
  90. About the code
  91. Comic Book Speech Bubbles with SVG
  92. Author
  93. Links
  94. Made with
  95. About the code
  96. Pure CSS Speech and Thought Bubbles
  97. Author
  98. Links
  99. Made with
  100. About the code
  101. CSS Speech Bubble
  102. Author
  103. Links
  104. Made with
  105. About a code
  106. Comic Director Splash Animation
  107. Author
  108. Links
  109. Made with
  110. About the code
  111. Speech Bubble
  112. Author
  113. 35 CSS Speech Bubbles
  114. Latest Post
  115. 55 Cool CSS Calendars
  116. 19 Barcodes in CSS
  117. 25 CSS Masonry Layout Examples
  118. 23 CSS Card Layouts
  119. 27 CSS Subscribe Forms
  120. Pure CSS speech bubbles
  121. Progressive enhancement with pseudo-elements
  122. Example code
  123. A note on progressive enhancement
  124. A warning about Firefox 3.0
Читайте также:  Request error uncaught php exception symfony

How to create a speech bubble with CSS

How to create speech bubble with CSS and HTML. Speech bubbles can be used for testimonials or tooltips.

Dec 20, 2021 | Read time 5 minutes

🔔 Table of contents

In this article, we will go over how to create a speech bubble with a bit of CSS and HTML.

Before modern CSS, creating a speech bubble had tp involve a image or using JavaScript to inject DOM elements.

We will go through a few examples of different speech bubbles to show how they can be used on your

What are speech bubbles and when they are useful?

Speech bubbles are quite useful UI component that can improve your website design. They can be used

for testimonials, chat text/ timeline, or even tooltip and help text when the user hovers over a button

A basic speech bubble

To create a basic speech bubble, we just need to make use of a HTML element and the ::after pseudo element.

See the below codepen for the full code and how it looks.

So for the above example we will start with the following HTML. A basic DIV with some text in the middle.

Now we style the CSS speech-bubble class. We just want to make the text to be white and aligned in the

middle of the speech bubble. Additionally we set the bubble to have rounded corners and a blueish background

The tricky part is the arrow below the bubble. To do this we use a pseudo element ::after. You can use ::before or another

element, but I find using ::after is a bit cleaner.

Now our approach is to have a box of 0 width and 0 height. Then we only color in the “top” border and hide the other border edges (left, right, bottom borders)

speech bubble border explanation

The CSS will look like the below. One other thing of note is the use of “absolute”. This makes sure that the arrow appears correctly a the bottom

Example #1 — Testimonial CSS speech bubble

In the following example, we use the same method as above to create a testimonial speech bubble. Testimonials can improve the

design of your landing pages.

For this example, the arrow is to the point to the left. To get this effect, we still show the top border, but now hide left border.

Additionally for this example, instead of using the pseudo ::after element, we can use a div instead

Example #2 — Speech Bubble on button hover (Tooltip)

Another example that speech bubbles can be of use is with tooltips. When the user hovers over a button,

a tooltip will appear (usually having some help text).

We follow the same pattern as in the basic example, but now the speech bubble will appear on the :hover state of the button.

When creating tooltips, we will need to consider mobile or devices that are not desktops. For example, on mobile hovers will not be available

and only able to work with touch events.

Additionally on smaller screens the tool tip needs to be visible within the viewport — eg the tooltip might not be visible if the button is too

high up the device’s screen. In this case we need to consider the screen position and place the tooltip accordingly (eg bottom, left, right)

Concluding thoughts

Speech bubble are a great way to spice up your website design. They can be used on your landing pages to show

customer testimonials, displaying a timeline for chats text between users or even use a tooltips when the user

hovers over a button or element.

The trick to creating speech bubbles with CSS is using the ::after pseudo element and showing or hiding the top, left,

👋 About the Author

G’day! I am Kentaro a software engineer based in Australia. I have been creating design-centered software for the last 10 years both professionally and as a passion.

My aim to share what I have learnt with you! (and to help me remember 😅)

👉 See Also 👈

Источник

21 CSS Speech Bubbles

Collection of hand-picked free HTML and CSS speech bubble code examples from CodePen, GitHub, and other resources. Update of May 2021 collection. Six new examples.

Demo image: CSS Only Speech Bubble

  1. CSS Blockquotes

Author

Made with

About a code

CSS Only Speech Bubble

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Pure CSS Responsive Speech Bubble

Author

Made with

About a code

Pure CSS Responsive Speech Bubble

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Speech Bubbles

Author

Made with

About a code

Speech Bubbles

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Speech Bubbles

Author

Made with

About a code

Speech Bubbles

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Hello. I guess.

Author

Made with

About a code

Hello. I guess.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Black Lives Matter Dialog Boxes

Author

Made with

About a code

Black Lives Matter Dialog Boxes

A minimalist illustration of two dialog boxes in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Hello, World

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: 8-bit Pixel Speech Bubble Text Balloon

Author

Made with

About a code

8-bit Pixel Speech Bubble Text Balloon

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Apple iMessage in CSS

Author

Made with

About a code

Apple iMessage in CSS

Recreating an iMessage chat with CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Chat Bubbles

Author

Made with

About a code

Chat Bubbles

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Speech Bubble

Author

Made with

About the code

Speech Bubble

HTML and CSS simple responsive speech bubble.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Pure CSS Thought Bubbles

Author

Made with

About a code

Pure CSS Thought Bubbles

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Responsive Speech Bubble

Author

Made with

About the code

Responsive Speech Bubble

Box section can change dimensions independently of pointer. Pointer can be moved to different positions around box. Rounded corners. Glow or shadow around the whole thing that changes along with component shapes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Speech Bubble Caret

Author

Made with

About the code

Speech Bubble Caret

Making a triangle for a speech bubble and using transforms to help create the position.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Alternating Speech Bubbles

Author

Made with

About the code

Alternating Speech Bubbles

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Comic Book Speech Bubbles with SVG

A pattern for creating comic book speech bubbles using SVG.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Pure CSS Speech and Thought Bubbles

Author

Made with

About the code

Pure CSS Speech and Thought Bubbles

Pure CSS thought and speech bubbles that grow to fit the text.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS Speech Bubble

Author

Made with

About the code

CSS Speech Bubble

Simple speech bubble with CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Comic Director Splash Animation

Author

Made with

About a code

Comic Director Splash Animation

Comic Director is a Windows 8 app written in HTML and CSS. The first time run experience has a nifty little animation, here’s how we did it.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Speech Bubble

Author

Made with

About the code

Speech Bubble

A complex CSS shape speaking bubble.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Single-element 3D Speech Bubble

Author

Источник

35 CSS Speech Bubbles

css-speech-bubbles

Here is a list of some beautiful CSS speech bubbles examples.

Pure CSS Chat Bubble Animations [WIP]

Dev: Alissa

A depressed CSS chat bubble

Dev: Jennifer Hedgcock

Pure CSS Chat Bubble shape

Dev: CodingDecoding

CSS Chat Bubble

See the Pen CSS Chat Bubble by Jamie Le Souef (@jamielesouef) on CodePen.

Dev: Jamie Le Souef

Hello… I guess…

Dev: Alvaro Montoro

CSS Message Bubble

Dev: Daniel Kovacs

iMessage gradient effect

Dev: Lucas Bebber

Message Bubbles

See the Pen Message Bubbles by Michael Rouse (@mwrouse) on CodePen.

Dev: Michael Rouse

Chat Bubbles

See the Pen Chat Bubbles by Alex Wright (@alexrnm) on CodePen.

Dev: Alex Wright

Apple iMessage in CSS

Dev: Matt Smith

Pure CSS Thought Bubbles

Dev: florent

Chat Bubbles in CSS

See the Pen Chat Bubbles in CSS by Jason Founts (@Founts) on CodePen.

Dev: Jason Founts

Direct Messaging

See the Pen Direct Messaging by Momcilo Popov (@Momciloo) on CodePen.

Dev: Momcilo Popov

iOS 13 Chat bubbles

Dev: Samuel Kraft

Pure CSS Speech Bubbles

Dev: Michael Chernin

Chat Bubbles

See the Pen chat bubbles by Dave Alger (@run-time) on CodePen.

Dev: Dave Alger

Comic Book Speech Bubbles with SVG

Dev: Dudley Storey

Hello, World

See the Pen Hello, World by kirsten allen (@kirstenallen) on CodePen.

Dev: kirsten allen

CSS speech bubbles

Dev: JP de la Torre

Comic Sans Criminal

Dev: Jesse Shawl

Flex chat bubbles | Responsive chat bubbles

Dev: Kristina

Chat Window Concept Bubbles

Dev: Ashwin Saxena

Speech bubbles

Dev: rajeshdn

Speech bubbles

Dev: Tanner

Speech bubbles

Dev: rajeshdn

CSS stacked chat bubbles (Messenger style)

Dev: J.M. CIery

Speech Bubbles

Dev: Daniel Mackay

Pure CSS speech and thought bubbles

Dev: Joe Hastings

Alternating speech bubbles

Dev: Kevin Østerkilde

Speech bubble

Dev: Ana Tudor

Comic Director Splash Animation

Dev: Adam Argyle

CSS Speech Bubble

Dev: Ga Satrya ??

Speech Bubble Caret

Dev: GRAY GHOST

Latest Post

55 Cool CSS Calendars

barcodes in css

19 Barcodes in CSS

css masonry layout examples

25 CSS Masonry Layout Examples

css card layouts

23 CSS Card Layouts

css subscribe forms

27 CSS Subscribe Forms

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Ok

Источник

Pure CSS speech bubbles

Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.

The CSS file used in the demo page is heavily commented so that you can see which lines of code are responsible for each part of the effects.

Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.

Progressive enhancement with pseudo-elements

With HTML as simple as

Content

or

Content

you can produce speech bubble effects like this:

Add a child element, for example,

Quote

and you can even produce speech bubble effects like this:

I’d encourage you to adapt the examples to your needs and use any other associated elements available to you in your existing HTML document. The key is to use the :before and/or :after pseudo-elements to produce basic shapes.

By applying CSS3 properties such as border-radius and transform you can produce more complex shapes and orientations. This is how the heart-shape in my CSS typography experiment was created.

Example code

This is an example of how to create a basic speech bubble with a few enhancements. For further examples see the demo page and the heavily commented CSS file that it uses.

/* Bubble with an isoceles triangle
------------------------------------------ */

.triangle-isosceles  
position: relative; 
padding: 15px; 
margin: 1em 0 3em; 
color: #000; 
background: #f3961c; 
border-radius: 10px; 
background: linear-gradient(top, #f9d835, #f3961c);
>

/* creates triangle */
.triangle-isosceles:after  
content: ""; 
display: block; /* reduce the damage in FF3.0 */ 
position: absolute; 
bottom: -15px; 
left: 50px; 
width: 0; 
border-width: 15px 15px 0; 
border-style: solid; 
border-color: #f3961c transparent;
>

A note on progressive enhancement

This approach is one of progressive enhancement. Styles are built up in layers from simple coloured boxes, to boxes with a “speech tick” of some kind, to rounded rectangles or circles with gradient backgrounds. Browsers render the styles that they are capable of rendering.

Browsers (such as IE6 and IE7) that do not adequately support CSS 2.1 or those (such as IE8) without support for the necessary CSS3 properties will not look broken; they will simply not get the full speech bubble effect. However…

A warning about Firefox 3.0

Firefox 3.0 supports the necessary CSS 2.1 pseudo-elements but does not support the positioning of generated content.

Some of the examples are close to what I consider to be unacceptably broken in Firefox 3.0. It is the only browser above 2% market share — currently at ~4% as of March 2010 according to NetApplications — that cannot handle even the basic speech bubble effects.

Before applying this technique, consider the importance of Firefox 3.0 support and the percentage of your visitors currently using this browser. Eventually it will become a rare browser but due to it’s partial CSS 2.1 support you should be aware that there is no graceful fallback for Firefox 3.0 when using this technique.

Nicolas lives and works in California. He’s on Threads and shares software using GitHub.

Источник

Оцените статью
© 2024 Программирование