Browse Day

Ocak 5, 2009

CSS’de Yazı ve Fontlarla Çalışmak

Evet şimdiye kadar bir CSS dosyasının nasıl oluşturulduğu, nasıl çalıştırıldığı ve oluşturulma yollarına dair örnekler gördük. Artık konu ile ilgili temel bilgilere sahip olduğumuzu varsayıyoruz. Bundan sonra devam edeceğimiz yazılarımızın daha kolay anlaşılabilmesi için şimdi CSS kodları kullanarak yazı ve fontlara nasıl şekil ve etkiler vereceğimizi görelim.

Önce kodlarımızı ve ne işe yaradıklarını anlatalım daha sonra basit bir örnekle pekiştirelim isterseniz.

 
Kod Örnek Kullanım Şekli Etkisi
font-family Arial, Helvetica, sans-serif Kullanılan yazı tipini belirler
font-size 5pt, 12px gibi değerler ya da xx-small, large gibi terimler kullanılır. Yazı büyüklüğünü ayarlar
font-style italic, normal, oblique Yazı stilini ayarlamak için kullanılır. (eğik ya da düz)
font-weight bold, bolder, lighter, normal Yazı kalınlığını ayarlar. İnce ya da kalın
font-variant normal, small-caps Özellikle başlıklarda çok kullanışlıdır. small-caps seçildiği takdirde yazıyı büyük harflere çevirir ve her kelimenin ilk harfinin puntosunu biraz daha büyük yapar.
text-transform none, capitalize, lovercase, uppercase Yazı harflerini büyük-küçük olarak değiştirmekte kullanılır. Capitalize seçilirse her kelimenin ilk harfi büyük harfe çevirilir. Lovercase seçilirse yazının bütün harfleri küçük olur. Uppercase seçilirse yazıdaki bütün harfler büyük olacaktır.
text-decoration blink, line-through, none, overline, underline Yazının altını, üstünü veya üzerini çizmek için kullanılabilir.
text-align left, right, center, justify Yazının sağa ya da sola hizalanması, ortalanması veya her iki yana yaslanması işlevini yönetir.
text-indent pt, px, cm değerlerinden bir ölçü Paragraf başlarının sol marjinden ne kadar uzak olacağını ayarlar
letter-spacing normal ya da pt, px, cm değerlerinden bir bir birim Harfler arasında ne kadar uzaklık bulunacağını tayin eder
word-spacing normal ya da pt, px, cm değerlerinden bir birim Kelimeler arasındaki uzaklığı belirler.
vertical-align baseline, buttom, middle, sub, super, text-buttom, text-top, top Yazının dikey hizasını kontrol etmekte kullanılır.
line-height normal ya da pt, px, cm değerlerinden bir ölçü veya yüzde cinsinden bir değer Yazıda satırlar arasındaki boşluğu ayarlamak için kullanılır.

Bundan sonra yazacağınız CSS kodlarında yukarıdaki tabloda gördüğünüz değerler size yardımcı olacaktır. İsterseniz sizi meraklandırmadan tabloda da sık sık karşılaşılan pt, px ya da cm gibi değerlerin ne anlama geldiğini açıklayayım

px: Piksel demektir ve ekran çözünürlüğüne bağlıdır yani her çözünürlükte aynı sonucu alamayabilirsiniz. Piksel bilgisayarda en sık kullanılan ölçü birimlerinden biridir.

em: Kullanılmakta olan fonttaki “m” harfinin genişliğini baz alır. Harfin genişliği ekran çözünürlüğüne bağlı olduğundan dolayı bu da göreceli bir birimdir yani ortama göre değişebilir.

pt: Punto demektir ve nokta baz alınır. Göreceli değildir ve her ortamda aynı sonucu verir. 1 Punto = 1/72 inç

cm: Santimetre

mm: Milimetre

in: İnç (1 inç = 2.54 cm)

Şimdi de dilerseniz bu kodları kullanarak örnek bir uygulama yapalım

<style type="text/css">
.poz
{
font-weight: bolder;
color: #936;
font-style: oblique;
font-family: Arial, Helvetica, sans-serif;
font-variant: small-caps;
text-transform: uppercase;
text-decoration: blink;
vertical-align: baseline;
line-height: 1cm;
text-align:justify;
text-indent: inherit;
letter-spacing: 5px;
word-spacing: 15px;
vertical-align: text-bottom;
}

</style>
<p>Ben</p>

<p class="poz">Bir başka deyişle ben... Benlik duygusu Nedir? Nasıl bir duygudur? İnsanda ya eğer içgüdüsel bir davranış değilse diğer canlı türlerinden ortaya çıkması nasıl açıklanabilir. Freud bu temel soru benden yüz yıl önce sormuştu ancak manzaraya şöyle bir göz attığımızda bir arpa boyu yol alamadığımızı esefle görüyoruz.
.</p>

Yukarıdaki örnek kodda önce tablodaki kodlardan bazılarını kullanarak bir stil kodu oluşturduk ve ardındani oluşturduğumuz bu stili bir paragrafa atadık. Eğer bu kodu alır birebir kopyalayarak çalıştırırsanız kodların etkisini görebilirsiniz ve hatta yukarıdaki tablodan da yararlanarak belli parametreleri değiştirerek farkları görebilirsiniz. Hepinize kolay gelsin

PNG ve icon Dosyalarını Birbirine Dönüştürmek

WEB 2.0 teknolojisiyle beraber her gün yeni teknolojiler ve yeni fikirlerle inşa edilmiş web sayfalarıyla karşılaşıyoruz. Bu yazıda da size yine böyle bir sayfayı tanıtmak istiyorun.

Bildiğiniz gibi artık, eskiden bir takım programlar kullanarak yaptığımız işlemleri şimdi sadece web sayfaları üzerinden yapabiliyoruz. Hatta ofis veya grafik işleme gibi komplike uygulamalar da bunlara dahil…

www.convertico.com sayfası da işte bizi böyle program kurmaktan kurtaran sitelerden birisi. Söz konusu sayfa sayesinde başka hiçbir yazılıma ihtiyaç kalmadan PNG ve ICO uzantılı dosyaları birbirlerine dönüştürebiliyoruz. Üstelik bu işlemi yaparkan üye olmamız da gerekmiyor.

Sade ve şık tasarımıyla karşımıza çıkan www.convertico.com sayfası ile Windows Vista uyumlu ikon dosyaları yaratabilirsiniz. Burada unutulmaması gereken bir nokta var. Site her grafik formatından ikon yapmıyor. PNG dosyalarını ikona, ICO dosyalarını da PNG ye çeviriyor. Şunu da belirtmek isterim ki bir dosyayı ikon yapabilmek için onun belirli bir yükseklik ve genişlik oranına sahip olması gerekir. (16×16 32×32 128×128… gibi) Internet üzerinde pek çok PNG dosyası var ve bu tür dosyalar gerçekten de ikon yapmak için oldukça güzel ve elverişli örneklerle dolu. Sayfada ayrıca yakın zamanda dönüştürülmüş dosyalar da gösteriliyor. Böylece arama yapmdan da belki işinize çok yarayacak bir ikon bulabilirsiniz.