CSS Dersleri
Bir önceki yazımda bahsettiğim gibi CSS'in yeni özelliklerinin bazıları çığır açan özellikler, bazıları kulllanıcı deneyimini iyileştirme yönünde özellikler bazıları da lightdark() fonksiyonu gibi yazım kolaylığı sağlayan özellikler. lightdark() fonksiyonu mevcut uyumlu web yazımındaki büyük sorun olan aşağıdaki kullanımı daha anlaşılır ve düzenli hale getirmeye yarıyor. :root { color-scheme: light
CSS Dersleri
CSS'in yeni özellikleri bazen çığır açan nitelikte (anchor positioning, :has() seçicisi, vb.) olurken bazen yazıma yardımcı kurallar (iç içe yazım, @property) oluyor bazen de genel kullanılan kullanıcı deneyimi arttırıcı özellikleri oluyor. field-size özelliği genel kullanıcı deneyimini arttırıcı bir özellik. field-size özelliği genelde javascript ile çözdüğümüz bir ihtiyacı karşılıyor.
CSS Dersleri
CSS ile yapılanlar serisinde bu yazımda sizlere bir köşeli veya yuvarlak alan içindeki resmin üzerine gelince köşeli ve yuvarlak alanın dışına taşacak uygulamayı anlatmaya çalışacağım. Köşeli alanlarda popout efekti Bir kapsayıcı .kapsayici içinde yer alan resmi position: absolute; ve bottom: 0; ile kapsayıcının altına hizalıyoruz. Normal durumda biraz resmi küçültüyoruz.
CSS Dersleri
CSS'e gelen yeni özelliklerden birini daha inceleyip sizelere yazmanın sevinci içerisindeyim. Dilimize kapsayıcı sorguları olarak çevirmeye çalışacağım. Bu özelliği duyunca daha önce zingat'ta Murat Çorlu ile harita sayfasını kodlarken sağda harita solda haritadaki ilanların listelendiği ilan kartlarının olduğu bir yapıdaki tasarımı HTML'e dökmeye çalıştığımız
CSS Dersleri
İ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
CSS Dersleri
Web'de gördüğüm CSS ile yapılmış bazı uygulamarı burada paylaşmak istiyorum. Bunlardan birisi de renk geçişi ile yapılmış hareketli arka plan resimleri. Kodu çok basit ama etkisi çok iyi. Bundan 10 sene önce bu işi yapsak muhtemlen tarayıcılar çok zorlanacağı işleri artık CSS ile çok basit bir şekilde yapabilmek
CSS Dersleri
@property nedir? CSS'in yeni bir özelliği mi? Aslında yeni bir CSS tanımı ve özelliği değil. @property geliştiriciler olarak bizim hiç dahil omadığımız alanlara girmemize izin verilen bir tanım daha doğrusu CSS Houdini'nin bir parçasıdır. CSS Houdini, Tarayıcı API'leri koleksiyonu için bir çatı terim olan
CSS Dersleri
Geçen gün baklava select komponentine arama ekleme işini yapıyordu Erbil. Bu geliştirme sırasında şöyle bir şey yaşadık; hidden özniteliği ile gizlediğimiz listenin son elemanından dolayı son elemanın alt çizgisinin gizleme kodu çalışmıyordu. Olayı şöyle örnekleyebilirim. İlk listede normal durumda son elemanın altındaki çizgi gözükmüyor. İkinci örnekte sondan bir önceki eleman
CSS Dersleri
Durumu şöyle açıklayabilirim: Aslında başlıkta açıklamış gibiyim :) Değişen arka planların olduğu bir yapının üzerindeki metinlerin rengini dinamik değiştirmeyi göreceğiz. Böyle bir ihtiyacımız olmuştu daha önce bunu nasıl yaparız diye düşünüp çözemeyince farklı yollara başvurmuştuk. Hatırladığım dört örnek var. Kendilerini bulamasam da benzer örnekler üzerinden sorunları ve çözümlerini anlatmaya çalışacağım. Son
CSS Dersleri
W3C'nin son zamanlarda yaptığı güzel ataklar bize doğru yolu bulduklarını gösteriyor. Geriden de gelseler sektörün ihtiyaçlarına kulak vermeleri güzel. ::marker ile bunun ne alakası var derseniz şöyle açıklayayım: Yıllarca list işaretleyici (marker) için çeşitli yöntemler geliştirdik ve kullandık sonra ::marker sözde elementi çıktı ve bu yaptığımız alternatif yöntemlere
CSS Dersleri
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
CSS Dersleri
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