Home-theater-designers
Görüntü üzerine gelme efektleri, web sitenize ekstra bir cila düzeyi ekleyebilir. Pürüzsüz bir etki yaratarak resim galerileri veya karusellerde gezinmeyi daha keyifli hale getirirler. En iyi yanı, bu efektleri JavaScript kullanmadan yalnızca CSS ile oluşturabilmenizdir.
youtube'a sosyal medya linkleri nasıl eklenir
Resimlerinizde farklı animasyon stilleri oluşturabilirsiniz. Bunlar, arka planı bulanıklaştırma veya yakınlaştırma, metinde solma veya kaydırma ve arka plan rengini değiştirmeyi içerir.
GÜNÜN MAKALE VİDEOSU İÇERİKLE DEVAM ETMEK İÇİN KAYDIRIN
için HTML oluşturma
oluşturarak başlayın index.html Bilgisayarınızdaki boş bir klasörün içindeki dosyayı açın, ardından dosyayı bir metin düzenleyiciyle açın. Dosyanın içinde, HTML iskeletini oluşturun ve açılış gövdesi ile kapanış gövdesi etiketlerinin içine aşağıdaki işaretlemeyi ekleyin:
<div class="grid">
<div class="image-wrapper">
<img class="blur" src="https://picsum.photos/500?random=1" alt="">
<div class="content fade">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="zoom blur" src="https://picsum.photos/500?random=2" alt="">
<div class="content fade">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="blur" src="https://picsum.photos/500?random=3" alt="">
<div class="content slide-left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="grey" src="https://picsum.photos/500?random=3" alt="">
<div class="content slide-left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
</div>
Bu, dört görüntü sarmalayıcıya sahip bir ızgara kabıdır. ile div öğeleri görüntü sarmalayıcı class, görüntü ve ona karşılık gelen metin için bir sarmalayıcı görevi görür. Her bölümün görüntüsü ve içeriği, kendisine eklenmiş benzersiz bir sınıf kümesine sahiptir.
Stil sayfasının içinde, bu öğeleri sınıf adlarına göre hedefleyin ve çeşitli stil ve animasyon efektlerini uygulayın. Metin varsayılan olarak gösterilmeyecektir; bunu yalnızca resim sarmalayıcının üzerine getirdiğinizde gösterirsiniz ve resim bu süreçte farklı etkilere maruz kalır.
Temel CSS Ekleme
Artık HTML'yi oluşturduğunuza göre, onu CSS ile biçimlendirme zamanı. Oluşturmak stil.css HTML dosyanızdan bu stil sayfasına dosya ve bağlantı
<link rel="stylesheet" href="style.css">
senin içinde stil.css dosya, yapmanız gereken ilk şey, gövdedeki kenar boşluğunu sıfıra sıfırlamak ve bir miktar alt kenar boşluğu ayarlamaktır:
body {
margin: 0;
margin-bottom: 20rem;
}
Ardından, en dıştaki kabı bir Öğeleri iki boyutlu olarak düzenlemek için kullanabileceğiniz CSS ızgarası . Aşağıdaki kod, sığabilecek sayıda sütun veya satır içeren bir ızgara oluşturur. Her sütunun minimum boyutu 300 pikseldir ve maksimum boyut, kabın 1 kesridir:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
Metni kabına göre konumlandırmak istediğiniz için, konumu görüntü sarmalayıcıya göre ayarlamanız gerekir:
.image-wrapper {
position: relative;
overflow: hidden;
}
Bir sonraki adım, görüntüyü biçimlendirmektir. Görüntüyü bir blok öğesi olarak görüntüleyin, tüm kabın genişliğini kaplayın ve kabının ortasına sığacak şekilde yerleştirin:
.image-wrapper > img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center;
}
Metne gelince, onu ortalayın ve şeffaf, açık gri bir arka plan rengi verin:
.image-wrapper > .content {
position: absolute;
inset: 0;
font-size: 2rem;
padding: 1rem;
background: rgba(255, 255, 255, .4);
display: flex;
align-items: center;
justify-content: center;
}
CSS dosyasını kaydedin ve açın index.html tarayıcınızda. Aşağıdaki resimdekine benzer bir sayfa bulmalısınız.
Geçişi Ayarlama ve Metinler
Artık görüntülere temel stilleri uyguladığınıza göre, bir sonraki adım bunlara biraz animasyon eklemektir. Hem resimlere hem de karşılık gelen metne bir geçiş ekleyerek başlayın:
.image-wrapper > img,
.image-wrapper > .content {
transition: 200ms ease-in-out;
}
Bu, tüm geçiş efektlerinin (yani, karartma, yakınlaştırma ve bulanıklaştırma) 200 milisaniye süreceği ve aynı zamanlama eğrisine sahip olacağı anlamına gelir.
Fade-In ve Blur Animasyonu
İlk animasyon stili metinde kayboluyor. Belirli bir görüntü sarmalayıcının üzerine geldiğinizde, solmak class, kendisine uygulanan bu efekte (fade-in ve fade-out animasyonu) sahip olacaktır. Bunu, opaklığı sıfıra ayarlayarak ve fare belirli bir görüntü sarmalayıcının üzerine geldiğinde bunu bir olarak değiştirerek elde edersiniz:
.image-wrapper > .content.fade {
opacity: 0;
}
.image-wrapper:hover > .content.fade {
opacity: 1;
}
Dosyayı kaydeder ve tarayıcınızı kontrol ederseniz, kararan animasyonun etkin olduğunu görürsünüz. Ancak metnin okunmasının biraz zor olduğunu da fark edebilirsiniz (resim sadeyse ve çok fazla kontrast varsa). Tüm görüntülerin de bir sınıf adına sahip olduğunu hatırlayın. bulanıklık . Bu, resimlerle metin arasına çok ihtiyaç duyulan bir kontrast eklemek için görüntüleri bulanıklaştırmak içindir:
image-wrapper:hover > img.blur {
filter: blur(5px)
}
Şimdi görüntünün üzerine geldiğinizde, görüntünün bulanıklaşacağını görebilirsiniz. Görüntülerde bulanıklığı daha belirgin hale getirmek için piksel değerini artırabilir, böylece bulanıklık ile metin arasına daha fazla kontrast ekleyebilirsiniz.
Başka Efektler Ekleme
Diğer efektler, metni soldan kaydırmak, görüntüyü yakınlaştırmak ve görüntüye gri tonlama eklemektir. İşte üç etkiyi de elde etmek için kod:
.image-wrapper > .content.slide-left {
transform: translateX(100%)
}
.image-wrapper:hover > .content.slide-left {
transform: translateX(0%)
}
.image-wrapper:hover > img.grey {
filter: greyscale(1)
}
.image-wrapper:hover > img.blur {
filter: blur(5px)
}
.image-wrapper:hover > img.zoom {
transform: scale(1.1)
}
Dosyayı kaydedin, ardından tarayıcınıza gidin ve her görüntünün üzerine gelin. Farklı etkileri iş başında görmelisiniz.
eski çizgi film programları nerede izlenir
İçeri kaydırma efektlerini tamamlamak için, her biri bir resim ve metin içeren üç tane daha resim sarmalayıcı oluşturabilirsiniz. Her metin parçasının sınıf adı olacaktır. yukarı kaydır , kayıp düşmek, veya hafif sağ . O zaman uygun değeri iletirsiniz piksel, em veya rem , içinde dönüşüm() üç etkiyi de yaratma işlevi.
CSS Izgarası ve Flexbox
CSS Grid ve Flexbox, web siteniz için harika düzenler oluşturmanıza izin veren iki özelliktir. Neredeyse istediğiniz her düzeni kolaylıkla oluşturabilir ve satırları ve sütunları zevkinize göre özelleştirebilirsiniz. Sütunlar da varsayılan olarak duyarlı olacaktır. Birini diğerinin yerine ne zaman kullanacağınızı öğrenmek, en iyi yüzde bir CSS geliştiricisi olmanıza yardımcı olacaktır.