CSS @property ve Yeni Bir Stil

 (ryanmulligan.dev)
2 puan yazan GN⁺ 2024-09-05 | 1 yorum | WhatsApp'ta paylaş
  • @property kuralı tüm modern tarayıcılarda destekleniyor ve CSS özel özelliklerinin sözdizimini, başlangıç değerini ve kalıtımını açıkça tanımlama olanağı sunuyor
  • CSS Houdini ve CSS Properties and Values API ilk kez tanıtıldığından bu yana epey zaman geçti
  • @property olasılıklarını inceleyen demolar üzerinden yeni nesil CSS’in neler sunabildiğine bakılıyor

Calls to action (eyleme çağrı öğeleri)

  • Web sayfalarında dikkat çeken CTA’ler birçok sitede kullanılıyor
  • Bu stil doğrudan denenmiş ve sonuç CodePen’de görülebiliyor
  • Demonun CSS panelini açarsanız animasyon gereken özel özelliklerle ilgili @property kurallarını görebilirsiniz
@property --gradient-angle {  
  syntax: "";  
  initial-value: 0deg;  
  inherits: false;  
}
  • @property kuralı tarayıcıya sözdizimine izin verildiğini bildiriyor ve başlangıç değerini 0deg olarak ayarlıyor
  • Böylece tarayıcı 0deg ile 360deg arasında yumuşak geçiş yapabiliyor ve dönen bir gradient üretebiliyor
@keyframes rotate-gradient {  
  to {  
    --gradient-angle: 360deg;  
  }  
}  
.rotate-gradient {  
  background: conic-gradient(from var(--gradient-angle), transparent, black);  
  animation: rotate-gradient 10s linear infinite;  
}
  • Basit bir gradient döndürme demosu, bu kavramı uygulamak için gereken birkaç satır kodu gösteriyor

Yumuşak hover geçişi

  • Bir öğe hover olduğunda yumuşak bir gradient geçişi için bazı özel unsurlar gerekiyor
  • Animasyon gereken her özel özellik, @property tanımında sözdizimini bildirerek tarayıcının değer değişimini akıcı biçimde geçirmesini sağlıyor
.shiny-cta {  
  background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,  
              conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),  
                            transparent, var(--shiny-cta-highlight) var(--gradient-percent),  
                            var(--gradient-shine) calc(var(--gradient-percent) * 2),  
                            var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),  
                            transparent calc(var(--gradient-percent) * 4)) border-box;  
}
  • --gradient-percent değeri parlayan alanın boyutunu belirliyor; hover sırasında daha yüksek bir yüzde ile ışık daha uzun hale geliyor
  • --gradient-angle-offset değeri gradient açısını yeniden ayarlayarak hover sırasında ışığın geri dönmesini engelliyor

Dönüş hızını ayarlama

  • Hover sırasında dönüşü yavaşlatmaya yönelik CSS ipucu oldukça kullanışlı
  • Aynı dönüş animasyonu iki kez tanımlanıyor; ikincisi ters yönde ayarlanıyor, duraklatılıyor ve süresi yarıya indiriliyor
  • Öğe hover olduğunda animation-play-state: running, duraklatılmış değeri geçersiz kılıyor ve dönüşü yarı hızda yavaşlatıyor

Küçük parlayan noktalar

  • Butonun içine küçük noktalarla parıltı efekti ekleniyor
  • Bunun için radial-gradient arka planı oluşturuluyor
.shiny-cta::before {  
  --position: 2px;  
  --space: calc(var(--position) * 2);  
  background: radial-gradient(circle at var(--position) var(--position),  
                              white calc(var(--position) / 4),  
                              transparent 0) padding-box;  
  background-size: var(--space) var(--space);  
  background-repeat: space;  
}
  • --gradient-angle özel özelliği, conic-gradient maskesinde kullanılarak nokta deseninin bir kısmını dönerken görünür hale getiriyor

Hover renklerini geliştirme

  • Hover stili daha derin ve daha dikkat çekici hale gelecek şekilde iyileştiriliyor
  • Buton metni bir span öğesiyle sarılıyor ve hover sırasında genişleyip küçülmesi için blur uygulanmış bir box-shadow ekleniyor

Yeni bir stilin gelişi

  • Yukarıdaki tekniklerin çoğu kısa süre öncesine kadar neredeyse imkânsızdı
  • Özel özellikleri açıkça tanımlamak pek çok yeni fırsat yaratıyor
  • @property’nin büyük ölçekli uygulamalarda ve tasarım sistemlerinde nasıl kullanılacağını görmek heyecan verici

