tarihinde Fatih Hayrioğlu

İ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

tarihinde Fatih Hayrioğlu

Safari yeni sürümlerinde switch elementini destekleyeceğini açıklayınca nasıl birşey diye bakayım dedim. Son zamanlarda UI elementlerinin HTML’e kazandırılması kervanına Webkit’in de katılması açısında önemli bir durum.

İlk denemem

<input type="checkbox" switch>

Sonuç mükemmel. Bu gelişmeleri görünce “Senelerdir niye uğraştırdınız be insafsızlar diye” içimden geçirmiyor değilim :)

Şimdilik sadece accent-color ile aktif durumun arka plan rengini değiştirebiliyoruz.

input {
  accent-color: var(--primary-color);
}

Switch

Şu an Safari’nin gelecek sürümlerinde desteklenecek bu özelliği umarım yakında diğer tarayıcılarda destekler.

Safari henüz ::track ve ::thumb sözde elementlerinin desteği henüz yok açmak için Develop > Feature Flags - ::thumb and ::track pseudo-elements açmak gerekiyor. Muhtemelen daha sonraki sürümlerde gelecektir.

input::thumb {
    background-color: var(--primary-color);
    width: 36px;
    height: 36px;
    margin: 4px 8px;
    transition: all 0.3s;
    border-radius: 50%;
}

input:checked::thumb {
  translate: 40px 0;
  background-color: white;  
}

Swicth

Geçenlerde accent-colorörneğinde kullandığım gece/gündüz switch’ini biraz daha değiştirip :before ve :after olmadan çözümü:

input:checked::track {
  background-color: #000839;
  border-radius: 20px;
}

input:checked::thumb {
  translate: 40px 0;
  background-color: #000839;
  transform: rotate(110deg);
  box-shadow: inset 0px 8px white;
}

Swicth

Farklı örnek çalışmaları incelemek için buradaki örneklere bakmanızı öneririm. (not: Tarayıcının zoom değerini arttırınca örneklerin görünümü daha hoş oluyor)

Biliyorum daha çok erken ama araştırmışken paylaşmak istedim. :)

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

2023 senesinde genelde CSS’in yeni çıkan özelliklerini olabildiğince anlatmaya çalıştım.

  1. CSS ile tip tanımı @property
  2. ::marker sözde (pseudo) elemanı
  3. accent-color tanımı
  4. CSS scroll-snap
  5. :user-invalid seçicisi
  6. Yeni bakış alanı(viewport) değerleri
  7. Medya sorgularında aralıklı genişlik tanımlama
  8. CSS subgrid
  9. Yeni text-wrap değerleri balance ve pretty
  10. CSS seçicilerin aranan ebeveyni bulundu :has()
  11. SASS’ın sonu geldi mi?
  12. CSS iç içe (nesting) yazım
  13. CSS aspect-ratio tanımı

HTML’in yeni bileşenleri hakkında da yenilikleri paylaşmak gibi bir hedefim vardı ancak bu konuda eksik kaldım.

  1. Popover API

Sadece Popover bileşinini yazmışım. Bu sene daha fazla bileşen eklerim inşallah.

2024 hedeflerim

2024’de daha çok CSS, HTML, PWA ve CSS ile yapılan basit işler hakkında birşeyler yazma planım var.

CSS

Bu sene CSS’in yeni özellikleri hakkındaki yazılara devam etme hedefim var.

Bunların dışında CSS ile yapılan basit işlerle alakalı yazılara da devam etmeyi düşünüyorum.

CSS’de ki gelişmelerinin devam edeceğini düşünüyorum. 2024 interrop’da hangileri dahil edilir bilemiyorum ama aşağıdaki birçok özelliğin sene sonuda kalmadan standartlaşmasını bekliyorum.

  1. Container Query
  2. linear() tanımı
  3. Cascade layer
  4. Yeni renk tanımları lch, oklab, oklch
  5. Logical properties
  6. CSS Scope
  7. Grid masonary
  8. Scroll-timeline
  9. Stil Query
  10. Anchor positioning
  11. View Transitions
  12. @when else
  13. Trigonometrik fonksiyonlar

