Sohbet Balonları CSS Speech bubbles

Ana Sayfa / Sohbet Balonları CSS Speech bubbles

Sohbet Balonları CSS Speech bubbles

ExCaLuBuR     17-01-21     Sohbet     Sohbet Balonları CSS Speech bubbles     27 Defa Okundu

CSS Speech bubbles ile sohbet balonları oluşturup fikirlerinizi tasarım halinde okuyucularınıza veya ziyaretçilerinize iletmeniz için yararlıdır. Konuşma balonları olarak da sıkça aratılan css kodları , grafik , logo ve web tasarımında kullanılır. İkon ( icon , ico ) olarak da tercih edilir ki estetik ve görsel açıdan hoş görüntüler sağlar.

Eskiye nazaran sohbet balonları oluşturmak artık daha kolay. CSS3 ‘ün özelliklerini kullanıp kolayca konuşma balonları oluşturabilirsiniz.

Web sitenizdeki bazı içerikleri belirtmenin en iyi yolu konuşma balonlarıdır. Kişisel olarak ilgi alanlarımın başında sohbet odaları yönetimi , sohbet konuları yazma ve sohbet sitelerini geliştirmek var. Bu bağlamda en çok sohbet sitelerinin işine yarayabilecek olan Sohbet Balonları ( CSS Speech bubbles ) konusunu sizlere aktarmak istiyorum.

Whatsap , Skyp ile iletişim ve mesajlaşma alanında çok popüler olan sosyal medya platformların da da çok kullanılan konuşma balonları görsel olarak etkileyicidir.

Sizlere aşağı da sırası ile önce html ve css kodlarını paylaşıp, görsel halini de yansıttığımız baloncuk oluşturacağız.

Sohbet Balonu ( Üçgen Altta )

Html Kodu ;

<hgroup class="bubble">
	<h1>Mekansız</h1>
	<h2>CSS konuşma balonları mekansiz.net 'de!</h2>
</hgroup>	

Css Kodu ;

.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;
}	

Üçgen Altta konuşma balonu Görseli ;

Sohbet Balonları
CSS3 Konuşma Balonu

Yukarıda görmüş olduğunuz CSS kod bölümündeki ;

.bubble:after {

Konuşma balonlarında ki üçgenin yönünü bubble:after satırındaki kodlar ile ayarlıyoruz. Şimdi sizlere sohbet balonlarının üçgen kısmını üstte , altta , sağda ve solda gibi çeşitli şekilde yerlere nasıl alabilirsiniz bu css kodlarını paylaşacağız.


Muhabbet Etmek istermisiniz ?

Yeni arkadaşlar ile tanışın.


Konuşma Balonu Üçgen solda

Css Kodu ;

.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;
}

Konuşma Balonu Üçgen Üste

Css Kodu ;

.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;
}

Sohbet Balonu Üçgen Sağdan

Css Kodu ;

.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;
}

Yukarıdaki bilgilerin haricin de sizlere ücretsiz online tasarım programı olan Canva ilede tanıştıralım.

Sürükle ve Bırak Konuşma Balonu ile Sesinizi Duyurun

Fotoğraflarınızın konuşmasını sağlayın! Tasarımlarınıza konuşma ve ses efektleri eklemek için fısıldayan veya sıra dışı şekillere sahip konuşma balonları koleksiyonumuzdan seçim yapın.

Tüm ruh halleri ve ifadeler için konuşma balonları koleksiyonumuza göz atın

Bir konuşma balonuyla en iyi arkadaşınız Jale’nin duygularını sözcüklere dökmesine izin verin!” Konuşma balonları sözcükler veya kişinin konuştuğunu gösteren “son eklere” sahip sesler barındıran küçük dairelerdir. Bir konuşma balonu eklemek için görsel kütüphanemizde “konuşma balonu” ifadesini arayın ve birçok eğlenceli, renkli balon arasında gezinin. Balonun şekli ve tarzı, içindeki konuşmanın duygusunu aktarmaya yardımcı olur. Bu nedenle Jale’nin anlatmak istediğini tam olarak ifade eden balonu bulmak için çabalayın.

Etiketler:

Sende Paylaş:  Facebook    Tweet    Pinterest    Google+    Whatsapp  

Yazı hakkında görüşlerinizi belirtmek istermisiniz?


aLem Sohbet

Bedava sohbet net şekilde sizler için ayarlanmıştır. Ücretsiz sohbet sitesi olarak trsohbet odalarımız da sizleride bekliyoruz.

Sosyal Medya

Facebook

Twitter