CSS3 ile Konuşma Baloncuğu Yapmak

CSS3 ile istediğiniz boyutta bir konuşma baloncuğu yapmak artık çok basit.

CSS3 ile istediğiniz boyutta bir konuşma baloncuğu yapmak artık çok basit.

HTML Kodumuz:


<div class="baloncuk">

<div class="isaret">

<div class="bir"></div>

<div class="iki"></div>

</div>

<div class="icerik">

<p>Bu Baloncuk Sadece Bir Örnektir :)</p>

</div>

</div>



CSS Kodumuz:


.baloncuk {

width:400px;

color:#efefef;

}

.baloncuk .isaret {

height:15px;

background:#393939;

}

.baloncuk .isaret div {

height:100%;

background:#ffffff;

}

.baloncuk .isaret .bir {

width:50%;

-moz-border-radius-bottomright: 15px;

-webkit-border-bottom-right-radius:15px;

float:left;

}

.baloncuk .isaret .iki {

width:50%;

float:right;

-moz-border-radius-bottomleft: 15px;

-webkit-border-bottom-left-radius:15px;

}

.baloncuk .icerik {

padding:10px;

-moz-border-radius: 10px;

-webkit-border-radius:10px;

background:#393939;

text-align:center;

}



  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git