SP Grid V9.1 Tema

Sitenin temasını Grid haline versiyon 9 ile geçirmiştik. Elbette iyileştirmeler hiç bitmiyor. CSS öyle bir şey. Ya yenilikler çıkıyor ya aynı şeyi daha iyi bir şekilde yapabilme örnekleri.Temasını grid yapısı yapmak isteyenlere şöyle bir tavsiye verebilirim. Gerekli yerlerde flex yapısını kullanmaya devam etmelisiniz. Tamamen grid yapısı sorun çıkarabiliyor. Sorun derken sitenizin istediğiniz gibi görünmesi veya …

Flex ile Site Yenileme

Sunipeyk Yenilendi Site görünümünü yeniledim. Yeni derken o kadar da yeni bir özellik değil elbette. Bu site için yeni diyelim.Görüldüğü üzere masaüstü ve tablet üzerinden erişildiğinde anasayfa ve arşiv sonuç sayfaları yanyana iki içerik göstermektedir. Bu arada, yazı başlığı, varsa ilgili görselin sırası da değişti.Tüm bunlar CSS3 ile gelen flex özelliği sayesinde, kolayca yapılabiliyor. Flex …

Hamburger Menü Yerine

Mobil menü için kullanılan Hamburger Menü ve ikonu aslında eğlenceliydi. Hatta bu sitede Javascript Kullanmadan Sadece CSS ile Responsive Menü ile kullanmaktaydık. Ancak artık kullanmıyoruz. Niye Hamburger Menü ikonu kullanmıyoruz artık? Görüldüğü gibi üst bölümde kullandığımız menü çok elementli değil. Daha az ve sade CSS kodlarıyla da menünün mümkün olabildiğini göstermek için. Deneysel CSS için, …

WordPress wp-caption inline style sorunu ve çözümü

Caption, Altyazı Sorunu WordPress görsellerinizde caption/altyazı kullanıyorsanız problemin farkında olabilirsiniz. WordPress wp-caption class’ına otomatik olarak inline (html içi) bir width (genişlik) stili ekliyor. Bunu eklerken mevcut görselinizin genişliğinin %10 fazlası şeklinde bir genişlik değeri oluşturuyor. İşin kötüsü CSS dosyanızda bu değeri değiştirebilmek, responsive yapabilmek için CSS kodumuzda genişlik için !important bildirimi eklemek zorunda kalıyorduk. Fakat …

cssreference: CSS için Harika Bir Rehber

Görsel Olarak Örnekler ile CSS Öğrenin cssreference.io tam bu işe yarıyor işte. Detaylı örnekler ve görsel anlatımla çok kullanılan –popüler– CSS özellikleri verilmiş.Bilmediğiniz, anlamadığınız veya hatalı kullandığınız CSS kodlarınız olabilir. Site gayet güzel, detaylı ve açıkça tüm öğeleri örneklerle anlatıyor.CSS kodlarınızı yazarken veya düzenlerken CSS Kodlarının Varsayılan Değerlerini de kontrol etmenizi öneririz.