tarihinde Fatih Hayrioğlu

CSS ile yapılabileceklerimiz her geçen gün artarken burada sizlere bazılarını sıralamak isterim. Bu yazımdan sizlere CSS ile yapılabilecek yükleniyor animasyonlarını anlatmaya çalışacağım. Burada anlattıklarım “devede kulak” bir çok sitede daha fazlasını bulabilirsiniz. codepen’de bir loading araması ile birçok örneğe erişebilirsiniz. Ayrıca hazır css kodları sunan sitelerden de yararlanabiliriz.

Bunlar benim konuyu araştırırken bulduklarım. Burada anlatmamın sebebi; tasarım olarak gelen yükleniyor animasyonları buradaki örneklerden farklı olabilir biz temel kodları anlarsak birçoğunu CSS kullanarak yapabiliriz.

Peki hazır resim dosyaları veya SVG ile de biz bunları yapabiliriz niye CSS ile yapıyoruz?

CSS ile yapmanın bize esneklik ve kolay değiştirebilme imkanı sağlar. Ben olabildiğince CSS ile çözme taraftarıyım.

Dairesel yükleniyor örneği

Burada içi boş bir kutuyu border-radius ile yuvarlayıp kenarlarını saydam verip bir kenarını beyaz yaparak bir şekil elde ederiz. Bunu basit bir animasyonla transform: rotate(360deg) döndürdüğümüzde işlem tamamdır.

Bar yükleniyor örneği

Bu tip birden fazla eleman(3 adet bar) çözümlerin için HTML olarak eklemekte bir çözüm. ancak buradaki örnekte background özelliği üç eleman eklenmiş ve bu elemanların boyutlarıyla oynanarak animasyon elde edilmiştir.

Nokta yükleniyor örneği

Bu örnekte biraz background‘a atanan radial-gradient ve clip-path yardımıyla şekil oluşturulmuş. Animasyonu da clip-path: inset(0 -34% 0 0) değiri değiştirilerek oluşturulmuştur.

İlerleme çubuğu örneği

Yine bir background ile oluşturulmuş bir ardalan ve iki adet mor renkli çubuk ile şekil oluşturulmuş. Animasyon oluşturulan bu iki elmanın konumu değiştirilerek background-position: 250% 0,-150% 0 yapılmış.

progress elementi ile

Yukarıdaki örneklerde HTML olarak hep <div class="yukleniyor"></div> diye bir elemanı kullanılarak üretildi. Burada ise <progress /> elemanı kullanılarak oluşturuldu. Çok stiline dokunmamıza izin vermiyor standartlar. Sadece accent-color tanımıyla sağa sola hareket eden kısmın rengini değiştirebiliyoruz. Bu elemanını CSS ile erişimine olanak sağlansa hem mantıksal bir öge olmuş olur hem de işler daha kolay olur. Belki ilerde geliştirirler.

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

Yatay scroll tercih sebepleri genelde kullanıcının yoğun kullandığı alandaki yerin paylaşım sorunlarını aşmaktır. Bu paylaşım sorunu mobil ortamlarda daha fazla ortaya çıkıyor. Birçok e-ticaret ve haber sitesinde yer alan caraousel yapıları bunun en önemli örneğidir. Bu yapılar genel olarak javascript ile çözüle gelmekte idi. Sonra standart koyucular bunun CSS ile de yapılacağı bir özellik grubu açıkladı bu özellik grubunu scroll-snap olarak tanımlıyoruz.

Bir içeriği kaydırırken genelde kaydırılan içeriğin neresine kadar kaydırdığımıza dikkat etmek zorunda kalırız. Çünkü arada atlama olmasını istemeyiz. Günümüzde sonsuz kaydırmalı yapıların çoğalarak kullanıldığı yapılarda bu daha çok önem kazanır. scroll-snap özelliği kaydırmanın belli noktalara mıknatıs gibi yapışmasını sağlıyor. Böylece kullanıcı fazladan dikkat etmek zorunda kalmadan kaydırma yapabiliyor.

scroll-snap özellikleri kaydırma yapılacak içeriği kapsayan elemana tanımlana özellikler ve kaydırılan içeriğe atana özellikler diye ikiye ayırırız.

  • Kapsayıcı tanımları
    • scroll-snap-type
    • scroll-padding
  • Alt eleman tanımları
    • scroll-snap-align
    • scroll-margin

Kapsayıcı eleman tanımları ile başlayalım;

scroll-snap-type

Kaydırma işlemenin yapılacağı içeriğin kapsayıcısına tanımlanır. Tanımlanan kapsayıcının yatayda mı, dikeyde mi kaydırma yapacağını belirliyoruz bir de kaydırma işleminin tutma işleminin katı mı yoksa yarı katı mı olacağını belirliyoruz.

  • mandatory: Kaydırma işlemi yaparken kati bir şekilde belirlene noktaları tutmasını istiyorsak.
  • proximity: Kaydırma işlemi yaparken kullanıcı yarıyı geçen kadar zorlama ama yarıyı geçtikten sonra yapıştır demek için kullanılır.

