CSS’de text özellikleri için değineceğimiz tam 9 öznitelik var. Kodlarken en çok kullandığım özniteliklere göre anlatım yapacağım. Bu yüzden text-align ile başlamak istiyorum.

1-) CSS text-align

Metinlerin diğer elementlere göre hizalanması için kullanılır. Etki alanları daha çok yazıyı sola hizalama, ortalama, sağa hizalama ve satıra hizalamadır. Hemen alabileceği değerleri yazalım.

text-align: left;
text-align: right;
text-align: center;
text-align: justify;

2-) CSS text-decoration

Başlığından da anlaşılacağı üzere metnin dekorasyonunu ya da biçimini özelleştirmemizi sağlar. Daha da açıklamak gerekirse metnin altıçizili, üstü çizili, yanıp sönmesi gibi özel kullanımları sunar. Alabileceği değerler;

text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: blink;
text-decoration: line-through;

3-) CSS text-transform

Metnin küçük-büyük harf düzenini sağlamak amacıyla kullanılır. Alabileceği değeler;

text-transform: none;
text-transform: lowercase;
text-transform: uppercase;
text-transform: capitalize;

4-) CSS text-shadow

CSS 2.1 zamanında hiçbir tarayıcı tarafından desteklenmeyen text-shadow özelliği, yeni nesil tarayıcıların CSS3.0 desteği ile birlikte son günlerde oldukça popüler hale geldi. Daha önceden anlatımını şurada yaptığım için tekrar anlatmaya gerek olduğunu düşünmüyorum.

5-) CSS letter-spacing

Harfler arasında istediğimiz miktarda boşluk bırakabilmek için kullanıyoruz. Eksi değer alabiliyor ve birim olarak tüm uzunluk birimlerini destekliyor. (px, pt, cm, em, % vs.) Kullanımı;

p {
letter-spacing: 1px;
}

6-) CSS word-spacing

letter-spacing özelliği ile aynı mantıkta çalışıp, kelimeler arasında istediğimiz miktarda boşluk bırakabilmek için kullanabiliyoruz. Kullanımı;

p {
word-spacing: 2px;
}

7-) CSS line-height

Satır arası boşluk miktarını belirlemek için kullanabileceğimiz önemli özelliklerden bir tanesi. Yine px, % ve normal değerlerde kullanabiliyoruz. Kullanımı;

body {
line-height: 1.6em;
}

8 -) CSS vertical-align

8. maddeye geldik. vertical-align özelliği bize tam 8 değer sunuyor ve elementin dikey konumda hizalanması için kullanılıyor. (Ben daha çok img etiketi için kullanıyorum) Aldığı değerler;

vertical-align: sub;
vertical-align: super;
vertical-align: top;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: baseline;
vertical-align: bottom;

9-) CSS text-indent

Nihayet son maddemize yani text-indent’e geldik. Bu maddeyi özellikle sona sakladım çünkü bunun için eklemek istediğim şahsi notlarım var.

Paragraflarda ilk cümlelerin soldan içeriye doğru kaydırılması için kullanılmaktadır. Eksi ve artı değer alabiliyor.

p {
text-indent: -50cm;
}

Kendi kullanım amacımdan bahsetmek istiyorum. Ben çoğunlukla bu özelliği CSS’de logoya link verirken kullanıyorum. Şu anki temada gördüğünüz gibi aynı mantıkta yapılmıştır.

CSS’de temel kısaltmalar yazımda bahsetmediğim birkaç madde daha kalmıştı. Şimdi son maddeleri de yazarak konuyu kapatalım.

1-) CSS Border Kısaltması (Kenarlık)

Bir element için kenarlık (border) uygulamak istediğimiz zaman yalnızca bir köşe için 3 adet veri girmemiz gerekmektedir. Örnek olarak bir kutunun sağ tarafına kenarlık uygulayalım;

border-right-width: 1px;
border-right-style: solid;
border-right-color: #000;

Şimdi bu uzun haldeki kodun açıklaması yapalım; İlk satırda kenarlığın kalınlığını, ikinci satırda kenarlığın stilini, üçüncü satırda ise kenarlığın rengini belirttik. Şimdi bu uzun kodlardan kurtularak kısaltma işlemine geçelim:

