0
Kayıt Ol

Böyle bir şeyi CSS ile nasıl yapabilirim?

7

●

145

  • 12-07-2021, 01:10:23
    #1
    umutcanra
    umutcanra
    biacaip.com adlı web sitesinde gördüğüm ve gerçekten de çok beğendiğim bir olay var. Yazıların alt kısmında görseldeki gibi sosyal medya alanı bu şekilde duruyor tıklayınca hesaba yönlendiriyor. Birebir aynısını nasıl yapabilirim?
  • 12-07-2021, 01:23:24
    #2
    kozanfirmam
    kozanfirmam
    Bu hangi sitede var hocam
  • 12-07-2021, 01:49:54
    #3
    Caxing
    Caxing
    Merhaba, sizin için kodladım. Kullandığınız temaya göre düzenleme yapmanız gerekebilir.



    CSS kodları :

    .back {
    width: 100%;
    background: white;
    height: 110px;
    padding: 15px;
    box-sizing: border-box;
}

.facebook {
    height: 100%;
    width: 50%;
    float:left;
}

.facebookbox {
    background: #3b5998;
    display:flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 30px;
    height: 100%;
    width: 98%;
    text-align:center;
    float:left;
}

.facebookbox i{
    font-size: 35px;
    margin-right: 20px;
}

.instagram {
    height: 100%;
    width: 50%;
    float:left;
}

.instagrambox {
    background: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    display:flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 30px;
    height: 100%;
    width: 98%;
    text-align:center;
    float: right;
}

.instagrambox i{
    font-size: 35px;
    margin-right: 20px;
}
    HTML Kodları :

            <div class="back">
            <div class="facebook">
                <a href="http://www.facebook.com">
                <div class="facebookbox">
                    <i class="fab fa-facebook-f"></i>umutcanra
                </div>
                </a>
            </div>
            <div class="instagram">
                <a href="http://www.instagram.com">
                <div class="instagrambox">
                    <i class="fab fa-instagram"></i>umutcanra    
                </div>
                </a>
            </div>
        </div>
    HTML kodlarındaki instagram ve facebook linklerini kendi sayfanıza göre düzenleyebilirsiniz. Yazı olarak ne yazmasını istiyorsanız da şu kısımları değiştirmeniz gerekiyor " umutcanra ".
  • 12-07-2021, 02:25:21
    #4
    tematem
    tematem
    Responsive yapıda ve BEM mantığı ile yazdım dolayısıyla CSS bozulmaları yaşamazsınız (class benzerliği olmayacağı için). Alana göre birden fazla sosyal medya eklenebilir.
    https://codepen.io/_plunch/pen/KKmNPWB
  • 12-07-2021, 02:35:08
    #5
    riwe
    riwe
    Caxing adlı üyeden alıntı: mesajı görüntüle
    Merhaba, sizin için kodladım. Kullandığınız temaya göre düzenleme yapmanız gerekebilir.



    CSS kodları :

    .back {
    width: 100%;
    background: white;
    height: 110px;
    padding: 15px;
    box-sizing: border-box;
}

.facebook {
    height: 100%;
    width: 50%;
    float:left;
}

.facebookbox {
    background: #3b5998;
    display:flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 30px;
    height: 100%;
    width: 98%;
    text-align:center;
    float:left;
}

.facebookbox i{
    font-size: 35px;
    margin-right: 20px;
}

.instagram {
    height: 100%;
    width: 50%;
    float:left;
}

.instagrambox {
    background: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    display:flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 30px;
    height: 100%;
    width: 98%;
    text-align:center;
    float: right;
}

.instagrambox i{
    font-size: 35px;
    margin-right: 20px;
}
    HTML Kodları :

            <div class="back">
            <div class="facebook">
                <a href="http://www.facebook.com">
                <div class="facebookbox">
                    <i class="fab fa-facebook-f"></i>umutcanra
                </div>
                </a>
            </div>
            <div class="instagram">
                <a href="http://www.instagram.com">
                <div class="instagrambox">
                    <i class="fab fa-instagram"></i>umutcanra    
                </div>
                </a>
            </div>
        </div>
    HTML kodlarındaki instagram ve facebook linklerini kendi sayfanıza göre düzenleyebilirsiniz. Yazı olarak ne yazmasını istiyorsanız da şu kısımları değiştirmeniz gerekiyor " umutcanra ".
    hocam denedim çalışmadı
  • 12-07-2021, 02:38:49
    #6
    Caxing
    Caxing
    riwe adlı üyeden alıntı: mesajı görüntüle
    hocam denedim çalışmadı
    Merhaba, yukarıdaki arkadaşın paylaştığını da deneyebilirsiniz. Fakat çalışmadı derken nasıl bir hata aldınız ? Konuyu açan kişi de genişlik hatası dışında bir hata olmamış.
  • 12-07-2021, 02:41:44
    #7
    riwe
    riwe
    Caxing adlı üyeden alıntı: mesajı görüntüle
    Merhaba, yukarıdaki arkadaşın paylaştığını da deneyebilirsiniz. Fakat çalışmadı derken nasıl bir hata aldınız ? Konuyu açan kişi de genişlik hatası dışında bir hata olmamış.
    tamamdır hocam çalıştı yanlış formatta kaydetmişim
  • 12-07-2021, 02:47:30
    #8
    Caxing
    Caxing
    riwe adlı üyeden alıntı: mesajı görüntüle
    tamamdır hocam çalıştı yanlış formatta kaydetmişim
    Iconların gözükmesi için Fontawesome'u kullanmanız gerekiyor bu arada.