tarihinde Fatih Hayrioğlu

Durumu şöyle açıklayabilirim: Aslında başlıkta açıklamış gibiyim :) Değişen arka planların olduğu bir yapının üzerindeki metinlerin rengini dinamik değiştirmeyi göreceğiz.

Böyle bir ihtiyacımız olmuştu daha önce bunu nasıl yaparız diye düşünüp çözemeyince farklı yollara başvurmuştuk.

Hatırladığım dört örnek var. Kendilerini bulamasam da benzer örnekler üzerinden sorunları ve çözümlerini anlatmaya çalışacağım. Son örnek benim sitemden olduğu için onu önceki ve sonraki hallerini resim olarak ekledim.

Çok eskilerde bir iş yapmıştım bir carousel yapıda resim üzerinde yazıların olduğu bir örnek vardı. Tasarımcının yaptığı örnekler mükemmeldi ancak iş kodlamaya dökülüp gerçek veriler girdiğinde hiçte hoş olmayan bir durum ortaya çıktı.

Üzerinden çok süre geçtiği için o carousel’i bulamadım. Onun yerine scroll-snap yazısındaki örneğe bir yazı ekleyip göstereyim dedim. Örnek olsun diye ilk resmi metin rengi ile aynı olacak şekilde ardalanı beyaz bir köpek resmi ekledim. İlk resimde yazını altına beyaz ardalan geldiği için normalde yazı gözükmeyecekti. Biz burada mix-blend-mode: difference; ekleyerek yazının arkada gelen resimden bağımsız görünmesini sağladık.

Koddaki başlık olan h2‘den mix-blend-mode: difference; özelliğini kaldırarak sorunlu halini görebilirsiniz.

Mobilde liste üstü buton

Bir diğer soruna uzun bir ürün listenin olduğu alanın üstüne buton koyduğumuzda yaşadığımız benzer sorun. Buton rengine yakın renkteki listeki resimlerin üzerine geldiğimizde butonun görünürlüğü azalıyordu.

Şöyle bir örnek gördüm codepen.io’da jhey‘in yaptığı çözüm ile bu sorunu da halledebiliyormuşuz. mix-blend-mode: difference; uygulaması ile çözülmüş.

Bastıkça dolan buton

Diğer sorun yaşadığım konu bir butonun mobilde tıklma ile değil de basıldığı sürece içinin dolduğu bir animasyon uyguladığımızda metin rengiyle ilgili yaşadığımız sorun.

Benzer bir örnek buldum codepen.io’da. Çözüm yine mix-blend-mode: difference; ile yapılmış.

Sitemdeki resimli başlıkların resim ile olan uyumu

Sitemdeki yazıların başlıkları altına resim olan bir tema kullanıyorum, burada her zaman resim ve üzerindeki yazıyı düşünerek bir şeyler üretmem gerekiyor. mix-blend-mode: difference; uygulayarak birçok başlık ve resmindeki sorunu çözmüş oluyorum.

mix-blend-mode Genel itibariyle sorunumu çözdü. Sadece bazı yazı içeren karmaşık arka plan resimlerinin olduğu başlıklar güzel sonuç vermedi. Bundan sonra yazılarıma arka plan resmi hazırlarken yazı olmamasına dikkat etmem yeterli olacak.

Tarayıcı desteği konusunda gayet iyi. Türkiye için %96.

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

W3C’nin son zamanlarda yaptığı güzel ataklar bize doğru yolu bulduklarını gösteriyor. Geriden de gelseler sektörün ihtiyaçlarına kulak vermeleri güzel. ::marker ile bunun ne alakası var derseniz şöyle açıklayayım: Yıllarca list işaretleyici (marker) için çeşitli yöntemler geliştirdik ve kullandık sonra ::marker sözde elementi çıktı ve bu yaptığımız alternatif yöntemlere gerek kalmadı. Standart koyucular yerleşik olarak gelen elemanlara yeterince CSS ile erişim sağlarlarsa hem daha standart hem de daha kolay yönetilebilir bir mecraya kavuşabiliriz. Son yıllardaki atılım bu konuda beklenen çizgiye geldiğini gösteriyor.

