HTML-Kodu

**ExCaLuBuR** · 17 Ocak 2021, 01:59

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.

En çok sohbet sitelerinin işine yarayabilecek olan Sohbet Balonları ( CSS Speech bubbles ) konusunu hakkında bir kaç örnek vermeye çalışalım.

Sohbet Balonu ( Üçgen Altta )

Html Kodu ;

HTML-Kodu

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

Css Kodu ;

HTML-Kodu

.bubble {
	position: relative;
	background: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=00aabb]#00aabb[/URL]
	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: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=00aabb]#00aabb[/URL]
	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 ;

CSS3 Konuşma Balonu

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

HTML-Kodu

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

Konuşma Balonu Üçgen solda

Css Kodu ;

HTML-Kodu

.bubble:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-right-color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=00aabb]#00aabb[/URL]
	border-left: 0;
	border-bottom: 0;
	margin-top: -10px;
	margin-left: -20px;
}

Konuşma Balonu Üçgen Üste

Css Kodu ;

HTML-Kodu

.bubble:after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-bottom-color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=00aabb]#00aabb[/URL]
	border-top: 0;
	border-left: 0;
	margin-left: -10px;
	margin-top: -20px;
}

Sohbet Balonu Üçgen Sağdan

Css Kodu ;

HTML-Kodu

.bubble:after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-left-color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=00aabb]#00aabb[/URL]
	border-right: 0;
	border-bottom: 0;
	margin-top: -10px;
	margin-right: -20px;
}

Kaynak : [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]