border-right: 1px solid #000;

Diyelim ki sadece sağ kenara değil, kutunun her yerine bu kenarlığı uygulamak istiyoruz. Bunun için yapmamız gereken şey basit;

border: 1px solid #000;

Böylece kenarlığı, kutunun her tarafına uygulamış olduk.

2-) CSS Liste Öğeleri Kısaltması (list)

ul {
list-style-image: url(resim.gif);
list-style-position: outside;
list-style-type: square;
}


Kısaltmaya geçtiğimizde kod şu halde olmalıdır.

ul li {
list-style:square outside url(resim.gif);
}


3-) “0″ Kullanımı

Son olarak CSS’de bazı özniteliklere değer verirken kullandığımız 0 rakamından bahsedelim. 0 rakamı için özel bir durumumuz var. Standart kodlamada bir element için değer vereceğimiz zaman değerini ve birimini yazarız. (Örn: padding: 5px;) Ancak bu durum 0 kullanmak istediğimizde geçerli değildir. Daha doğrusu zorunlu değildir. 0 kullanacağımız yerde sadece 0 yazıp da bırakabiliriz.

Örnek:

margin: 0;
padding: 0;

Dipnot: Bu işlem yüzdelik değer vereceğimiz durumlar dışındadır.

CSS yazarken bazı başlangıç seviyesindeki arkadaşlarımız her öznitelik için ayrı ayrı değerler veriyor olabilir. (Çok normal!). Bu işe başlangıçtayken ben de aynı şeyleri yapıyordum haliyle. Amacımız CSS’te kodları minimum değerde ve satırda yazarak CSS optimizasyonu yapmak ve gereksiz kod yığınlarından kaçınmak. Bugün elimden geldiği kadarıyla sizlere bunu anlatmaya çalışacağım.

1-) CSS Background

Başlangıç olarak arkaplan değerleri ile başlayalım. CSS’de arkaplan tanımlarken kullanabileceğimiz standart kodlar şunlardır:

background-color: #ccc;
background-image: url(arkaplan.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 50px;


Gördüğünüz üzere sadece bir arkaplan tanımlamak için ne kadar çok kod yazdık. Ama bunu tek satırda en kısa haliyle yazmamız daha mantıklıyken, böyle uzun uzun kodlar yazmamıza gerek yok. Aşağıda bu kodları nasıl kısaltacağımızı göreceğiz:

background: { #ccc url(arkaplan.gif) no-repeat fixed 50px 50px; }

Şimdi bu kodları açıklamak gerekirse ilk kısımda arkaplan rengini, ikinci kısımda arkaplan resminin konumunu, 3. kısımda resmin tekrarlayıp tekrarlamayacığını, 4. kısımda sayfadaki duruşunu ve son kısımda arkaplanın konumunu belirtiyoruz.

2-) CSS’de Renkler

CSS’de renk kodlarını yazarken çoğunlukla hex-decimal türünde yazarız. Photoshop ve bu tür programlarda renk kodlarını görmemizi sağlayan renk paletlerinde bizlere sunulan renkler genellikle 6 karakterden oluşmaktadır. Ama güncel web tarayıcılarımız bu kodların sadece 3 karakterde kullanılabilmesini bizlere sağlıyorlar. Kısacası örneğe geçecek olursak;

color: black; ya da color: #000000;

yerine

color: #000;

Biçimini kullanmanızı öneriyorum.

3-) CSS’de Font Kullanımı

Bir yazı tipi için sınıflandırma yaptığımızda 4 öznitelik içerdiğini biliyorsunuzdur. Bunlar:

font-family: verdana, arial, sans-serif;
font-size: 13px;
font-weight: bold;
line-height: 16px;


Hemen kısaltacak olursak;

font: bold 13px/16px verdana, arial, sans-serif;

4-) Padding ve Margin Kullanımı

Aslında şu ana kadar yazdığım CSS makalelerinde bu kullanımlara değinmedim. Ama bana bu konuda gelen sorular sebebiyle yazılarımın artık CSS ve xHTML üzerine olacağını söylemek istiyorum. Padding ve Margin kodlarımızdan bahsetmek gerekirse, bu kodlarımız ittirme kodlarıdır. Yani üstten, sağdan, alttan ve soldan bir elementi ittirmek için kullanabiliriz. Daha ayrıntılı bilgiyi diğer yazılarımda bulabileceksiniz zamanla. Her ikisinin de kısaltma mantığı aynıdır. Öncelikle padding özniteliğimiz için uzun kodları yazalım (Margin için de aynı şeyler geçerlidir!), ardından da bu kodları kısaltalım:

