CSS Mask ile Doku Kullanımı

İnternette dolaşırken doku kullanımına rastladım. Yeni CSS özellikleri ile önceden doku kullanılan alanları direk imaj olarak kaydedip web sitesinde gösterme tarihe karışacak. Güncel internet tarayıcılarında CSS yardımıyla bu dokuları “background-clip” ve “mask-image” yardımıyla SVG (<clippath>, <pattern> ve <mask>) ve canvas’lara uygulayabilir olduk. Tabi bunların da kendine özgü kullanım ve zorluk dereceleri de yok değil. Ben …

Flexbox ile Footer Sabitleme

Hemen hemen tüm geliştiricilerin kariyerlerinde en az bir kere karşılaştığı sorunlardan birisi de, içeriği az olan sayfalarda footer’ın en aşağıda yer almaması olsa gerek. Aslında, footerın yüksekliği bilindiği taktirde bunun bi’ çözümü vardı. Flexbox, işte tam bu noktada yardımımıza koşuyor. Genellikle internette yatay pozisyonlamalar için kullanılsa da dikey yönlü çözümlerle de öne çıkıyor.Yapacağınız tek şey …

“object-fit” ile İmaj Boyutlandırma

Responsive websitesi yaparken yaşadığımız en büyük zorluklardan birisi de imaj boyutlandırmaları olsa gerek. Kolay yoldan bunu küçük bi’ CSS kodu yardımıyla çözebiliyoruz: [code lang=”css”] img { max-width: 100%; height: auto; } [/code] Ama hepimizin de bildiği gibi bu çözüm pek yeterli olmuyor. Bazen, imajın elementin hepsini kaplamasını, bazen en boy oranını korumasını veya her responsive …

CSS ile Dikey Ortalama

3 satır CSS kodu ile herhangi bir elementi dikey alan içerisinde ortalamak kim istemez ki ? Yüksekliği belirlenmemiş herhagi bir alan içerisine, herhangi bir nesneyi “transform: translateY” yardımıyla ortalayabiliyoruz. “Transform” CSS değeri her ne kadar bir elementin rotasyonunu değiştirmek veya scale etmek için kullanılsa da “translateY” ile elementlerin dikey değerini düzenleyebiliyoruz. Aşağıdaki kod bloğu yardımıyla dikey …

CSS Loading Spinner

Bir zamanlar, “yükleniyor” adı altında öyle çok gif yapıldı ki. Gerçi baktığımızda hala bu imajları kullanıyoruz. Geçenlerde yaptığım sayfa için bu imajlardan kullanaktım. Proje içerisine baktığımda bir çok imajın olduğunu, bunlardan kurtulmak gerektiğini farkettim. Günümüz CSS teknolojisi, :before ve :after elementleri yardımıyla öyle güzel şeyler yapılabiliyor ki. İşte sadece CSS’den oluşan “yükleniyor” animasyonumuz: See the …