Arka Plan Ayarlama

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

Statik Fotoğraf 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ı 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 Plan Resminde Filtre Ayarlama

Bu, Page Slide Container için geçerlidir. Gelişmiş arka plan tıklayıp imageElement seçebilirsiniz. Bu, konteynerin içine ilk eleman olarak ayrı bir HTML <div><img /></div> elemanı oluşturacaktır.

Daha sonra buna filtre gibi CSS özellikleri uygulayabilirsiniz. Örneğin, arka plan resmi ile ön plan metni arasında daha fazla kontrast oluşturarak okunabilirliği artırmanın 3 yolu:

filter: grayscale(0.5)

filter: brightness(0.5)

filter: blur(5px)

Daha ayrıntılı bir giriş için MDN belgelerine göz atabilirsiniz.

Tekrarlanabilir Desen Arka Planları

Bu, Page, Slide, Container için geçerlidir. Gelişmiş arka plan üzerine tıklayıp desen seçebilirsiniz.

1. Bir desen türü seçin
2. Ardından desenin seçeneklerini özelleştirebilirsiniz. Size hangi rastgele deseni verdiğini görmek için Beni İlhamlandır butonuna 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 degrade bir arka plan eklemek için backgroundImage. Ayrıca SVG'yi de animasyonlu hale getirebilirsiniz.

Video Arka Planları

Bu, Page, Slide, Container için geçerlidir. Gelişmiş arka plan üzerine tıklayıp YouTube'u seçebilirsiniz. Bu, içinde bir YouTube videosunu gömmek için 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 geri bildirim butonu aracılığıyla bize bildirin.

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 target'ı yalnızca resim öğesine uygulamak için &>*:first-child olarak ayarlamalısınız.