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
Yaşlandıkça böyle ihtiyaçlar doğuyor galiba. Belki ihtiyacı olan olur diye buraya not edeyim. Chrome Dev Tools gibi araçlarda başlangıçtaki görünüm küçük kalabiliyor. Benim için küçük mesela :) Yazı boyutlarını büyütmek için Cmd + + and Cmd + - (Windows'ta Cmd yerine Ctrl kullanın). Ancak bu kısayol İngilizce klavye için Türkçe klavyelerde bunu
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.
Uzun içerikli yapıları daha az yer kaplayacak şekilde ve daha işlevsel kullanmak için genelde akordiyon yapılarını kullanırız. Uzun süredir kullanıla gelen bu bileşenlerin genelde işlevselliğini javascript ile yapıyoruz. HTML ve CSS ile yapılan akordiyonlar için son günlerde gelen name attribute ile işlevsellik yönünden eksik kalan kısım tamamlandı. name attribute tam
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'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
İ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
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
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
Farklı projelerde çalışırken her projenin node sürüm ihtiyacı farklı ise bunlarla baş etmek için nvm kullanmaya başlamıştım. Ancak bazı durumlarda node sürümünü devamlı değiştirmek sorun oluyor. Varsayılan node sürümünü güncellemek gerektiğinde bu konuda NVM bize kolay bir yöntem sunuyor. İlk önce mevcut node sürmünü öğrenelim ve sonra sistemde yüklü nodejs
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
@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
CSS Dersleri
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
CSS Dersleri
Yatay scroll tercih sebepleri genelde kullanıcının yoğun kullandığı alandaki yerin paylaşım sorunlarını aşmaktır. Bu paylaşım sorunu mobil ortamlarda daha fazla ortaya çıkıyor. Birçok e-ticaret ve haber sitesinde yer alan caraousel yapıları bunun en önemli örneğidir. Bu yapılar genel olarak javascript ile çözüle gelmekte idi. Sonra standart koyucular bunun CSS ile
CSS Dersleri
Bakış Alanı Değerleri (View Port) konusunu 2013 yılında yazmıştım. Uzun süredir kullanılan birimler. Masaüstünde güzel bir şekilde çalışırken mobilde sorunları vardı. Telefonun ekranı sabit bir yükseklikte değil. İlk durumda adres çubuğu ve altta gezinme menüsünün olduğu durumlarda vh tanımı ihtiyacı karşılamıyordu. Çözüm için Javascript ile yan yollara sapıp hallediyorduk. CSS
CSS Dersleri
Responsive(uyumlu) web kodlarken en büyük yardımcımız olan medya sorguları hakkında güzel bir gelişme var. Responsive(uyumlu) web kodlarken kullandığımız minimum genişlik ve maksimum genişlik kullanımının sonuna geldik, zaten kullanırken de çoğu zaman kafa karışıklığına neden oluyorlardı. Artık javascript'te kullandığımız matematiksel işaretler yardımı ile genişlik sorgularını kullanabiliyoruz. Bu
CSS Dersleri
CSS'in son yıllardaki atağından önceki en önemli gelişme grid özelliğiydi. Grid çıkarken subgrid'ide içeren bir standart ile çıkacakken tam olgunlaşmadığı için bir sonraki adıma bırakılmıştı. Şuan grid iyice yerleştiğine göre artık subgrid'i de ekleyelim dedi W3C. Chrome'un geçen hafta desteğini açıklamasıyla tüm
CSS Dersleri
Tipografi çok önemli ve eski bir alan web'in bu konudaki gelişmeleri mevcut yazılı mecraya göre geride kalıyor. Tabi tarayıcı geliştiricileri olabildiğince bu alanın ihtiyaçlarını görmek için çabalıyor. Metinlerdeki dul (widow) ve yetim (orphan) sorunları tipografinin sorunları ve bunlara çeşitli çözümler üretiliyor. Web'de bu konuya el atma
CSS Dersleri
CSS'de en çok ihtiyaç duyduğumuz özelliklerden birisiydi ebeveyn (parent) seçicisi. Bir ögenin içindeki elemana olup bitene göre CSS tanımı yapma isteği uzun süredir beklenen bir özellikti. Daha önceleri şöyle bir savunma vardı: Tarayıcılar CSS'i yorumlarken dokümanı aşağı yönlü yorumluyor, bundan ötürü bir elemanın yukarı yönlü elemanını