CSS İle Konuşma Baloncuğu Yapmak

  • 11.02.2015
  • tayyipyetis
  • CSS

css ile baloncuk yapımı Merhaba, projeler geliştirirken daha estetik bir görünüm oluşturmak için bir nesnenin üzerine gelindiğinde fade in olan tooltip'ler, popup paneller ya da yorumlar için kullanılan ok işaretli konuşma baloncukları kullanmak isteyebilirsiniz. Ben de böyle bir görünüm oluşturmak için ufak bir araştırma yaptım güzel örnekler buldum bir tanesi aşağıda. inceleyip kendi projelerinizde kullanabilirsiniz. şemanın orjinali ve daha fazlası için http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ adresini ziyaret edebilirsiniz.

CSS :

.triangle-border {
            position: relative;
            padding: 15px;
            margin: 1em 0 3em;
            border: 5px solid #5a8f00;
            color: #333;
            background: #fff;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
        }
            .triangle-border.top:before {
                top: -20px;
                bottom: auto;
                right: 40px;
                border-width: 0 20px 20px;
            }
            .triangle-border:before {
                content: "";
                position: absolute;
                bottom: -20px;
                left: 40px;
                border-width: 20px 20px 0;
                border-style: solid;
                border-color: #5a8f00 transparent;
                display: block;
                width: 0;
            }
            .triangle-border.top:after {
                top: -13px;
                bottom: auto;
                right: 47px;
                border-width: 0 13px 13px;
            }
            .triangle-border:after {
                content: "";
                position: absolute;
                bottom: -13px;
                left: 47px;
                border-width: 13px 13px 0;
                border-style: solid;
                border-color: #fff transparent;
                display: block;
                width: 0;
            }
 

HTML :

<div class="triangle-border top"> </div>

Demo : 

Yorum Yap

Diğer Makaleler

Etiketler