Gelelim konumuza HTML’de üç çeşit liste elementi var. Sıralı listeler (<ol>) ve sırasız listeler (<ul>) ve tanımlı listeler(<dl> <dd>) Biz burada işaretçisi olan <ul>ve <ol> elementi inceleyeceğiz.

Bu HTML etiketlerini oluşturduğumuzda bize tarayıcıların standart stilleri ile görünürler. Biz bu görünümleri değiştirmek için şimdiye kadar alternatif yöntemler kullanıyorduk. Şimdi ::marker sözde elementi ile bunu kolaylıkla yapabiliyoruz.

Yukarıdaki listede yuvarlak işaretçiyi veya rakamları değiştirmek istesek te W3C’nin bize sunduğu alternatiflerden birini kullanmak durumundaydık. Kendi özel işaretçimizi kullanmak için genelde list-style: none; ile işaretçiyi gizleyip :before ile kendi işaretçimizi ekliyorduk.

Şimdi ::marker sözde elemanı yardımı ile bu işaretçilerin özelliklerine erişip değiştirebiliyoruz.

Bunun dışında işaretçilerin yerine resim veya emoji koyabiliyoruz.

::marker sözde sınıfına tanımlanabilen özellikler

Şu an uygulanabilen tanımlar aşağıdakilerdir.

  • font-* özellikleri
  • white-space
  • color
  • direction
  • content
  • animation
  • transition

Şu an background, margin, padding, width, height özelliklerine müdahale edemiyoruz umarım bunlarda eklenir.

Tarayıcıda görünümü

Liste işaretçilerini tarayıcılarda görüntüleyip üzerinde işlem yapabiliyoruz.

marker tarayıcıda görünümü

Tarayıcı desteği de gayet iyi. Yazıyı yazdığımda %95 desteği var.

Kalın sağlıcakla.

Kaynaklar

  • https://css-tricks.com/css-counters-custom-list-number-styling/
  • https://codepen.io/ines/pen/qXrYQO
  • https://codepen.io/t_afif/pen/GRYZeqr
  • https://codepen.io/DuskoStamenic/pen/LYeEqbm
  • https://codepen.io/5t3ph/pen/KKgqeNB
  • https://webdesign.tutsplus.com/next-level-list-bullets-with-css-marker–cms-37212t
  • https://youtu.be/2awepiNoaZI?si=LFm0QOT5gap_x3AW
  • https://www.smashingmagazine.com/2019/07/css-lists-markers-counters/
  • https://web.dev/articles/css-marker-pseudo-element?hl=tr
tarihinde Fatih Hayrioğlu

Bu sıralar CSS ile yapabileceklerimiz konusunda codepen.io’da çok vakit geçiriyorum. Gördüklerimden güzel olanları burada paylaşmaya çalışıyorum. Bu yazıda animasyonlu altı çizli metinler yapmayı anlatmaya çalışacağım. Benim genelde basit ve kolay çözümler daha çok hoşuma gidiyor. Çok eskilerde bu animasyonu genelde flash sitelerin menülerinde kullanıyorduk.

Bu animasyonu yapmak için farklı yöntemler(underline, background- box-shadow) var ancak elemanın :before sözde elemanı ile yapmak en mantıklısı.

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 4px;
  bottom: 2px;
  left: 0;
  background: var(--underline-color);
  transform: scaleX(0);
  transition: transform 0.25s ease-out;
}

transform: scaleX(0); ile çizgiyi gizliyoruz. Aslında animasyonu da bunun üzerinden yapacağız. Animasyonu transition: transform 0.25s ease-out; kodu ile ayarladık.

a:hover::before {
  transform: scaleX(1);
}

Sadece transform: scaleX(1); kodu ile animasyonu tamamladık.

Animasyonun yönünü değiştirebiliriz.

Soldan sağa animasyon

Burada sadece transform-origin: bottom left; kodu ile bunu değiştirebiliyoruz.

.soldan:before {
  transform-origin: bottom left;
}

Sağdan sola animasyon

Burada sadece transform-origin: bottom right; kodu ile bunu değiştirebiliyoruz.

.sagdan:before {
  transform-origin: bottom right;
}

Çok çeşitli örnekler var. Kaynaklar kısmına göz atmanızı öneririm.

Kalın sağlıcakla.

Kaynaklar