padding-top: 1px;
padding-right: 8px;
padding-bottom: 10px;
padding-left: 5px;

olsun. Ardından hemen bu kodların kısaltılmış şeklini gösterip, açıklamamızı yapalım.

padding: 1px 8px 10px 5px;

ile kısalttık. Peki bunların sıralanışı nasıldır? Ya da neye göre sıralanırlar?:

Hemen klasik örneği anlattığımda kavrayacağınıza eminim. Saat. Bütün mantık bunda saklı. Hani günlük hayatımızda bir şeyi çevirirken vb. hareketlerde “Saat yönüne doğru” tabirini kullanırız ya da kullanmışızdır. Aynı şey bu kod için de geçerli. Saatin başlangıcını 12 olarak varsayarsak sıralamamız da bu şekilde olacaktır. Yani; 1px tepeden, 8px sağdan, 10px alttan ve 5px soldan ittirmiş olduk elementimizi.

İlerleyen günlerde border ve liste öznitelikleri için de makaleye kaldığım yerden devam edeceğim. Konu hakkında takıldığınız ya da anlamadığınız yerler olabilir. Lütfen çekinmeden sorun. En kısa zamanda yardımcı olmaya çalışacağım.

Kolay gelsin.

Haberim bile yok. Bundan 373 gün evvel açmışım günlüğü. O günden bu güne kadar yazılar yazmışım takipçilerime. Bu sabah günlüğe girdiğimde aklıma geldi. Doğum gününü kaçırmışım ama olsun. Şöyle 1 yıl geriye baktığımızda nereden nereye gelmişim diye soruyorum kendime.

Bakalım 1 yılı günlük açısından nasıl geride bırakmışım?

• Yazmış olduğum yazı sayısı: 72
• Yapılan yorum sayısı: 232
• Sayfa Sayısı: 4
• Yorumlarda kullanılan rumuz: 94
• En Çok Yorumlanan Yazı: WordPress Seri 2: Outline – 30 yorum
• Google PageRank: 2
• Alexa Sıralamam: 496.000
• DMOZ: Henüz yok

Bu süreç içerisinde yazılarımı takip eden ve okuyan, yapılan yorumlarla günlüğü süsleyen tüm ziyaretçilerime teşekkürü bir borç biliyorum. Daha iyi ve kaliteli yazılarda görüşmek dileğiyle…!

“18 Aralık’ta vizyona giren Avatar filmini gösterimden kalkmasına sayılı günler kala izleme fırsatı bulabildim. Filmi 3D kalitesinde izlemek ise gerçekten ayrıcalık meselesi. Daha salona girişte sizlere dağıtılan 3D gözlükler sayesinde filmdeki detayları çok daha iyi bir şekilde yakalayabiliyor, kendinizi sanki filmden bir karaktermiş gibi zannedebiliyor ve üçüncü şahıs gözüyle olaylara tanıklık edebiliyorsunuz.

FİLMİN KONUSU

Bizleri hayal gücümüzün ötesinde muhteşem bir dünyaya taşıyacak olan film Na’vi adlı yok olmak üzere olan bir halkın yaşadığı Pandora adlı gezegende geçiyor.

Yarı-felçli bir savaş gazisi olan Jake Sully, kendilerine özgü dilleri ve kültürü olan, barış ve doğa ile örtülü bir çevrede yaşayan Na’vi halkının arasına gönderilir.

Askeri bir şirket uzaktaki bu gezegeni ve barındırdığı kaynakları incelemek üzere AVATAR adlı bir program oluşturmuştur. Bu program ile insanlar genetik mühendislik sonucu yarı insan yarı Na’vi haline getirilir ve misyoner olarak Pandora’ya gönderilirler.

