Share This
//How to Create CSS3 Speech Bubbles Without Images

How to Create CSS3 Speech Bubbles Without Images

Credit: https://www.sitepoint.com/pure-css3-speech-bubbles/

I remember my creating my first image-less speech bubble many years ago. It required a long-winded JavaScript function to inject elements into the DOM, some horrendous CSS, looked fairly awful, and didn’t work well in IE5.

CSS3 is starting to change our lives for the better. It’s now possible to create a great looking speech bubble which works in all browsers, uses a single HTML element, a few lines of CSS3 code, no images, and no JavaScript whatsoever…

CSS3 speech bubble

To ease you in gently, let’s examine the HTML. A single element is required, so I’m using a P tag:


	<p>SitePoint Rocks!</p>

First, we’ll style the outer box:


	p.speech
	{
	position: relative;
	width: 200px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	background-color: #fff;
	border: 8px solid #666;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	-webkit-box-shadow: 2px 2px 4px #888;
	-moz-box-shadow: 2px 2px 4px #888;
	box-shadow: 2px 2px 4px #888;
}

Nothing too complicated there. The only essential property is position: relative which is necessary for the speech bubble pointer. We also require Mozilla and Webkit vendor prefixes for border-radius and box-shadow to ensure they work in all CSS3 browsers. IE8 and below will show squared corners and no shadow, but the box will still be visible.

CSS3 speech bubble

Now we need to create the triangular bubble pointer. Rather than resorting to images, we can use CSS borders to create any type of triangle. As a brief explanation, examine an element with wide differently-colored borders:

CSS3 border triangles

If we reduce the width and height of our element to 0px and use different sized borders, we can see different triangles being formed:

CSS3 border triangles

For our speech bubble pointer, we can therefore use a solid top and left border with transparent right and bottom borders:

CSS3 border triangles

But what do we assign those border properties to? Fortunately, we can use the CSS :before and :afterpseudo-elements to generate two more content items. Therefore:


	p.speech:before
	{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 30px;
	top: 100px;
	border: 25px solid;
	border-color: #666 transparent transparent #666;
}

The triangle is positioned at the bottom of our bubble. Incidentally, don’t bother trying to apply a shadow to this element — it’ll be shown around the transparent borders rather than the visible triangle.

CSS3 speech bubble

We must now remove a section of this triangle. We can position a smaller white triangle over the gray one to achieve that effect:


	p.speech:after
	{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 38px;
	top: 100px;
	border: 15px solid;
	border-color: #fff transparent transparent #fff;
}

Our pure CSS3 image-less speech bubble is complete.

CSS3 speech bubble

In essence, we can utilize the :before and :after pseudo-elements to create many different effects. For example, a thought bubble can be created with two content items rounded into circles:


	p.thought
	{
	position: relative;
	width: 130px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	background-color: #fff;
	border: 8px solid #666;
	-webkit-border-radius: 58px;
	-moz-border-radius: 58px;
	border-radius: 58px;
	-webkit-box-shadow: 2px 2px 4px #888;
	-moz-box-shadow: 2px 2px 4px #888;
	box-shadow: 2px 2px 4px #888;
}

p.thought:before, p.thought:after
{
	left: 10px;
	top: 70px;
	width: 40px;
	height: 40px;
	background-color: #fff;
	border: 8px solid #666;
	-webkit-border-radius: 28px;
	-moz-border-radius: 28px;
	border-radius: 28px;
}

p.thought:after
{
	width: 20px;
	height: 20px;
	left: 5px;
	top: 100px;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	border-radius: 18px;
}

CSS3 thought bubble

Please see the demonstration page for an example which uses these techniques. All the CSS code is contained in the HTML source.


