|
Fatih Hayrioğlu'nun not defteri
|
-
CSS3 pointer-events özelliği
CSS3 ile gelen yeni özellikleri tararken ilginç ve güzel bir özellik ile karşılaştım. pointer-events özelliği. SVG ile birlikte uzun süredir kullanılan bu özellik CSS3 ile birlikte HTML elemanlarında uygulanıyor. Farenin işlevini yerine getirip getirmeyeceğini belirlemek için kullanılır. Örneğin bir menüde mevcut sayfayı gösteren menü elemanının tıklanma olayını kaldırabiliriz. pointer-event özelliği belirlenen elemanın farenin işlevine vereceği [...]
-
Saydam Kenar Çizgileri Oluşturmak
İlk olarak Facebook’un popup ve lightbox olarak uyguladığı, en azından benim orada gördüğüm bir uygulama idi. Benzer bir uygulamayı yapmak için kodları yazdım. Daha önce bahsettiğim rgba tanımı ile bu iş çok basit olacaktı. Ancak aşağıdaki gibi bir görüntü elde ettim. Çözümü biraz araştırdım ancak pek bir şey bulamadım derken css-tricks’in çözümü bana ilaç gibi [...]
-
CSS3 Esnek Kutu Yerleşimi(Flexible Box Layout)
CSS asıl çıkışını kazanmasında sayfa yerleşimini CSS ile ayarlamaya başladığımızda yaptı. CSS3 ile birlikte bize daha avantajlı sayfa yerleşimi özellikleri sunmayı gaye edinen W3C bizlere işimiz kolaylaştıracak Esnek Kutu Yerleşimi Modülünü sunmaktadır. Sayfa yerleşimini yaparken genelde float/clear veya position özelliklerini kullanarak yapıyorduz. Tabloya göre büyük avantajlar sağlayan bu yöntemlerden sonra web sayfası kodlamak daha kolay [...]
-
CSS3 Metin Özellikleri
word-wrap özelliği CSS3 word-wrap özelliği diğer CSS3 özelliklerinden farklı olarak tüm tarayıcılar(IE dahil) tarafından desteklenmektedir. Yapısı : word-wrap: <deger> Aldığı Değerler: normal | break-word Başlangıç değeri: normal Uygulanabilen elementler: Tüm Elemanlara Kalıtsallık: Var word-wrap özelliği belirtilen alandaki metnin kapsayıcı eleman sınırlarını zorlayan uzunlukta arada boşluk olmadan uzadığında kelimeyi satır başına atmak için kullanılır. Bir örnek [...]
-
CSS3 Yazı Tipi Özellikleri
Yazı tipi özellikleri her ne kadar CSS2.1 standartlarında olsada tipografik birçok ihtiyacı karşılamadığı zamanla görüldü. En büyük sorun kullanıcının bilgisayarında olmayan yazı tiplerini kullandığımızda bu yazı tiplerini resim olarak kullanmak zorunda olmamızdı veyahut sIFR veya cufon gibi çözümler üretilse dahi bunlar yan yol ile çözüm üretmektir. Bu sorunu @font-face özelliği ile büyük ölçüde halleden CSS [...]
-
ie7 Renk Geçişi Sorunu ve Çözümü
CSS3 artık bazı özellikleri ile hayatımıza giriyor, tabi kod yığını halinde girse de güzel sonuçları gördükçe kod yığını sorununu dert etmiyoruz. Tabi sorunlardan bir taneside İnternet Explorer desteklememesi. Daha önce İnternet Explorer için çözüm üretmiş olduğumuz box-shadow özelliğini anlatmıştık. Her şey buraya kadar güzel, ancak geçenlerde bir sorunla karşılaştım ve sizlerle paylaşmak istedim. Sorun şu [...]
-
CSS3 calc() değeri
Firefox’un CSS3 içine eklediği bir değer olarak eklendi. İnternet Explorer 9 desteği ile genelleşen bir değer oldu. Çok kullanışlı bir değer olacağı şimdiden belli olan bu özelliği webkit ve opera’nında desteklemesini bekliyoruz. CSS değerleri listesine yeni ve fonsiyornel bir ekleme olacaktır calc(). Hesap Makinesi(Calculator) kelimesinden türetilen bu değer sayesinde css özelliklerine atanan değerlerde hesaplama yapabileme [...]
-
CSS3 background-origin ve background-clip özellikleri
background özelliklerini anlatırken background tanımlarının içerik ve padding alanının ardalanını etkilediğini söylemiştik. CSS2.1’de tanımladığımız ardalan resimleri içeriği ve padding uygulanan alanları kapsıyor. CSS3 ile birlikte buradaki kabul değişti. Artık kenar çizgileride dahil edilebiliyor veya içerik alanı ile sınırlandırılabiliyor. Bize bu imkanı CSS3’ün background-clip ve background-origin özellikleri sağlıyor. İlk olarak background-origin özelliğini inceleyerek başlayalım. background-origin background-image [...]
-
Webkit Tabanlı Tarayıcılar(Chrome ve Safari) İçin Düzeltme(Hack) Sorunu ve Çözümü
Genelde tarayıcı düzeltmelerini ie için yaparız. Ancak bu sefer Chrome için bir düzeltme yapmam gerekti(Chrome’un line-height ile olan sorun) araştırdım ve media sorgusu ile bir düzeltme kodu buldum. Şeklinde bir kod işimi gördü, ancak projeyi yayına atarken sıkıştırıp gönderiyoruz ve sıkıştırılınca Satırındaki and ve ( arasındaki boşluğu sıkıştırma esnasında yok ediyor ve buda bu düzeltmenin [...]
-
CSS3 box-sizing Özelliği
Daha önce CSS ile Kutu modeli, sorunları ve çözümleri adlı makalede de yazdığımız gibi yeni nesil tarayıcılar ve ie’nin garip(quirk) modundaki kabul farklı idi. Bu genelde hep ie’nin bir sorunu olarak görülse de aslında bir kabul idi ve genelden ayrıldığı için ie’nin bir sorunu olarak tanımlanıyordu. İşin aslında her iki kabulde kendince mantıklı idi. “W3C’ye [...]
|