Botanist Dr.Grace Augustine (Sigourney Weaver) ile programa gönüllü olarak katılmış Jake’in bedenlerinin Avatar’ı yaratılacak ve böylece Jake’e de felç olmuş bedenini başka bir formda kullanma şansı verilmiş olacaktır. Na’vi halkından Prenses Neytiri ile tanışan Jake, kendisini Pandora’ya gönderen tehlikeden bu halkı savunurken bulur.

Yabancısı olduğumuz bu yeni dünyaya Jake Sully isimli, tekerlekli sandalye mahkum kalmış bir gazinin gözünden bakıyoruz. Fonksiyonlarını kaybeden bedenine rağmen içinde halen savaşçı bir ruh barındıran Jake, dünyanın enerji krizini çözmeye yetecek kaynaklara sahip olan ve bu kaynakları araştırmak üzere bir birliğin çalıştığı Pandora isimli gezegene ışık yılı yolculuğu yaparak asker olarak gönderilir. Pandora’daki atmosfer toksik olduğu için Avatar isimli program oluşturulur; bu programa göre insan “operatörleri”nin bilinçleri avatar isimli uzaktan kontrol edilebilen ve öldürücü etkisi olan hava koşullarında yaşam sürdürebilmeyi sağlayan biyolojik bedene bağlanır. Bu avatarlar insan DNA’sı ile Pandora’nın yerel halkı Na’vilerin genlerinin birleştirilmesiyle oluşur.

Jake kendi avatarında yeniden doğduğu halde yürüme yetisini de geri kazanır. Gezegendeki değerli enerji kaynaklarını elde etmelerine mani olarak görülen Na’vi halkının arasına sızmakla görevlendirilir. Fakat güzel bir dişi Na’vi olan Neytiri, Jake’in hayatını kurtarır ve bu her şeyi değiştirir. Neytiri’nin kabilesi tarafından kabul edilen Jake, onlardan biri olmayı tabii kaldığı bir çok test ve macera sonrasında öğrenir.

Jake ve gönülsüz eğitmeni Neytiri arasındaki ilişki zamanla derinleşir ve böylece Na’vi halkna sayı duymayı, sonunda da onların safhında yer almayı tercih eder. Yerli Na’vi halkına destansı ve evrenin kaderini belirleyecek bir savaşta liderlik edecek ve böylece kabul görmesini sağlayacak son sınavı da verip veremeyeceği belirlenecektir.

FRAGMAN

Merhabalar!

Yaklaşık 12 yıllık bir bilgisayar ve internet dergisi olan ve ayda onbinlerce satan PCNet dergisi editörlerince hazırlanan “Piri Reis” website tanıtım köşesinde bu ay da MyBB Mod’a yer verildi. Dergide bizim için şöyle bir açıklama yapılıyor.

"Açık kaynak kodlu bir forum sistemi olan MyBB hakkında ayrıntılı bilgiler içeren MyBBmod.com, webmaster'ların ilgisini çekebilecek bir adres. Sitede MyBB üzerinde yapabileceğiniz geliştirmeleri görebilirsiniz."

Bu gelişme için başta Piri Reis bölümü editörü Kıvanç Tanrıkulu olmak üzere tüm PCNet çalışanlarına teşekkür eder, başarılarının devamını dileriz…

Merhaba arkadaşlar. JavaScript ve jQuery ile resimlere verilen efekteri sevmem nedeniyle böyle bir yazı hazırlamaya karar verdim. Daha önceden pek çok farklı sistemde rastladığım bu özelliğe, WordPress için çok fazla araştırmama yapmama gerek kalmadan ulaştım. Bu sebeple kullanımını sizlerle paylaşmak istedim. Anlatımına geçelim »

Öncelikle eklentimizi kaynağından yani WordPress Extend sayfasından indirelim. Ardından WordPress Yönetim Paneli üzerinden Eklentiler » Yeni Ekle » Yükle kısmından indirdiğimiz highslide-integration.zip dosyasını yükleyelim ve aktifleştirelim. Eklentimiz yüklendi. Daha sonra Ayarlar menüsünde Highslide adı altında ek bir sekme göreceksiniz. Buraya girip hiçbir değişiklik yapmadan Update Options düğmesine tıklayalım. Eklentimiz kullanıma hazır hale gelmiştir.

Yazı eklerken nasıl kullanacağız?