ỨNG TUYỂN






    Leave a Reply

    Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

    Chế độ phúc lợi

    CHÍNH SÁCH LƯƠNG & THƯỞNG

    Thấu hiểu tâm tư nguyện vọng của nhân viên, công ty Rivercrane Việt Nam đặc biệt thiết lập chế độ xét tăng lương định kỳ 2lần/năm. Xét đánh giá vào tháng 06 và tháng 12 hàng năm và thay đổi lương vào tháng 01 và tháng 07 hàng năm. Ngoài ra, nhân viên còn được thưởng thành tích định kỳ cho các cá nhân xuất sắc trong tháng, năm.

    CHẾ ĐỘ ĐÀO TẠO TẠI NHẬT

    Luôn luôn mong muốn các kỹ sư và nhân viên trong công ty có cái nhìn toàn diện về lập trình những mảng kỹ thuật trên thế giới, công ty Rivercrane Việt Nam quyết định chế độ 3 tháng 1 lần đưa nhân viên đi học tập tại Nhật. Các bạn kỹ sư hoàn toàn đều có thể quyết định khả năng phát triển bản thân theo hướng kỹ thuật hoặc theo hướng quản lý.

    CHẾ ĐỘ ĐI DU LỊCH HÀNG NĂM

    Không chỉ đưa đến cho nhân viên những công việc thử thách thể hiện bản thân, công ty Rivercrane Việt Nam muốn nhân viên luôn thích thú khi đến với những chuyến hành trình thú vị hàng năm. Những buổi tiệc Gala Dinner sôi động cùng với những trò chơi Team Building vui nhộn sẽ giúp cho đại gia đình Rivercrane thân thiết hơn.

    CHẾ ĐỘ EVENT CÔNG TY

    Những hoạt động Team building, Company Building, Family Building, Summer Holiday, Mid-Autumn Festival… sẽ là những khoảnh khắc gắn kết đáng nhớ của mỗi một nhân viên trong từng dự án, hoặc sẽ là những điều tự hào khi giới thiệu công ty mình với với gia đình thân thương, cùng nhau chia sẻ yêu thương với thông điệp “We are One”

    BẢO HIỂM

    Công ty Rivercrane Việt Nam đảm bảo tham gia đầy đủ chế độ Bảo hiểm xã hội, bảo hiểm y tế và bảo hiểm thất nghiệp. Cam kết chặt chẽ về mọi thủ tục phát sinh công ty đều hỗ trợ và tiến hành cho nhân viên từ đầu đến cuối. Những chế độ bảo hiểm khác công ty cũng đặc biệt quan tâm và từng bước tiến hành.

    CHẾ ĐỘ PHÚC LỢI KHÁC

    Hỗ trợ kinh phí cho các hoạt động văn hóa, văn nghệ, thể thao; Hỗ trợ kinh phí cho việc mua sách nghiên cứu kỹ thuật; Hỗ trợ kinh phí thi cử bằng cấp kỹ sư, bằng cấp dành cho ngôn ngữ. Hỗ trợ kinh phí tham gia các lớp học về quản lý kỹ thuật bên ngoài; Các hỗ trợ phúc lợi khác theo quy định công ty…

    HAPPY SSC OFFICE’S 4TH ANNIVERSARY

    Vừa qua, tại ngôi nhà chung thứ 2 - văn phòng SSC, tất cả các thành viên của đại gia đình RCVN đã có một buổi tiệc nho nhỏ đầm ấm để chúc mừng sinh nhật lần thứ 4 của văn phòng SSC.

    Bốn năm đi qua biết bao đợi chờ
    SSC lớn nhanh như ngôi nhà ta mơ ước
    Thuở ban sơ khó khăn hoài đối mặt

    Quyết một lòng dẫn dắt tới thành công.

    Bài hát chúc mừng sinh nhật đã vang lên, mọi người cùng nhau hát, cùng nhau thổi nến mừng văn phòng SSC tròn 4 tuổi.

    Hòa mình vào không khí chào đón sinh nhật SSC, bên cạnh đó RCVN còn tổ chức cho mọi người trò chơi thường niên, mà tất cả thành viên đại gia đình RCVN không ai là không biết đến đó là giải đấu bi lắc.

    Giải thưởng năm nay khá ấn tượng, với chiếc cúp và những chiếc huy chương biểu tượng cho sự chiến thắng đang đợi chủ nhân của nó, với khẩu hiệu “Làm hết sức, chơi hết mình”, các chiến binh nhà RCVN hừng hực khí thế để chiến đấu, để giật ngay cho mình giải thưởng cao nhất.

    Dzô dzô dzô…! Những cổ động viên cổ vũ cho các đội chơi cứ phải gọi là nhiệt tình, không thua những pha cổ vũ cuồng nhiệt các đội tuyển bóng đá Việt Nam


    Và phần mong chờ nhất cũng đã đến đó chính là “NHẬP TIỆC” thôi cả nhà ơi!
    “Hai ba zô, hai ba uống, uống thế nào, uống hếttttt”
    Đọc đến đây mọi người cũng đã phần nào đoán ra khung cảnh lúc này của nhà RCVN đúng không, chúng ta cùng xem lại những khoảnh khắc “cháy hết mình” của nhà mình nhé! 

    Chưa hết đâu, những tưởng mạnh mẽ tứ phương hai ba zô lại của mấy anh có thể khuất phục được hội chị em RCVN dễ đến thế à, không đâu nhé. Hội chị em chúng tớ cũng rất ra gì đấy nhé mấy anh ơi!

    Sau thời gian “nạp năng lượng” mọi người ngồi xuống, quây quần bên nhau, lắng nghe tiếng hát của các thành viên, dưới “ánh đèn sân khấu” ca sĩ nhà RCVN mình thật lung linh, tỏa sáng!

    Và lời kết, xin gửi lời tri ân sâu sắc đến nỗ lực và đóng góp của tất cả thành viên trong đại gia đình RCVN. Chúc cho đại gia đình RCVN sẽ luôn đoàn kết, thống nhất, không ngừng cải tiến và ngày một phát triển phát triển.

    © 2012 RiverCrane Vietnam. All rights reserved.

    Close