CSS Speech bubbles (Konuşma balonu)

Konuşma balonları, fikirleri tasarımda iletmek için yararlıdır ve web, grafik ve logo tasarımında ve ayrıca ikon olarak sıklıkla kullanılır.

Bu yazıda size farklı konuşma balonları türlerini nasıl oluşturacağınızı göstereceğim. Geçmişte, konuşma balonları oluşturmak, içindeki resimleri kullanılması nedeniyle çok zor bir görev olarak kabul edildi. Ancak günümüzde CSS3 Özellikleri'ni kullanarak konuşma balonlarını kolayca oluşturabiliriz.

Konuşma balonları, web'deki içeriği belirtmenin çok güzel bir yoludur ve günümüzde konuşma balonları çoğunlukla sohbet odalarında kullanılmaktadır. WhatsApp sohbet kutusunda ve diğer birçok uygulamada kullanılan konuşma balonlarını görebiliriz. Konuşma balonu harika ve çok etkili bir görünüm verir.

Dikdörtgen konuşma balonları oluşturmak için iki sınıf kullanacağım , ortak sınıf (bubble) dikdörtgen kutu ve sözde sınıf class:bubble:after oluşturmaktır. Buna göre konumlandırılmış farklı üçgenler oluşturacağız.

HTML:

<hgroup class="bubble">
	<h1>Bubbly</h1>
	<h2>CSS konuşma balonları artık daha kolay!</h2>
</hgroup>	

CSS:

.bubble {
	position: relative;
	background: #00aabb;
	border-radius: .4em;
}
.bubble {
    width: 260px;
    padding: 60px 20px;
    margin: 1em 0;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 200%;
    text-shadow: 0 -0.05em 0.1em rgba(0,0,0,.3);
}

.bubble:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #00aabb;
	border-bottom: 0;
	border-left: 0;
	margin-left: -10px;
	margin-bottom: -20px;
}
.bubble h1 {
    color:white;
    margin: 0;
    font-size: 150%;
}
.bubble h2 {
    margin: 0;
    font-size: 40%;
    font-weight: normal;
}	

ÇIKTI:

Konuşma Balonu Üçgen solda

.bubble:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-right-color: #00aabb;
	border-left: 0;
	border-bottom: 0;
	margin-top: -10px;
	margin-left: -20px;
}

ÇIKTI:

Konuşma Balonu Üçgen Üste

.bubble:after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-bottom-color: #00aabb;
	border-top: 0;
	border-left: 0;
	margin-left: -10px;
	margin-top: -20px;
}

ÇIKTI:

Konuşma Balonu Üçgen Sağdan

.bubble:after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-left-color: #00aabb;
	border-right: 0;
	border-bottom: 0;
	margin-top: -10px;
	margin-right: -20px;
}

ÇIKTI:

Konuşma Balonu Üçgen Alt Sağa Bakan

.bubble:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #00aabb;
	border-bottom: 0;
	border-right: 0;
	margin-left: -10px;
	margin-bottom: -20px;
}	

ÇIKTI:

Konuşma Balonu Üçgen Normal Olan

.bubble:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #00aabb;
	border-bottom: 0;
	margin-left: -20px;
	margin-bottom: -20px;
}

ÇIKTI: