CSS ile yapılanlar serisinde bu yazımda sizlere bir köşeli veya yuvarlak alan içindeki resmin üzerine gelince köşeli ve yuvarlak alanın dışına taşacak uygulamayı anlatmaya çalışacağım.

Köşeli alanlarda popout efekti

Bir kapsayıcı .kapsayici içinde yer alan resmi position: absolute; ve bottom: 0; ile kapsayıcının altına hizalıyoruz. Normal durumda biraz resmi küçültüyoruz. Farenin üzerine geldiğinde resmi büyüttüğümüzde transform: scale(1.4); istediğimiz sonuç ortaya çıktı.

Oval alanlarda popout efekti

Oval alanlarda popout efekti yapmak için köşeliye göre bir fazla kapsayıcı .resim-kabi daha eklememiz gerekiyor. Ovallik kazandırmak için .kapsayici ve .resim-kabi elemanlarına border-radius tanımladık. Bu örnekte farklı olarak resim ve kapsayıcısını da büyüttük. Ayrıca resme gölge de ekledik.

Tek elemanla çözüm

Oval örneğin sadece bir adet HTML elemanı (<img>) ile yapan örnekler de var. https://css-tricks.com/a-fancy-hover-effect-for-your-avatar/ Temani Afif’in yazısı gayet başarılı.

Az eleman kullanması güzel bir avantaj olsa da kodu karışıklığı beni biraz düşündürdü. Siz projenize göre bri tanesini seçip ilerleyebilirsiniz.

Kalın sağlıcakla.

Kaynaklar

CSS’e gelen yeni özelliklerden birini daha inceleyip sizelere yazmanın sevinci içerisindeyim. Dilimize kapsayıcı sorguları olarak çevirmeye çalışacağım.

Bu özelliği duyunca daha önce zingat’ta Murat Çorlu ile harita sayfasını kodlarken sağda harita solda haritadaki ilanların listelendiği ilan kartlarının olduğu bir yapıdaki tasarımı HTML’e dökmeye çalıştığımız zaman aklıma geldi. (Yazının ana resmindekine benzer bir sayfa yapısı) Biz burada sağdaki harita ve yanındaki alanları dinamik olarak değiştirmek istedik. Yeterli alan varsa solda listelenen alanda 3 kolonlu bir yapı, daha az yer olduğunda 2 kolonlu yapı, daha da az yer olduğunda tek kolonlu bir yapı olsun ve en sonunda sadece haritanın kalacağı bir yapı düşündük.

Bunu medya sorguları ile çözmek mümkün olmadı. Daha sonra bunu yapmak için bir JavaScript çözümü bulsak ta en son sabit bir genişlik ve 2 kolonlu kalsın deyip bırakmıştık. Kapsayıcı sorguların (container queries) çıkacağını ilk duyduğumda bu proje ve orada medya sorgularıyla uğraştığımız zaman aklıma geldi. Bu kadar girizgahtan sonra kapsayıcı sorgularının nasıl çalıştığına değinelim.

Kapsayıcı sorguları nasıl kullanılır?

Kapsayıcı sorgularının genel teorisine ait tanımlara göz atalım.

container-type

En yakın ebeveynine container-type tanım yaparak başlıyoruz. Bu tanım ile bu eleman bir kapsayıcı eleman olduğu belirtiliyor. Başlangıç değeri normal‘dir. Aslında tüm elemanlar birer stil kapsayıcısı (Bir yazıda da bu konuya gireriz) olduğu için normal değeri alır. container-type tanımı iki adet daha değer alır.

  • inline-size: Metin akış ekseni olarakta tanımlayacağımız satıriçi(inline) eksen tanımıdır. Genelde bu değer kullanılıyor.
  • size: Her iki eksende de kapsayıcının sorgulanabileceğini gösterir. Hem satıriçi hem de blok ekseninde sorgulama yapılmasını sağlar.
main {
	container-type: inline-size;
}

Bu tanımı yaptıktan sonra bu kapsayıcı içindeki elemanlara artık belli genişliğe göre sorgulayıp ona göre kod yazabiliyoruz. Örneğin main içindeki .card-container elemanına 1200px genişliğe göre tanım yapalım:

@container (min-width: 1200px) {
  .card-container {
    grid-template-columns: 1fr 1fr;
  }
}

container-name

Sayfa içinde birden fazla kapsayıcı tanımı yapıldığında karışmaması için isimlendirme seçeneği de var. İsimlendirme işini container-name tanımı ile yapıyoruz. Bu tanım tarayıcıların işini kolaylaştırmak için tanımlanmıştır. Tarayıcı hangi elemana kapsayıcı sorgusu uygulanacağını bilirse işi daha kolay oluyor. Yukarıdaki kodu buna göre güncellersek:

main {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 1200px) {
  .card-container {
    grid-template-columns: 1fr 1fr;
  }
}

container kısayolu

Bu iki tanımı birleştiren bir kısayol da vardır. container tanımı bu iki tanımı birleştiren bir kısayoldur.

main {
  container: card / inline-size;
}

Sıralama önemli önce isim sonra tip.

