Author page: ibrahimnergiz

Yatay Şekilde Element Ortalamak: inline-block vs table

Daha çok menü içerisindeki elementleri ortalamak için kullandığım “inline-block” kullanımının bugün yeni bir versiyonunu öğrendim. Bu versiyonu ilk defa görüyorum fakat siz daha önce karşılaştınız mı bilmiyorum: “display:table” Yatay olarak bir elementi ortalamak için “margin:auto” ve genişlik değerini belirtmek bilinen bir teknik. Dinamik elementlerde ise sabit bir genişlik olmadığından bu hipotezimiz geçersiz oluyor. Geleneksel yöntemden bahsetmek gerekirse: [code lang=”html”] body { text-align:…

Sar Kebap’a Teşekkürler

Aslında bu blog yazımı iş yerinde karşılaştığım sorunlara değil de, hayata dair bi’ yazı olarak yazmak istedim. Kişisel bloguma yazıp yazmama konusunda ikileme düşsem de yazının yeri burası diye düşünüyorum. İş çıkışı deli gibi acıkmış olan ben, ne yesem diye Yemek Sepeti restoranlarına bakmaya başladım. Hem uygun fiyatlı hem lezzetli olmalı diye daha yerel / adı sanı duyulmamış restoranları seçiyorum. Bunun hikayesi…

HTML5 “track” Elementine Toplu Bir Bakış

Günümüzde, HTML5 ile birlikte gelen video ve ses dosyalarında önemli bir sayıda artış mevcut. Google’a baktığımızda internet aramalarının yaklaşık %40‘ı gibi bir değere ulaşması da bunun bi’ göstergesi. Bu yazımda HTML5 ile birlikte gelen <track> elementi ile birlikte gelen, video dosyalarınıza altyazı ekleme gibi önemli bir işlevden bahsedeceğim. Önemli diyorum çünkü, video ile SEO konusunun yıldızları bu noktada barışıyor. “<track>” Elementine Genel…

CSS ile Dikey Ortalama

3 satır CSS kodu ile herhangi bir elementi dikey alan içerisinde ortalamak kim istemez ki ? Yüksekliği belirlenmemiş herhagi bir alan içerisine, herhangi bir nesneyi “transform: translateY” yardımıyla ortalayabiliyoruz. “Transform” CSS değeri her ne kadar bir elementin rotasyonunu değiştirmek veya scale etmek için kullanılsa da “translateY” ile elementlerin dikey değerini düzenleyebiliyoruz. Aşağıdaki kod bloğu yardımıyla dikey ortalamayı yapabilir, hatta IE9’da bile çalıştırabilirsiniz: [code lang=”css”]…

HTML5 ile FileReader ( File API )

HTML5 ile yeni gelen özelliklerden birisi de lokaldeki dosyalarla etkileşim içerisine girebilmemiz ve bunu da File API ile yapabilmemiz olsa gerek. File API ile gelen özelliklerden birkaçından bahsetmek istersem; herhangi bir imajın önizlemesini sunucuya göndermeden anında görebilmek, dosya içeriğini ( düzenlenme tarihi, ismi, boyutu … vs ) görebilmek gibi bir çok şeye izin veriyor. Güncel browserın desteği bulunmakla birlikte bu özelliği: [code…

Font-face Kullanımında Türkçe Karakter Sorunu

Front-end Developer’lar arasında @font-face kullanımını bilmeyen yoktur sanırım. Önceleri sistem fontlarına bağlı olarak çıkan tasarımlar ve front-end development süreçleri, günümüzde yerine hayalimizdeki hemen hemen her şeyi tasarlayacak ve kodlayacak haline geldi. İşin kötü yanı da biz Türk tasarım ve yazılım geliştiricilerinin font seçeneğinin pek bulunmaması. Dünya çapında popüler olan çoğu fontun Türkçe’si bulunabilir düzeydeyken kimilerini bulmaksa işkence haline dönüşüyor. Hadi bulduk diyelim,…

CSS Loading Spinner

Bir zamanlar, “yükleniyor” adı altında öyle çok gif yapıldı ki. Gerçi baktığımızda hala bu imajları kullanıyoruz. Geçenlerde yaptığım sayfa için bu imajlardan kullanaktım. Proje içerisine baktığımda bir çok imajın olduğunu, bunlardan kurtulmak gerektiğini farkettim. Günümüz CSS teknolojisi, :before ve :after elementleri yardımıyla öyle güzel şeyler yapılabiliyor ki. İşte sadece CSS’den oluşan “yükleniyor” animasyonumuz: See the Pen aqcip by Ibrahim Nergiz (@PhyesiX) on…

Background İmajın Üzerine Gradient Overlay

CSS3 ve pseudo özelliklerin hayatımıza girmesi ile daha kolay kod yazmaya başladık. Bu yazıyı yazmadan önce herhangi bir imaja ekstradan div ekleyerek bunu çözüyordum. Örnek verecek olursam: [code lang=”css”] <div class="imaj"> <div class="overlay"></div> </div> [/code] [code lang=”css”] .imaj { width: 100%; height: 100%; background: url(‘/img/imaj.jpg’) center center no-repeat; background-size: cover; position: relative; } .overlay { width: 100%; height: 100%; position: absolute; top:…