HTML tabanlı yazı editörüne dahil olmadığını farkettim. Bu yüzden kendi kullandığım yöntemi anlatacağım. Aşağıdaki kodda sanıyorum oldukça yeterli bir şekilde anlattım.

<a href="TIKLADIĞINIZ ZAMAN GÖRÜNECEK RESİM" onclick="return hs.expand(this)"><img class="size-full wp-image-2245 aligncenter" title="" src="RESMİN TIKLAMADAN ÖNCEKİ HALİ" alt="" width="440" height="75" onclick="return hs.expand(this)"/></a>

Güle güle kullanın. Anlayamadığınız ya da sormak istediğiniz kısımları çekinmeden sorabilirsiniz. Elimden geldiğince ve dilimin döndüğünce yardımcı olmaya çalışacağım…

Merhaba arkadaşlar,

Son zamanlarda bazı aksi olayların cereyan etmesi üzerine ve Davut hocamla yaptığım görüşmeler sonucunda temayı değiştirme kararı aldım. Temanın Photoshop üzerinde yapılan çizimi yaklaşık 15 dakikamı aldı. Çok fazla detaya girmek istemedim aslına bakılırsa. Basit bir tema olsun istedim. Sonuç olarak ta böyle birşey ortaya çıktı.

Dipnot: Son günlerde günlüğe atılan çirkin yorumların onaylanmadığının ve bu yorumların veritabanında tutulduğunun bilinmesini isterim. Çirkin söz sarfedenleri de kınıyorum…

Yeni bir temada ve yeni bir yazıda görüşmek dileğiyle. Hoşçakalın. He unutmadan, temanın çizimini altta verdim.

Temanın Photoshop çizimi ve HTML, CSS kodlaması resimde görüldüğü üzere bana aittir.

Siz de Twitter rüzgarına kapıldıysanız ana sayfanızın görünümünü özelleştirerek standart temaları kullananlardan daha farklı ve kişisel bir görünüme sahip olabilirsiniz.

En ünlüsünden en sade vatandaşa, yaşlısından gencine, ilgilisinden ilgisizine kadar herkes bir şekilde Twitter hesabına sahip oldu ve hayatında ne olup bitiyorsa, aklından ne geçiyorsa izleyenleriyle paylaşmaya başladı. Facebook’un “durum mesajı” özelliğinin çok popüler olması sonrası parlak bir fikir olarak doğan ve büyüyen Twitter, kullanıcılarının çoğu farkında olmasa da oldukça esnek özelleştirme seçeneklerine sahip. Siz de Twitter sayfanızı kişiselleştirin, farkınızı ortaya koyun.

1-) Twitter sayfanızın görünümünü değiştirmek için Twitter adresinize girdikten sonra “Log In » Settings » Design” yolunu izleyin. Bu sekme yardımıyla sayfanızın arka planını ve renklerini değiştirebilirsiniz.

2-) “Select a theme” kısmındaki varsayıaln temaları boş verip sol alt kısımda bulunan “Change background image” bağlantısına tıklayın ve Twitter sayfanızın arka plan resmini değiştirin.

3-) Bir sonraki adımda bilgisayarınızdan bir arka plan resmi yüklemeniz istenecek. Twitter için en güzel arkaplan resimlerini twitterbackgrounds.org adresinde bulabilirsiniz. İstediğiniz bir resmi kaydedin ve kullanın.

4-) “Save Changes” butonuna bastığınızda arka plan dosyası bilgisayarınızdan yüklenecek ve aktif olacak. Son yapmanız gereken, “Change design colour” bağlantısından temanızın renklerini ayarlamak ve kaydetmek.

Tasarıma yeni ısınan ve hazır sistemler üzerine tasarım yapmak isteyen arkadaşlarımızın çokça olduğu şu dönemlerde bu gibi eğitsellerin sunulması büyük bir avantaj. GrafPedia sitesi tarafından anlatımı yapılan bu derste (Tutorial), WordPress için bir temanın nasıl yapıldığı adımlar halinde anlatılıyor. Aynı zamanda, sitenin VIP üyeleri tarafından, yapılan tasarımın indirilmesi de söz konusu.

Derse buradan, yapılan temaya ise şuradan gözatabilirsiniz. İyi çalışmalar..