27 Haziran 2015
minimalcoding
3686 0

Css ile Content Kullanımı :before ve :after sözde elemanlar.

CSS2 ile gelen sözde elemanlar (pseudo-elements)  sayesinde bir çok html elementinin ( :before and :after ) öncesine ve sonrasına özel karakterler yada imaj gibi yapıları ekleyebilirsiniz. Yaygın kullanım şekillerinden bahsedecek olursak , icon fontlarda , açıp kapanan ” ” tırnak işaretinde, ASCII karekter kodlarında vb yapılarda kullanımı karşımıza çıkmaktadır, aldığı değerler arasında noktalama işaretilerinden tırnak işareti kullanımıda mevcuttur.  İlgili örnekler ile kulanım yapısını inceleyerek olayı net bir şekilde kavrayalım.  Devamı

Devamı
27 Haziran 2015
minimalcoding
2839 1

Javascript Tuş Kodları Tablosu (Key Codes Table)

Bir önceki konumuzda input alanlarına sadece sayı girilmesini paylaşmıştık bu işlemi yaparken “Key Code” yapsını kullanmıştık. İşinize yaracağını düşündüğümüz tuş kodları tablosuna bu yazımızdan ulaşabilirsiniz.  Devamı

Devamı
26 Haziran 2015
minimalcoding
4816 0

Javascript ile input alanlarına sadece rakam girebilmek

Html form elemanlarından, içerisine bilgi girişi yapılacak olan alanların integer veri tipi (sadece sayısal değer) taşımasını talep edebiliriz. örneğin T.C kimlik no ,kredi kartı kart numarası, telefon numarası , posta kodu vb alanlar sadece sayı girişi yapıla bilecek alanlardan bazılarıdır. Bu gibi durumlarda kullanıcıların bu alanlara string veri tipi (metinsel)  girişini engellemek kullanıcı deneyemi açısından da olumlu olacaktır. Bu işlemi yapabilmek için klavyenin ilgilisiz tuş yapılarını kilitlemek gerekecektir. Bunun için Javascript’in .keyCode (tuş kodları) yapısını kullanmamız yeterli olacaktır. (Javascript Key Code tablosuna buradan ulaşabilirsiniz.) şimdi bu yapının nasıl oluşturulduğuna ve kullanım yapısını inceleyelim..

Devamı

Devamı
25 Haziran 2015
minimalcoding
1680 1

Css ile IE10’da input elemanlarından temizleme butonunu kaldırmak.

Internet explorer (ie) de input alanlarının  içine bilgi girişi yapıldığında yanında temizleme butonu (clear field Button,X button) çıkmaktadır, bu özellik kullanıcılara kolaylık sağlasada istenmeyen durumlarda bu butonu gizlemek isteyebilirsiniz. CSS stil dosyanıza ekleyeceğiniz tek satırlık bir kod ile bu yapıyı görünmez kılabilirsiniz.

Devamı

Devamı
24 Haziran 2015
minimalcoding
2061 1

CSS ile “Input type number” elementinin “spinner” özelliğini gizlemek

Html ile oluşturulmuş input elemanına number özelliğini atadığımızda Safari,Firefox ve Chrome gibi tarayıcılarda değer girişi yapılacak olan alının sağ tarafında  arttırma ve eksiltme buton yapısı (Spinner) oluşmaktadır. Bu butonu gizlemek için CSS dosyamıza ekleyeceğimiz bir kaç satır kod ile gizlememiz mümkün.

Devamı

Devamı
22 Haziran 2015
minimalcoding
2599 0

Google Web Fonts Kullanımı

Bir önceki konumuzda @font-face Css ile Özel Font Kullanımından bahsetmiştik, buna ek olarak Google’ın tamamen ücretsiz olarak sunduğu Google Web Fonts  servisinden de bahsedelim istedik. İçerisinde 698 tane font ailesini barından bu servis ile sitelerinizde özgürce (lisans derdi olmadan) kullanabilirsiniz. Bu siteye https://www.google.com/fonts adresinden ulaşabilirsiniz. Kullanımı son derece basit olan Google Fonts yapısına daha yakından bakalım. Devamı

Devamı
21 Haziran 2015
minimalcoding
3183 0

Css ile Özel Font Kullanımı @font-face

Tasarlanan web sitelerinde kullanılan özel fontlar (yazı tipi) tasarım bütünlüğü oluşturmaktır.Tasarımda kullanılan  özel font yapısı kulanıcıların bilgisayarlarında yüklü olmayabilir ve site kullanıcılarının siteyi sistem fontlarıyla görüntülemesine neden olur. Bu da tasarım bütünlüğünü ortadan kaldırır. Hiçbir site sahibi ve tasarımcı bunun böyle olmasını istemez. Artık bir çok firmada kendi markasıyla bütünleşmiş fontların web sitelerinde kullanılmasını talep etmektedir. Peki kullanıcıların bilgisayarlarında olmayan bu özel font yapısını nasıl göstereceğiz? İşte tam bu noktada CSS @font-face yapısı sorunumuza çözüm olmaktadır (kullanımı için yazının devamına bkz). CSS2 ile gelen bu özellik yazı tiplerinde yaşanan telif hakları sıkıntısından dolayı CSS 2.1 de kaldırılsada CSS3 ile bu sorun çözülmüştür. Tam her şeyi çözdük derken karşımıza farklı tarayıcıların desteklediği farklı font dosyası uzantıları çıkmaktadır. Peki bu font dosya uzantıları ve bu uzantılara bağlı masaüstü ve mobil tarayıcı destekleri nelerdir? Devamı

Devamı