Takip Edin

BOOTSTRAP

Saat E-Ticaret Siteleri İçin Resim Yakınlaştırma Efekti

saat e-ticaret sitesi - resim yaklaştırma efekti - öne çıkan görsel
Not: EDIT ON CODEPEN yazısına tıklayarak kodlar üzerinde düzenlemeler yapabilirsiniz.
<div class="container mt-4">
    ...
</div>

.container sınıfı; responsive ve sabit genişlikte bir kapsayıcı oluşturmak için kullanılır. Genişliği, farklı ekran boyutlarına göre değişmektedir.

.mt-4 sınıfı ile üst taraftan 1.5 rem’lik bir boşluk bıraktık.

<div class="row justify-content-center">
     <div class="col-md-4"> ... </div>
     <div class="col-md-4"> ... </div>
     <div class="col-md-4"> ... </div>
</div>

İçeriği farklı ekran boyutlarında ortalayabilmek için .justify-content-center sınıfını kullandık.

Sayfa genişliği, 768 px ve üstü değerler için 3 tane eşit genişlikte div (.col-md-4) oluşturduk.

<div class="card text-center" style="width: 18rem;">
     ...
</div>

.card sınıfı ile temel bir kart oluşturduk. style=”width: 18rem; ile bu kartın genişlik değerini 18 px’e ayarladık.

<div class="inner">
     <img src="https://bit.ly/2WWvOdC" class="card-img-top" alt="Erkek Kol Saati">
</div>

.card-img-top sınıfı ile resmi, kartın en üstüne yerleştirdik.

<div class="card-body">
     <h5 class="card-title"> ... </h5>
     <h6 class="card-subtitle text-muted"> ... </h6>
     <hr>
     <p class="card-text"> ... </p>
</div>

Karta başlık eklemek için <h5> etiketine .card-title sınıfını, alt başlık eklemek içinse <h6> etiketine .card-subtitle sınıfını ekledik.

.card-text sınıfı ile karta metin ekledik.

<ul class="list-group list-group-flush">
    <li class="list-group-item"> ... </li>
    <li class="list-group-item"> ... </li>
    <li class="list-group-item"> ... </li>
</ul>

.list-group-flush ile kartta bir içerik listesi oluşturduk. Bu sınıf sayesinde bir üst kapsayıcı içerisinde liste grup elemanlarını kenardan kenara biçimlendirmek için bazı kenarlar ile yuvarlatılmış köşelerin kaldırılmasını sağladık.

saat e-ticaret sitesi - list-group-flush sınıfı eklenmemiş hali
saat e-ticaret sitesi - list-group-flush sınıfı eklenmiş hali
<div class="card-body">
     <a href="#" class="btn btn-outline-primary btn-block btn-lg"> ... </a>
</div>

.btn-outline-primary sınıfı ile kenarlık rengi mavi olan bir buton ekledik.

Üst öğenin tüm genişliğini kaplayan blok seviyesi bir buton oluşturmak için .btn-block sınıfını kullandık.

Daha geniş bir buton oluşturmak içinse .btn-lg sınıfını kullandık.

CSS Bölümü

Tüm sayfanın arka plan resmine sahip olması için arka plan resmini <body> elemanı üzerinde belirttik.

background-repeat: no-repeat; ile arka plan resminin kendini tekrarlamasını engelledik.

background-size: cover; ile arka plan resminin, elemanın tamamını kaplamasını sağladık.

Tüm elemanın kaplandığından emin olmak için background-attachment: fixed ‘ı kullandık.

Böylelikle arka plan resmi, orijinal oranlarını koruyacak şekilde tüm elemanı kaplamış olacaktır.

Ayrıca, font-family: ‘Changa’, sans-serif; ile varsayılan yazı tipini değiştirdik.

.inner{
    overflow: hidden;
}

.inner img{
    transition: all 1s ease;
}

.inner img:hover{
    transform: scale(1.5);
}

Resmin üzerinde gezindiğimizde boyutunu 1s içerisinde, ease(yavaş bir başlangıç, ardından hızlı, daha sonra yavaş bir şekilde sona eren bir geçiş efekti) efektiyle %50 oranında artırdık.

overflow:hidden özelliğini kullanmadığımız zaman resmin üzerinde gezindiğimizde resmin görüntüsü aşağıdaki gibi olacaktır:

akıllı saat - overflow-hidden özelliği eklenmemiş efekti

overflow:hidden özelliğini kullandığımızda ise resim üzerinde gezindiğimizde resmin boyutu yine artacak ancak resmin taşan kısımları gizlenecektir.

akıllı saat - overflow-hidden özelliği eklenmiş efekti

Son olarak diğer iki .col-md-4 sınıfına sahip olan div’ler içerisine, .card sınıfına sahip olan div’lerimizi yerleştirelim:

3 .card sınıfına sahip olan div de .col-md-4 sınıfına sahip olan div’ler içerisinde bulunduklarından sayfa genişliği, 768 px değerinin altına geldiğinde alt alta gelecektir ancak alt alta gelirken birbirine bitişik konumda gelir. Bu durumu engellemek içinse ilk iki .col-md-4 sınıfına sahip olan div’e .mb-4 sınıfını ekledik.

Devamını oku

Popüler

error: Content is protected !!