Kapsayıcı Sorgu birimleri

Kapsayıcı sorguların terorisine ait son bilgi de kapsayıcı sorgu birimleri

Kapsayıcı sogrularını kendine ait birimleri vardır. Bu birimler görüş alanı birimlerine viewport (vw, vh, vmin, vd.) benzerdir. Tabi burada bakış alanına değil de kapsayıcıya göre işlem yapılır.

  • 1cqw - Sorgusu yapılan kapsayıcı genişliğinin 1% ‘ine karşılık gelir.
  • 1cqh - Sorgusu yapılan kapsayıcı yüksekliğinin 1% ‘ine karşılık gelir.
  • 1cqi - Sorgusu yapılan kapsayıcı satıriçi ekseninin 1% ‘ine karşılık gelir.
  • 1cqb - Sorgusu yapılan kapsayıcı blok ekseninin 1% ‘ine karşılık gelir.
  • 1cqmin - cqi ve cqb‘nin en düşük değeri
  • 1cqmax - cqi ve cqb‘nin en büyük değeri

Kapsayıcı sorgu örnekleri

Peki zingat’taki ihtiyacımızı bu öğrendiklerimize göre yapmaya çalışalım.

Yukarıdaki codepen örneğinde zoom seviyesi ile oynayarak ta etkiyi görebiliriz.

Mobile öncelik verdiğimiz için diğer şartlar için kod yazdık.

.card-container {
  grid-template-columns: 1fr;
}

@container card (min-width: 1200px) {
  .card-container {
    grid-template-columns: 1fr 1fr;
  }
}

@container card (min-width: 1700px) {
  .card-container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Mükemmel. Mükemmel. Mükemmel.

Bileşen yapısına geçiş

Kapsayıcı sorguları genelde yukarıdaki yapıda kullanmak için düşünülüyor ancak youtube’da Maarten Van Hoof yaklaşımını görene kadar.

Web dünyasında son zamanların popüler kullanımı olan bileşen yapılarını birçoğumuz kullanıyoruz. Kapsayıcı sorgularıyla bu konunun ne alakası var derseniz. Farklı ekipler için geliştirdiğimiz bir bileşeni düşünelim. Örneklere kart yapısından başladığımız için yine bir kart bileşeni kodluyoruz. Bu bileşeni sayfa içinde, sağ kolonda ve detay durumlarının olduğunu düşünelim. Büyük projelerde bu tip işler büyük sorun oluyor. Kapsayıcı sorguları bu sorunu da çözüyor.

Max Böck’ün codepen.io örneği bu konuyu ve tanımları anlamak için mükemmel bence. 3 kolonlu bir yapı var. Solda öne çıkan kitap, ortada en çok satan kitaplar listesi ve sağda da alışveriş sepeti var. Bu ögeleri tutup taşıyabiliyoruz.

Yukarıdaki kart bileşeni 3 yerde kullanılıyor. Herbiri için ayrı ayrı tanım yapıp kodlamak yerine kapsayıcı sorguları ile çözebilmek bileşen yapılı sistemlerde mükemmel bir şey.

Geliştirici araçlarındaki görünüm

Chrome ve Firefox’da aşağıdaki gibi bir etiketleme var. Safari’de göremedim.

dev tools container query

Tarayıcı desteği

Popüler ve çok kullanılan tarayıcıların desteği var. Bu yazıyı yazdığımda Türkiye’deki destek oranı %94.7 olarak görünüyordu.

Kalın sağlıcakla.

Kaynaklar

İnternette gezerken gördüğüm kodu basit etkisi büyük örnekleri paylaşma yazılarıma devam ediyorum. Herhangi bir elemanın kenar çizgilerini birden fazla renk tanımlamak ve üstüne bunu hareketli yapma örneklerini çok gördüm. Bu yazıda bunu anlatmaya çalışacağım.

Doğrusal renk geçişi örneği

border-image: linear-gradient(to bottom right,#ffb56b,#ac255e) 1;

border-image ve linear-gradient birlikte kullanımı ile çözümü hemen bulduk. Mükemmel. Tabi uygulamada kenar çizgilerini bu kadar büyük kullanmayız muhtemelen. Örneğin daha öne çıkması için kenar çizgi kalınlığını yüksek tuttum.

Konik renk geçişi örneği

conic-gradient ile daha farklı seçenekler görmek mümkün.

Hareketli renk geçişi örneği

İşe hareket katmakta kolay. linear-gradient tanımındaki yön tanımını açılı verip bu açıyı animasyon ile döndürdüğümüzde işte animayonlu kenar çizgisi. Tabi burada dikkat açı tanımının @property tanımını da yapmalıyız.

Köşeleri oval renk geçiş örneği

border-image ile border-radius birlikte çalışmasının sorunları var. Birçok örnek sorunu çözmek için :before ve mask ile sonuca gitmiş. Ancak background‘a renk geçişi ekleyip box-shadow: inset ile içini beyaz (istediğiniz renk) ile dolduruyoruz. Son olarakta kenar çizgilerinin görünmesi için saydam olarak tanımladık.

Kalın sağlıcakla.

Kaynaklar