Kubilay Kahil Blog

 Masaüstü bilgisayarların altın çağını yaşadığı dönemle birlikte sosyal medya kullanımı büyük rağbet gördü. Facebook ile birlikte sosyal medya büyük bir ivme kazandı. Bu durum facebook ile sınırlı kalmadı. Mobil kullanıcı sayısı arttıkça sosyal medya uygulamaları çil yavrusu gibi ortaya çıktı ve popülerlik kazandı. Toplumda yeni meslek grupları oluşmaya başladı. Kimimiz bunu lehine kullanmasını bildi, kimimiz ise sosyal medyada çöpçatanlıktan öteye gidemedi. Ancak elimizden aldığı bir gerçek var, zaman.         Hayatımızın her alanında aşırıya kaçan bizler, sosyal medyayı da ne kadar kullanmamız gerektiği konusunda bir türlü sınır koyamadık. Hızını alamayan bir nikotin tüketicisi günde 2-3 paket sigara tüketip sağlığını kaybeder, aynı rolde saatlerimizi ekranlar karşısında harcayarak geri dönüşümü mümkün olmayan zamanımızı kaybettik ve kaybetmeye de devam ediyoruz.         Parlak ekranlarda harcadığımız zamanı, gene parlak ekranlardaki programlar aracılığıyla ölçebiliyoruz. B

    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 ) on CodePen . :nth-child() :   Y

    Günümüz dünyasında bilgisayar, tablet, telefon gibi araçlar olmazsa olmaz bir öneme sahip. Bu araçlar birer eğlence kaynağına dönüştüğünde zaman kaybı, depresyon, uyku bozukluğu, endişe bozukluğu gibi durumlara sebep oluyor. Günün yarısını ışıklı bir ekran karşısında havaya uçan meyveleri parçalamaya çalışan bir çocuk düşünün. Çocukların gelişim süreçleri açısından baktığımızda durum daha vahim. Ancak bu durumu tersine çevirebiliriz. Çocukların bütün ısrarlarına rağmen, tablet karşısında harcadıkları vakti sınırlandırmamız gerekiyor. Yanı sıra dil, kodlama, matematik gibi gelişimlerine katkı sağlayabilecek eğitim yazılımlarına yönlendirmeliyiz. Bu yazıda birkaç eğitim yazılımına göz atacağız. code.org:     Programlama artık bir gereklilik ve tarımdan sanayiye kadar bütün mesleklerle ilişkili. code.org topluluğu programlamayı yaş sınırı olmadan, çalışan herkesin öğrenebileceğine inanıyor. Çocuklara uygun seviyede dersler mevcut. Minecraft ve flappy bird gibi popüler olan oyun

    Yeniden merhabalar.. Bu yazıda arkaplan resimlerimizi boyutlandırmayı, bir içeriğe birden fazla arkaplan dahil etme konularını ele alacağız.     CSS3 ile gelen background-size özelliği arkaplanlarımızı boyutlandırmamızı olanak sağlıyor. Background-size özelliği resim editörlerine olan bağlılığı bir nebze azalttı. Background-size değerlerini px , em veya % girerek arkaplanımızı istediğimiz boyutlara uygun hale getirebiliriz. See the Pen YrxRJo by mefistof3l3s ( @kubilay ) on CodePen .     Pixel ve yüzdeler haricinde contain , cover ve auto değerlerini kullanabiliriz. Contain, arkaplan resmimizi belirlediğimiz içerik alanına sığacak şekilde boyutlandırır. Resmimizin her bir pixeli görünür. Resmimiz en veya boy olarak bulunduğu içeriğin en veya boyundan birine bile erişirse, boyutlandırma durur. Bu değere arkaplan resmimizde bütün pixellerimizi korumamızı sağlar. See the Pen mBMaMO by mefistof3l3s ( @kubilay ) on CodePen .       Cover değeri arkaplan resmimizi içe

    Photoshop üzerinde CSS kodlarını kopyalamak kimi zaman bir işkence haline dönüşebiliyor. Hele Photoshop CSS butonunun çalışmaması başlı başına işkence türü. Bunun için internette yeteri kadar mevcut değil. Özellikle crack edilen photoshop sürümlerinin birçoğunda bulduğumuz çözümler bizi başka bir sorunun kapısına getiriyor. Birkaç gündür photoshop programının CSS özelliğini aktif etmek için uğraşıyorum. Forumlarda bunların çözüme kavuştuğunu söyleyen insanlar mevcut. Ancak benim programımda çözüme ulaşamadı. Bu yöntemleri buraya not olarak bırakıyorum. Edit > Preferences > General yolunu izleyin. Extract seçeneğini açın. Ardından photoshop programınızı kaydettiğiniz yolu izleyin. Benim bilgisayarımda, C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit) şeklinde.. Ardından Required klasörünü açın. CopyCSSToClipboard.jsx dosyasını arayın. Dosyanız mevcut değil ise editörünüzü açın. Burada bulunan kodları kopyalayarak, CopyCSSToClipboard.jsx adında kaydedin. Ardından photosh

    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 sonra çalışacağı, kaç kere döneceği gibi işlemler varsayılan değere sahiptir. Ancak  buradaki değeri belirlememiz gerekiyor. Burada vereceğimiz ismi, anahtar kelime olarak kullanacağı