| ExCaLuBuR | 17 Ocak 2021 01:59 |
CSS Speech bubbles (Konuşma balonu)
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. Lütfen Üye Olmak için TIKLAYIN...] | 