Instagram Tarzı Profil Çerçevesi Nasıl Yapılır?

Instagram stilinde profil çerçeveleri oluşturmak veya bu tasarımı farklı bir projeye uyarlamak istiyorsanız, aşağıdaki kodları kullanabilirsiniz. Bu tasarım, sitenize görsel bir dokunuş katarken, kullanıcıların dikkatini çekmek için etkili bir yöntem sunar.

Aşağıdaki HTML ve CSS kodlarını kullanarak, Instagram benzeri profil çerçevesini kolayca oluşturabilirsiniz. İhtiyacınıza göre tasarımı özelleştirebilirsiniz.

HTML: Profil Çerçevesi Yapısı

<div class="container">
    <div class="d-flex justify-content-center h-100">
        <div class="image_outer_container">
            <div class="green_icon"></div>
            <div class="image_inner_container">
                <img src="https://i.pinimg.com/originals/43/96/61/439661dcc0d410d476d6d421b1812540.jpg" alt="Profil Fotoğrafı">
            </div>
        </div>
    </div>
</div>

CSS: Profil Çerçevesi Stil Ayarları

Aşağıdaki CSS kodlarını, sitenizin style.css dosyasına ekleyerek tasarımı uygulayabilirsiniz:

html, body {
    height: 100%;
}

.container {
    height: 100%;
    align-content: center;
}

.image_outer_container {
    margin-top: auto;
    margin-bottom: auto;
    border-radius: 50%;
    position: relative;
}

.image_inner_container {
    border-radius: 50%;
    padding: 5px;
    background: #833ab4;
    background: -webkit-linear-gradient(to bottom, #fcb045, #fd1d1d, #833ab4);
    background: linear-gradient(to bottom, #fcb045, #fd1d1d, #833ab4);
}

.image_inner_container img {
    height: 200px;
    width: 200px;
    border-radius: 50%;
    border: 5px solid white;
}

.image_outer_container .green_icon {
    background-color: #4cd137;
    position: absolute;
    right: 30px;
    bottom: 10px;
    height: 30px;
    width: 30px;
    border: 5px solid white;
    border-radius: 50%;
}

Nasıl Kullanılır?

1. HTML kodlarını uygun bir şablon dosyasına veya WordPress’te bir widget alanına ekleyin.
2. CSS kodlarını, temanızın style.css dosyasına yapıştırın.
3. Profil Fotoğrafı URL’sini kendi fotoğrafınızın URL’si ile değiştirin.

Tasarımı Özelleştirme

Bu tasarımı ihtiyaçlarınıza göre özelleştirebilirsiniz:

• Çerçeve Renkleri: .image_inner_container bölümündeki gradient renklerini değiştirerek çerçeve renklerini özelleştirebilirsiniz.
• Boyutlar: Profil fotoğrafı boyutlarını height ve width değerlerini düzenleyerek ayarlayabilirsiniz.
• İkon Rengi: .green_icon arka plan rengini değiştirerek farklı bir renk kullanabilirsiniz.

Sonuç

Bu yöntemle, web sitenize Instagram tarzında dinamik ve etkileyici bir profil çerçevesi ekleyebilirsiniz. Tasarımı projelerinize entegre ederek kullanıcı deneyimini artırabilir ve sitenize görsel bir zenginlik katabilirsiniz.