Arka Plan Ayarları

İşte slidde.co'da arka plan ayarlamanın birkaç yolu. CSS arka planları, slidde.co'daki herhangi bir öğeye ayarlanabilir.

CSS arka planı

Bu en yaygın kullanım durumudur.

Arka plan resminiz yüklenirken veya arka plan resminizin bir kısmı şeffaf olduğunda bir yedek renk:

backgroundColor: #000

Resim URL'si slidde.co kullanılarak yüklenebilir. Burada CSS gradyanlarını da kullanabilirsiniz ve slidde.co, kodsuz bir şekilde bazı gradyan ön ayarları sağlar:

backgroundImage: url("your_image_url")

Arka planınızın tüm resimleri kapladığından emin olmak için çoğu zaman "cover" kullanabilirsiniz:

backgroundSize: cover

Eğer backgroundSize: "cover" resminizin önemli bir kısmını gizliyorsa, pozisyonlarını ayarlayabilirsiniz:

backgroundPosition: 50% 10px

Arka plan resminiz tekrarlanabilir bir desen değilse, bunu no-repeat olarak ayarlayabilirsiniz:

backgroundRepeat: no-repeat

Bir sayfayı aşağı kaydırdığınızda arka plan resminin hareket edip etmediğini kontrol eder. Genellikle, sayfayı kapladığı için kaydırmayı takip etmeyen statik bir fotoğrafa ihtiyacınız olur:

backgroundAttachment: fixed

Daha ayrıntılı bilgi için MDN belgelerine göz atabilirsiniz.

Arka planları animasyonlu hale getirme

CSS backgroundImage kullanıyorsanız, backgroundPosition'ını kolayca animasyonlu hale getirebilirsiniz. İşte bir örnek.

duration: 1500ms
delay: 800ms
easing: easeOutCubic
0% { backgroundPositionY: -36vw; }
100% { backgroundPositionY: 0; }

Diğer CSS özelliklerini de animasyonlu hale getirebilirsiniz.

Ancak, CSS opacity gibi şeyleri animasyonlu hale getirmeniz gerekiyorsa, doğrudan animasyonlu hale getiremezsiniz. Çünkü opacity tüm öğeye uygulanır. Bunun yerine Gelişmiş arka plan içinde imageElement kullanmalı ve bunu yalnızca resim öğesine uygulamak için target'ı &>*:first-child olarak ayarlamalısınız.

Gelişmiş arka planlar

Bu, Page Slide Container için geçerlidir. Gelişmiş arka plan'e tıklayarak aşağıdaki seçenekleri seçebilirsiniz.

Görüntü öğesi arka planları - Arka plan görüntüsüne filtreler ayarlama

Gelişmiş arka plan'e tıklayın ve imageElement seçeneğini seçin. Bu, konteynerin içine ilk eleman olarak ayrı bir HTML <div><img /></div> öğesi oluşturacaktır.

Daha sonra buna filtre gibi CSS özellikleri uygulayabilirsiniz. Örneğin, arka plan görüntüsü ile ön plan metni arasında daha fazla kontrast oluşturmak için okunabilirliği artırmanın 3 yolu.

filter: grayscale(0.5)

filter: brightness(0.5)

filter: blur(5px)

Daha derinlemesine bir giriş için MDN belgelerine göz atın.

Animasyonlu arka planlar

Gelişmiş arka plan'e tıklayın ve animated seçeneğini seçin.

Seçebileceğiniz çeşitli animasyonlu arka plan ön ayarları vardır.

Genellikle animasyonlu arka planın backgroundColor backgroundImage ayarlarını yapılandırabilirsiniz. Bazı ön ayarlar, rengi, aralığı veya animasyon süresini yapılandırmanıza olanak tanıyan css değişkenlerine de sahiptir.

Tekrarlanabilir Desen arka planları

Gelişmiş arka plan'e tıklayın ve pattern seçeneğini seçin.

1. Bir desen türü seçin
2. Daha sonra desenin seçeneklerini özelleştirebilirsiniz. Ve size hangi rastgele deseni verdiğini görmek için Beni İlhamlandır düğmesine tıklamayı deneyebilirsiniz.

Bu, içinde ayrı bir HTML <div><svg width="100%" height="100%" .../></div> öğesi oluşturacaktır. Bu, css özelliklerini de ayarlayabileceğiniz anlamına gelir, örneğin opacity, filter veya hatta svg üst öğesine bir gradyan arka plan eklemek için backgroundImage. Ayrıca SVG'yi de animasyonlu hale getirebilirsiniz.

YouTube video arka planları

Gelişmiş arka plan'e tıklayın ve youtubeElement seçeneğini seçin. Bir YouTube videosunu yerleştirmek için içinde ayrı bir HTML <div><iframe /></div> öğesi oluşturacaktır. YouTube URL bağlantınızı oraya yapıştırabilirsiniz.

Şu anda yalnızca YouTube öğelerine izin verilmektedir. Kendi videomuzu barındırmaktan daha iyi akış optimizasyonu sağladığı için. Özel video yüklemeye ihtiyacınız varsa, lütfen üst menüdeki geri bildirim düğmesi aracılığıyla bize bildirin.