box-sizing

CSS3 box-sizing özelliği

Box-sizing özelliği esnek siteler geliştirirken işimize çok yarayan bir özelliktir, responsive tasarımın olmazsa olmazıdır diyebiliriz Peki nasıl çalışıyor box-sizing özelliği. 2 farklı değer alır: • border-box: Genişlik değeri padding + border + genişlik değerlerinin toplamıyla belirlenir. Yükseklik için de aynı şeyler geçerlidir. ie7 ve altında çalışmaz. Tarayıcı destekleri için buraya bakınız. Firefox 28 ve öncesinde…

fontface-stil-kullanimi

@font-face ile bir fontun diğer stillerini kullanma

@font-face ile webde kullandığınız özel fontların bold, italik, normal veya bold italic versiyonlarını kullanmak isteyebilirsiniz. Ancak <b>, <strong> ile kalın, <i> ile italik yapmak istediğinizde fontu zorlayarak kalınlaşmış veya italik fontlar elde etmeye çalıştığınızda kırık, pikselize bir görüntü ortaya çıkar. Yani olması gerektiği gibi göremezsiniz karakterleri. Çünkü tarayıcılar fontu zorlayarak kalın veya italik olarak göstermeye çalışırlar.…

collapse

Tablolarla çok uğraşanlar için çok güzel bir CSS özelliği: border-collapse

border-collapse özelliği çok güzel bir özellik. Özellikle tablolarla çizgi vererek sık sık çalışanlar bu özellik ile işlerini çok daha kolaylaştıracaklar. Peki nedir, ne işe yarar bu border-collapse özelliği? border-collapse özelliği, table elementinde satır (tr) ve hücre (td–th) kenarlıklarının bitişik veya ayrı ayrı olmasını ayarlar. Diğer bir deyişle tablo hücre çizgilerini ve kenarlıklarını üst üste bindirip bindirmemeyi ayarlar. border-collapse aşağıdaki…

TEXTAREA

Metin alanı içerisindeki yazıyı otomatik seçme

Metin alanları içindeki yazıları aşağıdaki kod ile otomatik olarak seçtirebilirsiniz:

  Örneği incelemek için buraya tıklayın.        

zebra-table

Zebra çizgili tablo oluşturmanın css ile kolay yolu

CSS ile zebra çizgili tablo oluşturmak çok kolay. bir sürü css yazmak, class tanımlamakla uğraşmak yerine aşağıdaki şekilde tablolarınızı kolaylıkla zebra çizgili hale dönüştürebilirsiniz, hem de tek satır bi kodla:

  Örneği görmek için tıklayınız.              

acronym

Kısaltmalar için ipucu > acronym veya abbr

Kısaltmalar için açıklayıcı bir etiket oluşturur. Ayrıca arama motorları için de güzel bir indexleme özelliği diyebiliriz. Kısaltmalarınızı aynı zamanda açık hali ile de indexlemiş olur arama motorları. Kullanıcı sadece kısaltmaları görür. Ancak bu fonksiyon sayesinde kısaltmanın açık hali ile de arama yapanlar sizin sitenizi bulabilirler. Kullanımı aşağıdaki gibidir. Benim için <acronym title=”Cascading Style Sheets”>CSS</acronym> candır…

iphonePHONES

iPhone telefonlar için arama ve mesaj linkleri oluşturma

iPhone telefonlar için telefon numaralarını tıklanınca aranacak veya mesaj yazabilecek ekranı açacak şekilde ayarlayabilirsiniz. Özellikle iletişim sayfalarında mobil kullanıcıların size ulaşmaları konusunda işlerini kolaylaştırabilirsiniz.   Telefon numaralarını aşağıdaki şekilde yazarsanız bir çağrı numarası olduğunu anlayacaktır:

SMS mesajını tek tıklamayla ekrana getirecek kod da şu şekildedir:

Bu tip düzenlemeleri mobil sitelerde yapmanız tavsiye edilir.