All Posts

8 veya 4 Karakterli HEX Renk Kodu

İlk karşılaştığımda şaşırmadım değil ama bi’ o kadar da sevindim. Chrome ve Firefox yeni update’leri sayesinde HEX renk formatlarında alfa kanalını da eklemeye izin veriyor. Bu ne demek oluyor peki? .color { /* Kırmızı */ background: rgb(255, 0, 0); /* Kırmızı */ background: #ff0000; /* Alfa değeri ile %75 transparan kırmızı */ background: rgba(255, 0, 0, 0.75); /* Yeni nesil alfa değerli…

Sosyal Medya Paylaşımları için Gerekli Meta Tag’ler

Facebook’un kendi Open Graph standartı, Twitter’ın kendi standartı derken meta tag kullanımlarımız giderek artıyor. Peki bu ikisini ortaklaştırabilmek mümkün mü diye araştırma yapıyorken. Aşağıdaki kod bloğunu buldum. Open Graph aslında çoğu işi çözüyor gibi… <!– Gerekli META Tagleri –> <meta property=”og:title” content=”European Travel Destinations”> <meta property=”og:description” content=”Offering tour packages for individuals or groups.”> <meta property=”og:image” content=”http://euro-travel-example.com/thumbnail.jpg”> <meta property=”og:url” content=”http://euro-travel-example.com/index.htm”> <meta name=”twitter:card” content=”summary_large_image”>…

CSS Mask ile Doku Kullanımı

İnternette dolaşırken doku kullanımına rastladım. Yeni CSS özellikleri ile önceden doku kullanılan alanları direk imaj olarak kaydedip web sitesinde gösterme tarihe karışacak. Güncel internet tarayıcılarında CSS yardımıyla bu dokuları “background-clip” ve “mask-image” yardımıyla SVG (<clippath>, <pattern> ve <mask>) ve canvas’lara uygulayabilir olduk. Tabi bunların da kendine özgü kullanım ve zorluk dereceleri de yok değil. Ben de en basit olanı konu edeyim dedim.…

Flexbox ile Footer Sabitleme

Hemen hemen tüm geliştiricilerin kariyerlerinde en az bir kere karşılaştığı sorunlardan birisi de, içeriği az olan sayfalarda footer’ın en aşağıda yer almaması olsa gerek. Aslında, footerın yüksekliği bilindiği taktirde bunun bi’ çözümü vardı. Flexbox, işte tam bu noktada yardımımıza koşuyor. Genellikle internette yatay pozisyonlamalar için kullanılsa da dikey yönlü çözümlerle de öne çıkıyor.Yapacağınız tek şey de, içeriği tek bir element içerisine aldıktan…

Eski IE Versiyonları için CSS Fixleri

Aslında farklı tarayıcılar için CSS özelleştirmesi diye bi’ şey olmaması gerekiyor diye düşünüyorum, ama gel gör ki böyle fix’ler mevcut ise bazı durumlarda gerekli olabiliyor diyebiliriz. Burada eski IE versiyonları için basit CSS fixleri mevcut, IE 6 için alttan çizgi (_) ve IE 7 için de yıldız (*) ı kullanıyoruz. Örnek kullanımları için de: color: red; /* tüm browserlar için */ *color:…

“object-fit” ile İmaj Boyutlandırma

Responsive websitesi yaparken yaşadığımız en büyük zorluklardan birisi de imaj boyutlandırmaları olsa gerek. Kolay yoldan bunu küçük bi’ CSS kodu yardımıyla çözebiliyoruz: [code lang=”css”] img { max-width: 100%; height: auto; } [/code] Ama hepimizin de bildiği gibi bu çözüm pek yeterli olmuyor. Bazen, imajın elementin hepsini kaplamasını, bazen en boy oranını korumasını veya her responsive davranışta ortalı olmasını isteyebiliriz. Hadi onu geçtim…

HTML5 ile Browserlarda Bildirim (Notification) Kullanımı

Malum, kış geldi. İş yerine gitmeyip evden çalışmaya karar verdik. İşyerinde kullandığımız Hipchat’i indirmek için web sayfasına girdiğimde online application’unun olduğunu farkedince gireyim dedim. Konuşmaların sağ taraf köşelerde bildirim olarak gelmesi beni araştırmaya iten sebep oldu. Bildirim Özelliğinin Desteklenip Desteklenmemesi CSS3, HTML5 derken kimi özellikler browser’lara hemen implemente ediliyor kimisi de gecikmeyle geliyor. Bu konuda yardımımıza da Modernizr koşuyor ki burada da bu…

“text-indent: -9999px” Alternatifi

Front-end Developer’ların hemen hemen hepsi -9999px hack’ini biliyorlardır sanırım. Uzun yıllar, hatta şu an bile kullanımı mevcut. Herhangi bi’ text elementinin içerisin imaj koymak istediğinizde bu yola başvurarak, text’in gözükmesini engelleyebiliyorsunuz. See the Pen IAaBd by Ibrahim Nergiz (@phyesix) on CodePen. Yukarıda bunun çok basit bir örneği de mevcut. Element içerisinde imaj gösterilmiş, yazı ise gözükmüyor. Basit ve etkili. Bunun yerine: [code lang=”html”]…