CSS @property ve yeni bir stil

• CSS @property, modern tarayıcıların genelinde desteklenmeye başlayınca özel özellikler için söz dizimi, başlangıç değeri ve kalıtım durumu tanımlanabiliyor; böylece tarayıcı değerleri doğal biçimde enterpole edebiliyor
• Örnek CTA düğmesi, --gradient-angle değerini <angle> olarak tanımlayıp 0deg ile 360deg arasında geçiş yaptırarak conic-gradient ile dönen parlak bir kenarlık oluşturuyor
• Hover efekti, --gradient-percent, --gradient-angle-offset, --gradient-shine gibi özelliklere tip vererek parlaklığın uzunluğu ve yoğunluğunun yumuşak biçimde değişmesini sağlıyor
• Dönüş hızı, aynı animasyonu iki kez tanımlayıp ikincisini ters yönde ve duraklatılmış halde bırakarak, hover anında mevcut konumdan yarı hızda yavaşlayacak şekilde ayarlanıyor
• @property tabanlı özel özellik tanımları, eskiden uygulanması zor olan CSS ifadelerini mümkün kılıyor ve büyük ölçekli uygulamalar ile tasarım sistemlerinde de kullanım potansiyeli taşıyor

---

@property ile açılan özel özellik animasyonları

• @property, CSS özel özellikleri için izin verilen söz dizimini, başlangıç değerini ve kalıtım durumunu belirten bir kuraldır
• CSS Houdini'nin CSS Properties and Values API ile bağlantılı bir özelliktir ve yakın zamanda tüm modern tarayıcılarda desteklenmeye başlamıştır
• Tarayıcı özel bir özelliğin tipini bildiğinde, değerler arasında enterpolasyon yapabilir; bu da yalnızca normal CSS değişkenleri kullanmaya göre daha yumuşak geçişler ve animasyonlar oluşturmayı kolaylaştırır

CTA düğmesinde dönen parlak kenarlık

• Örnek, web'de sık görülen parlayan bir CTA düğmesi stilini CSS ile uyguluyor
• Temel özel özellik --gradient-angle; @property ile <angle> söz dizimi ve 0deg başlangıç değeri tanımlanıyor

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

• Bu tanım sayesinde tarayıcı 0deg ile 360deg arasında doğal bir geçiş yapıyor ve conic-gradient sanki dönüyormuş gibi render ediliyor

@keyframes rotate-gradient {
  to { --gradient-angle: 360deg; }
}

.rotate-gradient {
  background: conic-gradient(from var(--gradient-angle), transparent, black);
  animation: rotate-gradient 10s linear infinite;
}

• CodePen demosunda bu fikri minimum kodla görmek mümkün

Arka plan katmanlarıyla oluşturulan kenarlık parlaklığı

• Parlak kenarlık, linear-gradient ve conic-gradient ifadelerinin background içinde birlikte kullanılması ve her arka plan için farklı origin tanımlanmasıyla oluşturuluyor
  • linear-gradient, padding-box kullandığı için kenarlık alanının dışına taşmıyor
  • conic-gradient, border-box kullandığı için kenarlık genişliğinin oluşturduğu alana kadar uzanıyor
  • Dönen conic-gradientin görünmesi için 1px şeffaf bir kenarlık ekleniyor

.border-gradient {
  background:
    linear-gradient(black, black) padding-box,
    conic-gradient(from var(--gradient-angle), transparent 25%, white, transparent 50%) border-box;
  border: 1px solid transparent;
}

• CTA CodePen demosu nihai düğme efektini gösteriyor

Hover sırasında yumuşak değişen gradyan

• Hover geçişi için gereken her özel özellikte @property içinde syntax tanımlanarak tarayıcının değer değişimlerini enterpole etmesi sağlanıyor
• Düğme arka planı, iç rengi yöneten linear-gradient ile kenarlık parlaklığını yöneten conic-gradientten oluşuyor
• --gradient-percent, parlak alanın boyutunu belirliyor; hover sırasında daha yüksek bir yüzdeye geçerek parlaklığın uzamasını sağlıyor
• --gradient-angle-offset, hover sırasında parlaklığın öne ya da arkaya sıçramış gibi görünmemesi için gradyan açısını yeniden hizalamakta kullanılıyor
• --gradient-shine parlaklığı, çevredeki vurgu rengiyle daha doğal karışması için azaltılıyor

Hover sırasında dönüş hızını düşürme yöntemi

• Dönüş hızını yavaşlatmak için kullanılan CSS ipucu, aynı dönüş animasyonunu iki kez tanımlamaya dayanıyor
• İkinci animasyon ters yönde çalışıyor, süresi yarıya indiriliyor ve varsayılan durumda paused olarak ayarlanıyor
• Hover anında animation-play-state: running, paused durumunu ezerek dönüşü yarı hıza indiriyor
• Hover bittiğinde animasyon başlangıç konumuna sıçramıyor; bulunduğu yerden yeniden hızlanıyor
• CTA düğmesi animasyonu bu yöntemi kullanarak hız değişirken bile dönüş ile hareketin birbiriyle uyumlu kalmasını sağlıyor

Küçük parıltılar ve iç vurgu

• Düğmenin içindeki küçük nokta deseni, ::before pseudo-elementi üzerinde bir radial-gradient arka planı render edilerek oluşturuluyor
• --gradient-angle burada da yeniden kullanılıyor; dönen conic-gradient maskesi nokta deseninin yalnızca bir kısmını görünür kılıyor
• Maskenin gradyan açısı, parlak kenarlığın dönüşüyle hizalanması için 45deg offset alıyor

.shiny-cta::before {
  mask-image: conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black,
    transparent 10% 90%,
    black
  );
}

• ::after pseudo-elementine ise vurgu rengini içeren bir gradyan eklenerek bunun da parlak alanla birlikte dönmesi sağlanıyor
• İç vurgu, düğmenin içinde akan ışık hissini güçlendiriyor

Hover renkleri ve son rötuşlar

• Düğmenin ::before ve ::after pseudo-elementleri zaten kullanıldığı için, düğme metni span ile sarılıyor
• spanin pseudo-elementlerinden birine vurgu rengini taşıyan bulanık bir box-shadow uygulanıyor ve bu gölge düğmenin boyutuna kadar genişletiliyor
• Hover sırasında bu pseudo-element yavaşça büyüyüp tekrar küçülerek yumuşak bir nefes alma hissi oluşturuyor
• İçeride dönen vurgu rengiyle birleşince CTA düğmesinin nihai efekti tamamlanıyor

Tasarım sistemlerine uzanan potansiyel

• Özel özelliklerin açıkça tanımlanması, kısa süre öncesine kadar neredeyse imkânsız olan CSS tekniklerini kullanılabilir hale getiriyor
• @property, CSS'in daha sistematik biçimde yayınlanıp düzenlenmesine giden bir yol açabilir
• İlgili okumalar arasında Stephanie Eckles'ın Providing Type Definitions for CSS with @property ve Adam Argyle'ın Type safe CSS design systems with @property yazıları da yer alıyor
• Ek kaynaklar olarak Animated CSS gradient borders (no JavaScript, no hacks), CSS border animations, @property: Next-gen CSS variables now with universal browser support derlemelerine de bakılabilir