Print CSS Nedir? Nasıl Kullanılır?
CSS ile yazıcıdan çıktısı alınacak olan sayfanın istenmeyen alanlarının kaldırılmasını @media print özelliği ile yapmamız mümkün, ilgili sitil dosyasına çıktıda gözükmesini istemediğimiz alanları gizleyebilir , kullanıcılara daha yalın bir web sayfası çıktısı alma imkanı sağlayabilirsiniz. Makale türünden bir web sayası düşündüğümüzde örneğin bir haber sitesi ya da bir blog sitesini ele alacak olursak, kullanıcı deneyiminden yola çıkarak yazıcıdan ilgili makele yazısı, başlığı ve görsel alanlarının çıkması daha doğru olacaktır. Bu gibi durumda menü, yan menü, sayfa sonu (footer) gibi alanları gizlememiz gerekecektir. Okuduğunuz bu makalede çıktı almak için klavyeden Windows kullanıcılar için Ctrl+P Mac kullanıcıları için Cmd+P tuşuna basarak çıktı ön izleme ekranından print CSS’in nasıl çalıştığını görebilirsiniz.Şimdi Print CSS’in nasıl kullanılacağına bakalım.
Devamı
CSS Display Özellikleri Nelerdir? Nasıl Kullanılır?
CSS’deki Temel Özellikler
Bilhassa site kodlama ayarlarında üstün kullanım opsiyonlarına sahip olan CSS daimi internet kullanıcıları için oldukça önemlidir. Nitekim içerisinde barındırdığı çeşitli özellikler ile herhangi bir sitenin sahip olabileceği temel görünüm ve tasarımdan çok daha fazlasına erişmenize şans verir. CSS’nin temel özelliklerine bakacak olursak bunları Display uygulamasının alt kategorilerine ayırmak mümkündür. CSS’deki Display özelliği ile site tasarımı ve kodlaması rahatlıkla istediğiniz şekilde yapabilmeniz mümkündür. Böylelikle elinizdeki site üzerinde yayınlamak üzere her türden çeşitli yazıları, yazıların başlıklarını, menülerini, linklerini vs. istediğiniz yerde ve şekillerde veya görünmez bir şekilde kullanmanızı kolaylaştırır. CSS’de çok sık kullanılan display özelliği inline, block , inline-block ve none olmak üzere toplamda dört alt başlık altında incelenebilir. Bu özelliği sayesinde CSS, kullanıcılarını sadece tek bir alan ve seçeneğe yöneltmez aksine çok daha fazla seçenek sunarak yaratıcı üretimde faaliyet göstermenlerine saha açar. Devamı
Devamı
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ı
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ı
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ı
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ı
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ı