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