6 Temmuz 2015
minimalcoding
3831 0

CSS Konumlandırma (Position) Özellikleri Nelerdir? Nasıl Kullanılır?

Tüm Html elementlere uygulaya bileceğiniz CSS 2.0 ile gelen  bu özellik sayesinde istediğiniz objenin konumlandırma özelliklerini değiştire bilirsiniz. İster block bir element olan div,form,p ve h1 vb isterseniz de inline element olan a,img,span vb objelere konumlandırma özelliklerini uygulaya bilirsiniz. Konumlandırma (position) yapısının aldığı değerlere bakacak olursak bunlar “static“,”relative“,”absolute”  ve “fixed” olarak tanımlayabiliriz. Div (kutu) modelleme yapsını ele alarak position kullanım yapısını örneklerle inceleyelim.

Devamı

Devamı
5 Temmuz 2015
minimalcoding
14780 0

CSS Responsive Media Query Nedir? Nasıl Kullanılır?

Artık günümüz teknolojisinde yaygın olarak kullanılan mobil cihazlar (Akıllı telefonlar, Tabletler vb.) internet erişimi sağlamsıyla birlikte kullanıcıların siteyi daha rahat dolaşabilmeleri için farklı ekran çözünürlüklerinde web sayfalarının, farklı görüntüleme modellerinin oluşması ihtiyacını doğurdu. Ülkemizde ve Dünyada en çok kullanılan arama motoru olan Google geçtiğimiz ay tüm iltişim kanallarından  responsive (mobil duyarlılık ) özelliğini üst sıralara çıkma kriteri olarak baz alacağını duyurdu. Yani responsive design artık olmazsa olmazlar arasında yer aldı. Peki oluşturulan web sitelerini mobil duyarlı hale nasıl getireceğiz? Html yapımızda oluşturmuş olduğumuz iskeleti farklı erkan modlarında CSS Media Query özelliği ile istediğimiz şekle ve formata sokma imkanımız mevcut. CSS sitil dosyasına ekleyeceğimiz @media yapısı ile belirtmiş olduğumuz genişlik aralıklarında Html yapımızda oluşturmuş olduğumuz taglere farklı davranış biçimleri atayabilir ve istemiş olduğumuz responsive görünümü elde edebiliriz. İşinizi dahada kolaylaştırmak adına oluşturulmuş bir çok front-end frameowrkü mevcut (Foundation,Bootstrap vb) bizim tavsiyemiz en yaygın olarak kullanılan Twitter Bootstrap’tır. İçerisinde hazır olarak gelen responsive grid yapısıyla daha hızlı mobil uyumlu websiteleri oluşturabilirsiniz. Şimdi resposnive yapı için @media özelliğinin nasıl kullanıldığını örneklerle inceleyelim.  Devamı

Devamı
3 Temmuz 2015
minimalcoding
5108 0

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ı

Devamı
3 Temmuz 2015
minimalcoding
8490 0

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ı
27 Haziran 2015
minimalcoding
4707 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ı
26 Haziran 2015
minimalcoding
7515 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
2283 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ı