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ı
CSS Dersleri
Bir önceki yazımdan CSS iç içe (nesting) yazım sonra ilk akla gelen sorulardan bir tanesi acaba SASS ile yolları ayırma vakti geldi mi? Yazı genelinde SASS olarak belirteceğim ancak benzer şeyler diğer CSS önişlemcileri (LESS, Stylus, PostCSS) için de geçerli. PostCSS belki bunlardan ayrı tutulabilir. PostCSS modüler olarak sadece istediğiniz
CSS Dersleri
CSS son yıllarda etkisini arttırarak büyüyor. Benzer gelişmeyi Javascript topluluğunda yaşamıştık. Bu kısmı biraz açarsam jQuery gibi geliştiricilerin hayatını kolaylaştıran ve sorun çözen kütüphanelerin geliştirme hızına kattıkları değerleri Javascript bünyesine katan topluluk Javascript ekosisteminin büyümesini ve gelişmesini sağladı. Benzer bir durumu CSS'de görüyoruz. SASS, LESS gibi önişlemcilerin geliştiricilere
CSS Dersleri
Buzlu cam efekti yapmak, :user-invalid seçicisi yazısındaki örnekte de kullandığım bir teknikti. CSS'in bizlere kazandırdıklarını göstermek açısından güzel örnek. Peki buzlu cam desenli ardalanlar nasıl yapılıyor? Ben bu efekti ilk olarak Kyle Wetton'ın CodePen'deki örneğinde görmüştüm. Kod olarak da çok basit bir uygulaması var.
CSS Dersleri
Form doğrulama işi önemli. Form doğrulama işini tarayıcılar ekledikleri özelliklerle eline almaya çalışsa da belli alanlarda yetersiz kaldığı için hala Javascript ile çözümler oluşturuyoruz. CSS ile hata durumunu yakalayıp ona göre hatayı ve hata mesajını stillendirebildiğimiz :valid ve :invalid sözde sınflarımız var. input:invalid { border-color: red; } Ancak uygulamada şöyle problemimiz
CSS Dersleri
CSS mantıksal tanımları(Logical Properties) Arapça, Çince, İbranice vb. diller için kodlama yaparken büyük avantaj sağlıyor. Bu konuda Ahmad Shadeed'in güzel biz yazısı (Digging Into CSS Logical Properties) var. Detayları bu yazıdan öğrenebilirsiniz. Burada size bu özellikleri farklı bir amaç için kullanımını anlatacağım. Genelde dikeyde veya yatayda bir