CSS İle Konuşma Balonu Yapmak

Herkese merhabalar arkadaşlar bu yazımızda sizlere Css ile konuşma baloncuğu yapılışını anlatacağız.

Bu konuşma baloncuğunu sitelerimizde istediğimiz şekilde kullanabiliriz.Şimdi hemen css ile konuşma balonu yapımına geçelim.Kodlar aşağıdadır ve anlatımları da yanlarına yazılmıştır.Kodlarımı html ve css diye iki alanda inceliyoruz.

Html Kodları;

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> //Türkçe karakter sorunu olmasın diye yazılan bir kod.
<title>Css ise konusma baloncugu</title>
<link type="text/css" rel="stylesheet" href="css2.css" />
</head>
<body>
<div id="konusma-baloncugu"> //Burada css kodlarından id olarak konusma-baloncugu'nu çekiyoruz.
Merhabalar size nasıl yardımcı olabilirim?
</div>
</body>
</html>

<html>

<head>

<title>Css ise konusma baloncugu</title>

</head>

<body>

<div id="konusma-baloncugu"> //Burada css kodlarından id olarak konusma-baloncugu'nu çekiyoruz.

Merhabalar size nasıl yardımcı olabilirim?

</div>

</body>

</html>

Css Kodları;

#konusma-baloncugu{
 background-color:#330000; //Burada bordo rengini kullandık siz istediğinizi yapabilirsiniz.
 float:left;
 padding:10px 20px;
 border-radius:5px;
 font-size:20px;
 position:relative;
 color: red;
}
#konusma-baloncugu:after{ //Burada konuşma balonunun alt kısmındaki üçgeni yaptık.
 content: '';
 position:absolute;
 right: 320px;
 bottom:-30px;
 border-style: solid;
 border-top-width: 30px;
 border-right-width: 20px;
 border-left-width: 20px;
 border-top-color: #330000;
 border-right-color: transparent;
 border-bottom-color: transparent;
 border-left-color: transparent;
}

#konusma-baloncugu{

background-color:#330000; //Burada bordo rengini kullandık siz istediğinizi yapabilirsiniz.

float:left;

padding:10px 20px;

border-radius:5px;

font-size:20px;

position:relative;

color: red;

}

#konusma-baloncugu:after{ //Burada konuşma balonunun alt kısmındaki üçgeni yaptık.

content: '';

position:absolute;

right: 320px;

bottom:-30px;

border-style: solid;

border-top-width: 30px;

border-right-width: 20px;

border-left-width: 20px;

border-top-color: #330000;

border-right-color: transparent;

border-bottom-color: transparent;

border-left-color: transparent;

}

Ekran görüntüsü ise bu şekildedir:

Siz renklerini ve boyutlarını istediğiniz gibi ayarlayabilirsiniz.Kodların kaba taslak kısmı fatihhayrioglu.com dan alıntıdır.Detaylı bilgi için o siteyi ziyaret etmeyi unutmayınız.Umarız faydalı olmuştur.Herkese iyi çalışmalar dileriz…

Bu Yazıya Tepkin Ne Oldu ?