Kubilay Kahil Blog

    Yeni bir yılın başlangıç noktasındayız. Yeni yıla girmeden önce iyi dileklerimi paylaşmak isterdim, ancak malumunuz getir-götür işleri fazladan zaman alabiliyor ve modern yaşamın içerisinde yazı yazmaya bile vakit kalmayabiliyor. Tabii modern yaşamın sorunları ile tembelliğin, Sabahattin Ali'nin kelimeleriyle " içimizdeki şeytanın " da bunda bir miktar payı var. Uzun bir süredir yazamıyorum ve bunun ne kadar iyi hissettirdiğini unutmuşum.     İsterdim ki yılbaşı günlerinde kullanabileceğimiz sihirli bir değneğimiz olsun ve şöyle bir iki dokunuşla insanların başlarına kondurup gece boyunca düşledikleri hedeflerini gerçeğe dönüştürebilelim. Herkesin kullandığı bir uygulama mı geliştirmek istiyorsun, ha ha ha al bakalım.. Dünyayı dolaşmak mı istiyorsun, al bakalım.. NASA'nın uzaya gönderdiği ekipte olmak mı istiyorsun, al al..       Ancak biraz gerçekçi olmak gerekirse, bu hayallerin dışında katı gerçekler var. Aynı noktaların bir araya geler...

    CSS üzerinde class, id gibi elemanları göze hitap eden, okunabilir, kitlemize uygun bir stil oluşturma amacıyla kullanıyoruz. Classlar bunu sağlayabilmemiz için aracı oluyor. Uygulamak istediğimiz stili, uygulayacağımız bölgeye erişimi sağlıyorlar. Bu özelliğinden dolayı class,etiket seçici olarak adlandırılabilir.     CSS'de onlarca seçici mevcuttur. Bunlardan en bilindik olanlar; class, id ve etiketlerdir. Mouseclick olayları için de fazla kullanılan hover, active ve focus seçicilerini de bu listeye dahil edebiliriz. Bu yazıda yukarıdakilerin dışında kalan seçicileri inceleyeceğiz. :first-child, :last-child:     Birden fazla eleman varsa ve biz bunlardan sadece birincisine stil uygulamak istediğimizde kullanabiliriz. See the Pen zEyJZR by mefistof3l3s ( @kubilay ) on CodePen .       Aynı şekilde son elemana stil uygulamak için, :last-child seçicisini kullanabiliriz. See the Pen KXbxva by mefistof3l3s ( @kubilay ) o...

    CSS gelişimi, Javascript ve Flash gibi scriptlere olan bağlılığı büyük oranda azalttı. Script ve Flash programlarının dosyalarımıza yüklediği ekstra yükün azalmasını sağladı. Bu gelişimlerden biri animasyonlardır. CSS stillerini kullanarak animasyon oluşturabiliriz. See the Pen QqKRyq by mefistof3l3s ( @kubilay ) on CodePen .     Animasyon uygulanacak seçici bloğuna animasyonun özelliklerini, @keyframes bloğuna yaptırmak istediğimiz işlemlerin kodlamasını yapıyoruz.     .ay{         animation-name: ayHareket;       }       @keyframes ayHareket{                from{left: 0;}          to{left: 10px;}        } şeklinde blokları oluşturuyoruz. Uyumluluk problemleri açısından, -webkit- etiketlerini kullanmalıyız.     animation-name: ayHareket;   // En önemli değerdir. Animasyonun kaç saat sonr...