Bu iki ayrımı örneklerde daha iyi göreceksiniz diyelim ve diğer tanıma geçelim.

mandatory örneği:

proximity örneği:

scroll-padding

Kaydırma işlemi yaparken sayfamızda veya içeriğimizde yapışık alanlar varsa veya tam belirli bir yerden değilde 20px öncesinde dursun dediğimiz durumları sağlar bize.

Gelelim alt eleman tanımlarına;

scroll-snap-align

Kaydırma yapılancak içerikteki ögelerin neresine hizalanacağını belirlememize yarıyor. Üç değer alır.

  • start: Kaydırma ögenin başlangıcına göre yapılır.
  • center: Kaydırma ögenin ortasına göre yapılır.
  • end: Kaydırma ögenin sonuna göre yapılır.

Not: İlk öge hep start ile başlar sonraki ögelerde tanıma göre değişir.

scroll-margin

scroll-padding ile aynı işlevi görür. scroll-padding kapsayıcıya tanımlanırken scroll-margin alt elemana tanımlanır.

Tarayıcıların geliştirici araçlarındaki görünümü

chrome scroll-snap Chrome’un geliştirici aracında scroll-snap çok iyi düzenleniyor ve görünüyor. Kaydırma yapılacak alan scroll-snap kullandığı gösteriliyor. scroll-snap-align bilgisi padding ve margin bilgisi gösteriliyor. Kaydırma yapılan ögelerin izdüşümleri gösteriliyor. Firefox ve Safari’de gösteriyor ancak Chrome’un gösterimi çok iyi.

Tarayıcı desteği

%95 gibi gayet güzel bir desteği var.

Tarayıcı Desteği

Chrome explorer Firefox
+ - +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ + +

Sonuç

scroll-snap özelliği bizlere bir çok yönüyle kolaylık sağlıyor. Tabi projelerimizdeki tüm kaydırma alanı ihtiyaçlarımızı karşıladığını söyleyemeyiz. Bir careousel yapabiliriz ama bu careousel’e ok eklemek istediğimizde ya statik ekleyeceğiz ya da javascript yardımı almamız gerekir. Benzer şekilde gezinmek için nokta koyduğumuzda da benzer durum geçerli. Şimdilik ihtiyaca göre javascirpt desteği sağlanıp çözüm üretmek mantıklı görünüyor.

slider scroll-snap + js

Şu örnek scroll-snap + js kullanımı için mükemmel bence.

Bİr diğer konu da yeni gelecek olan kaydırma çubuğuna bağlı animasyon ile birlikte çok güzel uygulamalar ortaya çıkacaktır. Bu konuda şöyle bir makale var.

İki yönlü uygulama olarak bir takvim uygulaması gayet başarılı. Örnek

Tayfun Erbilen’in örneği de gayet güzel.

Tabi pozitif yanlarını yanında negatif yanları da var. Bu işi js ile yapanların çıkardığı bir negatif yanlar yazısı var.

Sonuç olarak tüm ihtiyaçları karşılaması zor bir alan ama en azından büyük çoğunluğun ihtiyacını karşılayacak bir özellik.

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

Buzlu cam efekti yapmak, :user-invalid seçicisi yazısındaki örnekte de kullandığım bir teknikti. CSS’in bizlere kazandırdıklarını göstermek açısından güzel örnek.

Peki buzlu cam desenli ardalanlar nasıl yapılıyor?

Ben bu efekti ilk olarak Kyle Wetton’ın CodePen‘deki örneğinde görmüştüm.

Kod olarak da çok basit bir uygulaması var. Arka tarafında büyük bir resim olan bir kutunu ard alanına backdrop-filter: blur(18px); tanım yaparız. Uyguladığımız yere göre ard alanına beyaz veya siyah bir renk tanımlayıp saydamlığını da 0.3 tanımladıktan sonra son olarak kutuya bir gölge vermekte güzel etki yapıyor. Sonuçta kod:

.glass {
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0px 20px 18px rgba(0, 0, 0, 0.30);
}

Üste yapışık menülerde de güzel efekt veriyor.

Bunların dışında bir çok örnek var. İncelemek isterseniz codpen linki

Not: filter: blur(10px) ile benzer sonuçlar elde edilebilir.

Tarayıcı Desteği

Türkiye’de şu an %95’lik desteği ile kullanılır durumda.

Tarayıcı Desteği

Chrome explorer Firefox
+ - +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ + +

Kalın sağlıcakla.

Kaynaklar