CSS Speech Bubble - Course Cascading Style Sheets (CSS/CSS3) - Part 30 | web Developer courses

Duration: 15:51 min

Summary: In this video, we will learn how to create a comment bubble. We will start with an image and a paragraph. We will customize the paragraph to make it look like a bubble next to the image. To accomplish our goal we will use the ::before and ::after pseudo-elements. The first order of operation is customizing the paragraph with the font, color, margin, width, and position. It is important in this case to use the border-radius to make the paragraph look like an ellipse. After doing so and positioning the bubble the way we want to, we will add couple of other circles to reflect the thought process. When looking at the image and the bubble, it will represent someone commenting on the image.

Technologies and Resources: CSS, HTML, Notepad++, CSS3,::before, ::after, content, background-color, font-family, position, border-radius, margin, padding, text-align, line-height, height, width, bottom, left.