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:

Bubbly

CSS konuşma balonları artık daha kolay!

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:

Bubbly

CSS konuşma balonları artık daha kolay!

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:

Bubbly

CSS konuşma balonları artık daha kolay!

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:

Bubbly

CSS konuşma balonları artık daha kolay!

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:

Bubbly

CSS konuşma balonları artık daha kolay!

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:

Bubbly

CSS konuşma balonları artık daha kolay!

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

3883

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • HTML KAYAN YAZI VE Marguee KULLANIMI
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.