GN⁺ Özeti

  • @property kuralı, CSS özel özelliklerinin sözdizimini, başlangıç değerini ve kalıtımını açıkça tanımlama imkânı sunuyor
  • Bu sayede web geliştiricileri daha karmaşık ve daha rafine animasyonlar ile stiller oluşturabiliyor
  • Özellikle büyük ölçekli uygulamalar ve tasarım sistemlerinde faydalı olma potansiyeli yüksek
  • Benzer işlevler sunan diğer projeler arasında CSS Houdini ve CSS Properties and Values API yer alıyor

İlgili okumalar

1 yorum

 
GN⁺ 2024-09-05
Hacker News görüşleri

  • Yeni bir kavramla karşılaşınca beynin direnç gösterdiği hissediliyor

    • MDN makalesinin okunması öneriliyor
    • @property'yi bizzat kullanarak anlamak gerekiyor
    • Karmaşık UI'ler geliştirirken JS bağımlılığını en aza indirmek önemli

  • Bir web geliştiricisi değil ama temel web framework'lerini kullanabiliyor

    • CSS ilk çıktığında o dönemi hatırlıyor
    • İlk CodePen örneğindeki CSS anlaşılmıyor
    • Stil sistemi için mini bir animasyon programlama diline ihtiyaç olup olmadığı sorgulanıyor
    • Bunun JavaScript ile de yapılabileceği düşünülüyor

  • Son dönemdeki CSS çalışmaları, özellikle Houdini, ilgi çekici bulunuyor

    • IE 5.5 özellikleri kitabını aldığındaki hisse benzetiliyor
    • CSS'ye yeni özellikler eklendi ama bunlar daha temel düzeydeydi
    • IE geliştiricileri JS kodunu modül hâline getirip CSS ile elementlere ekleyebiliyordu
    • Şimdi bu tür yetenekler yeniden kazanılıyor

  • Yapılabiliyor olması, mutlaka yapılması gerektiği anlamına gelmez

    • Parlak mavi LED'ler ilk çıktığında her donanımda kullanılmıştı ama kullanıcıya bir değer katmıyordu

  • CSS animasyonlarıyla yapılabilen şeyler sihir gibi geliyor

    • Sadece CSS'ye özgü olduğu için öğrenmesi ve kavramsallaştırması zor
    • JS ile programlamak daha kolay geliyor
    • CSS flex'in çok sayıda kullanım seçeneği olduğu için zorlanılıyor

  • Teknik olarak ilginç bir demo ama butonlar böyle animasyonlandırılmamalı

    • Her şey mor gradyan kenarlık ekleyip bunu animasyonlandırmaya çalışıyor
    • Yapılabiliyor olması, mutlaka yapılması gerektiği anlamına gelmez
    • Bu tarzları kaldırmak için özel CSS yazmak bir kılavuz hâline gelmiş

  • Önceki gönderiler fazla ilgi görmedi ama ilginç ve öğretici

  • Bu web sitesi neşe veriyor

    • CSS ile uğraşmayı her zaman sevmiş
    • Web geliştirme kariyeri boyunca birçok insanın CSS'den nefret ettiğini öğrenmiş
    • HTML+CSS'yi keşfetmeye ve deney yapmaya çok zaman harcıyor
    • Çoğu insan bunu zaman kaybı sayacaktır
    • Bu site gününü güzelleştirmiş

  • CSS ile çalışmayı seviyor ama iş arkadaşlarının zorlandığını görüyor

    • Kevin Powell'ın YouTube kanalını güçlü biçimde tavsiye ediyor
    • Kayıtlı özelliklerle ilgili yararlı işlevleri anlatan bir video var
    • video bağlantısı
    • Kayıtlı özellikleri kolayca anlatan bir makale de var
    • makale bağlantısı

  • Bir süredir web geliştirme yapmıyor ve bu özelliğin ne yaptığını anlaması zaman almış

    • Makalenin bunu iyi açıklamadığını düşünüyor
    • Yeni özellik, @property --gradient-angle {...} bloğunda tanımlanan değerin kullanılmasını sağlıyor
    • inherits: false; kısmının ne yaptığı açık ama neden gerekli olduğu anlaşılmıyor
    • CSS seçicileri zaten kalıtımı kontrol edebiliyorken bunun neden ikinci bir yerde daha kontrol edilmesi gerektiği sorgulanıyor
    • Türün neden @property bloğunda tanımlanması gerektiği anlaşılmıyor
    • Tarayıcının @property kullanılan yerlere bakıp türü çıkaramayacağı düşünülüyor