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

tarihinde Fatih Hayrioğlu

HTML form elemanları genelde tarayıcıların belirlediği standart stiller ile gelir. Çoğu zaman projelerimizde standart gelen renkleri değiştirmek için farklı yollar izleriz. Son zamanlarda genel olarak appearance: none ile tarayıcı stillerini ve davranışlarını ezip ekstra div veya :before, :after sözde sınıflarını kullanarak stillendiriyoruz. Bu yöntemler ile özelleştirilen form elemanları tarayıcının bize sunduğu özellikleri ezmemiz anlamına geliyor. Özellikle erişilebilirlik konusunda sorunlu hale geliyor.

W3C bu sorunları görüp accent-color tanımı çıkardı. accent-color tanımı basitçe form elemanlarımızın tarayıcı tarafından belirlenmiş rengini değiştirmemizi sağlayan özelliktir. Tüm form elemanlarına uygulanmıyor.

Uygulanan form elemanları

accent-color tanımı belirli form elemanlarında geçerli. Bu elemanlar

  • <input type="checkbox">
  • <input type="radio">
  • <input type="range">
  • <progress>

Aşağıdaki örnekte de görüleceği gibi bu form elemanlarına sadece accent-color tanımı yaparak rengini değiştirebiliyoruz.

Diğer form elemanları

Şimdilik yukarıdaki form elemanları için çalışan bu kod ileride yenilerinin eklenmesiyle daha etkin kullanılacaktır.

Adam Argyle’ın yazısındaki ek kod da değiştirebileceğimiz alanlar için güzel ipucu kod:

html { 
  --brand: hotpink;
  scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button, 
  ::-webkit-outer-spin-button
) {
  color: var(--brand);
}

Umarım gelecekte select’in seçili option bg, takvim elemanın vb. renk değişimlerini de sağlarız. Ne kadar form elemanına erişirsek o kadar kolaylaşacak bu iş.

Koyu / Açık mod durumları

Artık birçok sitede açık / koyu mod farkı kullanılmakta. Ayrıca sistemdeki tema seçimine göre prefers-color-scheme ile yazılan CSS kodunu da düşünmek lazım.

Aşağıdaki resimde görüldüğü gibi farklı accent-color seçimine göre tarayıcılar farklı renk seçeneklerine otomatik geçiyorlar. Normalde bizim özelleştirdiğimiz durumlarda bu tip durumları bizim düşünmemiz gerekiyor.

Detay vermek gerekirse aşağıdaki görüntüde renk değişince checkbox’ın işareti rengin kontrastına göre siyah veya beyaz oluyor. Benzer şekilde progress’in çubuğunun rengi beyaz yada siyah oluyor. Radio’nun seçili ard alanı beyaz veya siyah oluyor.

accent-color

Sonuç

Sonuç olarak tüm projelerimizdeki sorunları çözmese de bazı projelerdeki ihtiyaçlarımızı karşılayacak bir özellik. Belki başka yenilikler ve yeni form elemanlarıyla daha da geliştirildiği takdirde daha çok projede kullanılabilir.

Kalın sağlıcakla.

tarihinde Fatih Hayrioğlu

CSS ile yapılabileceklerimiz her geçen gün artarken burada sizlere bazılarını sıralamak isterim. Bu yazımdan sizlere CSS ile yapılabilecek yükleniyor animasyonlarını anlatmaya çalışacağım. Burada anlattıklarım “devede kulak” bir çok sitede daha fazlasını bulabilirsiniz. codepen’de bir loading araması ile birçok örneğe erişebilirsiniz. Ayrıca hazır css kodları sunan sitelerden de yararlanabiliriz.

Bunlar benim konuyu araştırırken bulduklarım. Burada anlatmamın sebebi; tasarım olarak gelen yükleniyor animasyonları buradaki örneklerden farklı olabilir biz temel kodları anlarsak birçoğunu CSS kullanarak yapabiliriz.

Peki hazır resim dosyaları veya SVG ile de biz bunları yapabiliriz niye CSS ile yapıyoruz?

CSS ile yapmanın bize esneklik ve kolay değiştirebilme imkanı sağlar. Ben olabildiğince CSS ile çözme taraftarıyım.

Dairesel yükleniyor örneği

Burada içi boş bir kutuyu border-radius ile yuvarlayıp kenarlarını saydam verip bir kenarını beyaz yaparak bir şekil elde ederiz. Bunu basit bir animasyonla transform: rotate(360deg) döndürdüğümüzde işlem tamamdır.

Bar yükleniyor örneği

Bu tip birden fazla eleman(3 adet bar) çözümlerin için HTML olarak eklemekte bir çözüm. ancak buradaki örnekte background özelliği üç eleman eklenmiş ve bu elemanların boyutlarıyla oynanarak animasyon elde edilmiştir.

Nokta yükleniyor örneği

Bu örnekte biraz background‘a atanan radial-gradient ve clip-path yardımıyla şekil oluşturulmuş. Animasyonu da clip-path: inset(0 -34% 0 0) değiri değiştirilerek oluşturulmuştur.

İlerleme çubuğu örneği

Yine bir background ile oluşturulmuş bir ardalan ve iki adet mor renkli çubuk ile şekil oluşturulmuş. Animasyon oluşturulan bu iki elmanın konumu değiştirilerek background-position: 250% 0,-150% 0 yapılmış.

progress elementi ile

Yukarıdaki örneklerde HTML olarak hep <div class="yukleniyor"></div> diye bir elemanı kullanılarak üretildi. Burada ise <progress /> elemanı kullanılarak oluşturuldu. Çok stiline dokunmamıza izin vermiyor standartlar. Sadece accent-color tanımıyla sağa sola hareket eden kısmın rengini değiştirebiliyoruz. Bu elemanını CSS ile erişimine olanak sağlansa hem mantıksal bir öge olmuş olur hem de işler daha kolay olur. Belki ilerde geliştirirler.

Kalın sağlıcakla.

Kaynaklar