HTML

HTML bileşenleri konusunda bir atılım bekliyorum. Bu sayede farklı UI kütüphaneleri yerine UI ihtiyacımızı görebilecek standartlar olacak. Burada kritik nokta bence CSS ile yeterli derecede stillendirilebilir bileşenler olursa iş görür yoksa <select> gibi beklenenin altında bir deneyimle kalır.

  1. dialog elementi
  2. progress elementini stillendirelim
  3. Popover API
  4. Akordiyon
  5. Slider
  6. Selectlist
  7. Switch
  8. Drawer
  9. Data table
  10. Tooltip
  11. Date picker
  12. Form Validation
  13. Tabs
  14. Carousel

Çoğu beklenti ama umarım böyle bir liste çıkar sene sonu. :)

PWA

Safari’ye push notification desteği gelmesiyle geçen sene PWA alanında ciddi bir atılım bekliyordum ancak gözle görülür bir sıçrama olmadı. Nasip diyelim. PWA’i birçok konuda avatajlı görmeme rağmen sektör bu konuda benimle aynı düşünmüyor galiba.

  • Tek kod bloku: Mevcut sitelerde mobil için iki ayrı (iOS, Android) geliştirme ortamı var. Ayrıca hala Türkiye’de responsive olmayan birçok siteden dolayı web ve mobil web var. Bu 4 farklı ortam yerine tek ortamda işlerimizi halledebileceğimiz bir sistem var ve kimse kullanmıyor :)

  • Tek platform öğrenme ihtiyacı: Mobilde mevcut şartlarda Android için farklı iOS için farklı bir öğrenme eğrisi var. Bunun için React Native ve Flutter gibi çözümler olsa da hala birçok şirket native olanları tercih ediyor. PWA’in tüm bunlardan daha iyi bir çözümü var. Sadece HTML, CSS ve Javascript ile tüm her yerde çalışan siteler / uygulamalar yapma imkanı.

  • SEO: Mobil uygulamalrın arama motoru konusundaki sıkıntıları malum. PWA arama motorları konusunda olmazsa olmaz.

  • Güncelleme kolaylığı: Mobil uygulamaların Web marketlerinde güncellemenin zorluğunu bilenler bu konuda PWA’nin ne kadar büyük bir nimet olduğunu anlar.

  • Erişilebilirlik: Bu konuda mevcut sitelerinde eksikleri olsa da PWA’nın erişilebilirlik çözümlerinin daha çok ve kolay olduğunu kabul etmeliyiz.

  • Eski araçlarda çalışma: Düşük kalitedeki araçlarda dahi çalışma imkanı sağlamasıyla mobil uygulamalara göre avantajı vardır.

  • Hız: Web tekonolojileri hız konusunda daha fazla araç sunmaktadır. Hız ölçümü ve geliştirmesi daha kolay. Ön bellek yönetimi ve lazy load yöntemleri daha uzun süre tecrübe edilmiştir. Örneğin Orange Polska S.A.‘nın verilerine göre %30 daha hızlıymış.

  • Daha güvenli: Web’in süregelen güvenlik araçları nedeniyle native uygulamalara göre avantajlıdır. HTTPS seçeneği ile güvenli siteler/uygulamalar yapma imkanı sağlar.

  • Daha az maliyetli: Geliştirme ve idame ettirme maliyetleri daha düşüktür.

Eksi olarak yazabileceğimiz iki konu var mobil cihazlarda cihaz özelliklerine erişim sıkıntılı ve animasyon. Animasyon konusunda kesin çözüm geldi diyebilirim. View Transitions API bence mobil uygulamardaki animasyonu aratmayan tecrübe sunuyor. Apple’ıın yani Safari’nin iOS cihazlardaki cihaz özelliklerine erişim konusunda son yıllarda ki atağı da o eksiğinde yakında giderileceği konusunda ümitlendiriyor bizi. Ne diyelim umarım bu sefer “Bu sene PWA’nın yılı” dedirtiriz. :)

Kalın sağlıcakla.

Kaynaklar