Emre Yüz


CSS ile Facebook Tarzı Reaksiyon İfadeleri

Bu yazıda sadece CSS ve ifadeleri kullanarak facebook tarzı reaksiyon ifadelerinin nasıl yapılacağına bakacağız.

CSS ile Facebook Tarzı Reaksiyon İfadeleri

By Emre YÜZ
10.02.2017 22.28



facebook tarzı like reaksiyon ifadeleri

CSS kısmında hover, delay ve transition animasyonlarını birleştireceğiz. İfadeleri şu adresden temin edebilirsiniz.

1. Adım

İlk adımda reaksiyon ifadelerini oluşturuyoruz, aşağıdaki kodu blog yazılarınızın en altına koyabilirsiniz.

index.html
<div style="max-width:100%; margin:100px;  padding-top:20px;  position:relative;">
    <span class="begen">
        Beğen
        <ul class="reaksiyon-box">
            <li class="reaksiyon reaksiyon-like"></li>
            <li class="reaksiyon reaksiyon-love"></li>
            <li class="reaksiyon reaksiyon-haha"></li>
            <li class="reaksiyon reaksiyon-wow"></li>
            <li class="reaksiyon reaksiyon-sad"></li>
            <li class="reaksiyon reaksiyon-angry"></li>
        </ul>
    </span>
</div>

2. Adım

Bu adımda her şeyi şekillendireceğimiz kısım, adım adım gidelim.

Varsayılan olarak reaksiyon divi gizli olacak. Ne zaman beğen yazısının üzerine gelinirse ifadeler o zaman gözükecek.

.begen:hover .reaksiyon-box { display: block; }

Şimdi ise beğen yazısının üzerine gelindiğinde reaksiyon kutusunun gecikmeli olarak opaklığının arttırılması ve üzerine gelinen ifadelerin boyutlarının büyültülmesi var.

.begen:hover .reaksiyon {
    opacity: 1;
    animation-name: reaksiyon_gecikme;
    animation-duration: .5s;
}

@keyframes reaksiyon_gecikme {
    0% {
        width: 48px;
        height: 48px;
        top: 60px;
    }
    48% {
        width: 56px;
        height: 56px;
        top: 5px;
    }    
    100% {
        width: 48px;
        height: 48px;
        top: 8px;
    }
}

Her ifade için üç CSS classı var bunları her ifade için tanımlıyoruz.

.reaksiyon-like {
    left: 10px;
    transition-delay: 0s;
    background-image: url('images/reaksiyon_like.png');
}

.begen:hover .reaksiyon-like { animation-delay: 0s }

.reaksiyon-like::before { content: 'Like' }

CSS kodlarının mantığı bu şekide. Aşağıya tüm css kodlarını yazıyorum bu şekilde tasarım kısmını hallettik. Bunun dışında biraz jQuery ve PHP ile bu reaksiyonları veri tabanına kaydedebilirsiniz. Yakın zamanda bende blogum için yapmayı düşünüyorum o kodlarıda bir yazı olarak paylaşırım.

.reaksiyon-box {
    height: 44px;
    width: 340px;
    padding: 10px;
    position: absolute;
    top: -63px;
    left: -14px;
    box-shadow: 1px 1px 2px #cccccc, -1px 0px 2px #eeeeee;
    border-radius: 44px 44px;
    display: none;
}

.reaksiyon {
    list-style-type: none;
    cursor: pointer;
    display: inline-block;
    width: 48px;
    height: 48px;
    position: absolute;
    top: 8px;
    opacity: 0;
    transform: scale(1, 1);
    transition: opacity .5s ease-in-out 1s, transform .07s ease-in-out 0s, top .07s ease-in-out 0s;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center
}

.begen:hover .reaksiyon-box { display: block; }

.reaksiyon-like {
    left: 10px;
    transition-delay: 0s;
    background-image: url('images/reaksiyon_like.png');
}

.reaksiyon-love {
    left: 68px;
    transition-delay: .05s;
    background-image: url('images/reaksiyon_love.png');
}

.reaksiyon-haha {
    left: 126px;
    transition-delay: .1s;
    background-image: url('images/reaksiyon_haha.png');
}

.reaksiyon-wow {
    left: 184px;
    transition-delay: .15s;
    background-image: url('images/reaksiyon_wow.png');
}

.reaksiyon-sad {
    left: 242px;
    transition-delay: .2s;
    background-image: url('images/reaksiyon_sad.png');
}

.reaksiyon-angry {
    left: 300px;
    transition-delay: .25s;
    background-image: url('images/reaksiyon_angry.png');
}

.begen:hover .reaksiyon {
    opacity: 1;
    animation-name: reaksiyon_gecikme;
    animation-duration: .5s;
}

@keyframes reaksiyon_gecikme {
    0% {
        width: 48px;
        height: 48px;
        top: 60px;
    }
    48% {
        width: 56px;
        height: 56px;
        top: 5px;
    }    
    100% {
        width: 48px;
        height: 48px;
        top: 8px;
    }
}

.begen:hover .reaksiyon-like { animation-delay: 0s }
.begen:hover .reaksiyon-love { animation-delay: .05s }
.begen:hover .reaksiyon-haha { animation-delay: .1s }
.begen:hover .reaksiyon-wow { animation-delay: .15s }
.begen:hover .reaksiyon-sad { animation-delay: .2s }
.begen:hover .reaksiyon-angry {    animation-delay: .25s }
.reaksiyon:hover { transform: scale(1.3, 1.3); top: 2px }

.reaksiyon::before {
    display: inline-block;
    color: #ffffff;
    text-align: center;
    line-height: 17px;
    font-size: .7em;
    width: 80%;
    height: 17px;
    margin-left: 10%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    position: absolute;
    top: -25px;
    opacity: 0;
    transition: opacity .2s ease-in-out 0s;
}

.reaksiyon:hover::before { opacity: 1 }
.reaksiyon-like::before { content: 'Like' }
.reaksiyon-love::before { content: 'Love' }
.reaksiyon-haha::before { content: 'Haha' }
.reaksiyon-wow::before { content: 'Wow' }
.reaksiyon-sad::before { content: 'Sad' }
.reaksiyon-angry::before { content: 'Angry' }

 

Kaynak kodlarını ve örnek çalışmayı buraya tıklayarak görebilirsiniz.



Emre Yüz
Emre YÜZ
Multidisipliner Full-Stack Web Geliştirici/Tasarımcı, Veri
Mimarı ve Analist.

Multidisipliner Full-Stack Web Geliştirici/Tasarımcı, Veri Mimarı ve Analist.



HAKKIMDA

Emre YÜZ

Multidisipliner Full-Stack Web Geliştirici/Tasarımcı, Veri Mimarı ve Analist.

Son Yazılar

insta ❤️ feed


    Reklam