bildirgec.org - onderizma - beğendikleri

2009'un En İyi Ücretsiz Yazı Tipleri

onderizma — Sat, 07 Nov 2009 09:56:00 GMT

Bir yılın daha sonuna yaklaşıyoruz. 2009'un yazı tipleri (font) için büyük bir yıl olduğunu görebiliyoruz. Burada geçen yarım yılın en iyi yazı tipleri yer almaktadır.

1. Chunk

Batı Amerikalı tahta basma kalıbı gibi, el ilanları ve haber başlıkları için uygundur.

2. Calluna

Çok geniş bir dil içeriği desteklemektedir.

3. Vegur

4. League Gothic

Klasik bir görünüm ile hoş tasarımların oluşmasına yardımcı olur.

5. Sansation

6. Quicksand

7. Mentone

Yuvarlanmış köşeleri ile etkili çalışmalar yapmanızı sağlar.

8. Serif Beta

9. Goudy Bookletter 1911

10. Titilium

11. Junction

Serif ve sans serif yazı tiplerinin bir araya geldiği en kaliteli yazı tiplerinden birisidir. El çizimine benzer.

12. Sovba

Köşeleri yuvarlanmış, sans-serif'den esinlenmiş hoş bir yazı tipidir.

ayrıca aşağıdaki yazılarda ilginizi çekebilir.

Ücretsiz Font (Yazı Tipi) İndirmek İçin En İyi 20 Site

Web Tasarımında El Çizimi Stili İçin 21 En İyi Font

kaynak: webdesignledger.com

yazılarımı takip edebilirsiniz.

blog | twitter | friendfeed | delicious | rss

Bu yazı onderizma tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

500+ ilginç web ikonları

onderizma — Fri, 09 Oct 2009 16:29:00 GMT

Nette gezerken görüp beğendiğim ilginç ikon setlerini bir araya topladım. toplam 500+ ikon içeriyor. Masaüstünü ve websitelerini renklendirmek isteyenlerin işine yarayabilir.

Futbol İkon Seti - İndir >>

Warcraft - Orc İkon Seti - (Sadece Mac için) İndir >>

Wall-e İkon Seti - İndir >>

Retro Bulli İkon Seti - İndir >>

2001: A Space Odyssey İkon Seti - İndir >>

Revolution İkon Seti - İndir >>

Defrag İkonu - İndir >>

Ukrayna Motifleri - İndir >>

Royal İkon Seti - İndir >>

Kar Leoparı - İndir >>

Konteynır İkon Seti - İndir >>

Benzin Pompası İkon Seti - İndir >>

Çöp Kutusu İkon Seti - İndir >>

Harry Potter İkon Seti - İndir >>

Somatic Ramp İkon Seti - İndir >>

Smashing Retro İkon Seti - İndir >>

Pioneer Camp İkon Seti - İndir >>

Dark Denim İkon Seti - İndir >>

Bu yazı onderizma tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

rengârenk kampanya siteleri

onderizma — Thu, 03 Sep 2009 14:23:00 GMT

tdk sözlüğünde kampanya, birinci anlamı; politika, ekonomi, kültür vb. alanlarında belirli bir sürede etkinlik dönemi, ikincil anlam olarak; tüketiciyi özendirmek için belli sürelerde düzenlenen indirimli veya taksitli satış, olarak tanımlanmış.

konumuz dolayısıyla bizi ilgilendiren ikincil anlamı. kampanyalar pazarlamanın en etkin elemanlarından biridir. kriz döneminde kabuğuna çekilip krizin geçmesini bekleyen şirketlerin aksine; bu krizin kötü etkilerinden en az zararla çıkanlar, indirim kampanyaları düzenleyenler oldu. kriz sonrasında ise tüketicinin kötü gününde onun yanında olan ürün ve markalar müşterileri tarafından daha çok akılda kalıcı olacaktır.

son iki yıldır düzenlenen kamyanya ve onların web site tasarımlarını sizin için derledik. ortaya cıvıl cıvıl, rengarenk tasarımlar çıktı.

01- nescafe 3ü 1 arada

02- avea 3g

03- acil lezzet hattı

04- hızlı ve akıllı

05- evdeyim acıktım

06- turkcell sihir dükkanı

07- puf kahramanları

08- tamek mutfak keyfi

09- huggies mayo bebek bezi

10- sana tereyağ tadında

11- hayat su sudoku

12- garanti 101 cennet

13- tuborg pong

14- sony babaology

15- pepsi yaşatır seni

16- tadım çekirdek çitlerken başka neler yapabilirsin

17- live vodafone

18- çevreye duyarlı bonus

19- coca colazero

20- uno büyümek

21- turkcell merak etmiyor musun

22- nike sports wear stories

23- craxla

24- öğrenci ne yapsa yeridir

25- kankalar maça gidiyor

26- favori canım annem

27- vivident extra

28- otomobil kazan

29- d-smart gampanya

30- one love one touch

31- cömertlik tatlı şeydir

32- değişimin parçası ol

33- sihirli lezzet

34- artık herşey mümkün

35- 48 kalori

36- sadece magnum

37- numaralar aksın

38- eti cin sevenler

39- mutluluğa kapak aç

40- biraya dair

41- unutulmaz doğalgaz faturaları

42- acımasız gerçekler

43- aş kendini gel aşka

44- herşeyi bilen kadın

45- saç rengimi arıyorum

46- jelibon vampir

47- çatlak t-shirt

48- denedim biliyorum

49- eğlenceye yapış

50- fenercell

devamı için rengârenk kampanya siteleri 2

ilginizi çekebilir:

+ türkiye'nin interaktif web ajansları
+ web tasarımcılar için 11 araç
+ 35 kore web sitesi tasarımı

Bu yazı onderizma tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

ilham kaynağı 30 web tasarım örneği (yeni)

onderizma — Sat, 11 Jul 2009 12:02:00 GMT

Tasarımlarınızda size ilham kaynağı olabilecek 30 farklı tasarım aşağıda listelenmiştir.

Bunlardan birçoğu yeni. umarım işinize yarar ve sonraki projelerinizde sizi aydınlatır.

Bunlardan farklı başka çalışmalara da göz atmak isterseniz buradan girip portfolio'ya bi bakın derim. Ama ilk önce aşağıdakileri kontrol edin sonuna kadar.

1. Alexarts basit ama modern bir görünüm verilmiş siteye.

2. Pampaneo hikayesini anlatmak için ilginç grafikler kullanmış Pampaneo.

3. Juan Diego Velasco güzel bir sayfa düeni ve canlı renkler kullanılmış.

4. Metalab güzel bir arayüz hazırlanmış.

5. Serj muhteşem bir tasarım.

6. Peter Pearson bundada güzel bir sayfa düeni ve hoş bir grafik efekti var.

7. Cactuar.in.the.Phailbucket güzel çizgiler ve muhteşem renkeri seçmişler.

8. Fred Maya hoş bir tasarım için basitlik, güzel renkler ve kullanılabilirliğe dikkat etişler.

9. Galvin Castleton yatay bir düzen ve güzel fotoğraflarla.

10. Chris Jennings okunabilirlik önplanda.

11. Guerra Creative

12. 84 Colors

13. Feed Stitch

14. We Bleed Design

15. Motty

16. Cerity

17. Creative People

18. Brooklyn Fare

19. Tierra Virtual

20. Merixusa

21. Food, Inc

22. Inicio

23. CCSI

24. Loodo

25. Guifx

26. Vyniknite efektler hazır şablona bensede güzel bir görünüm olmuş.

27. two24studios Muhteşem bir doku, güzel bir tipografi ve harika bir navigasyon çubuğu.

28. Illusiv Yine hoş bir tasarım.

29. Duirwaigh Tek elimeyle harika bir arkaplan, her site kaldıramaz bunu.

30. BKWLD Harika, beyazla ne yapılabilirdiki başka?

bu aralar pöpüler olan kağıt arkaplanlı bir tasarım oluşturmayı düşünürseniz buraya da bi bakın.

ingilizce kaynak

Bu yazı onderizma tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

45+ Ender Görülen Website Tasarımı

onderizma — Sun, 12 Jul 2009 07:20:00 GMT

Sıradışı tasarımları incelemek ister misiniz? yapısı, menüsü ve herşeyi ile farklı bir şekilde tasarlanmış siteler oldukça ilgi çekici görünüyor. Aşağıda nadir görülen site tasarımları yer almaktadır.

1. thibaud’s portfolio

2. koko3

3. kokoro & moi

4. markus dreßen

5. questionable characters

6. space collective

7. quipsologies

8. reform & revolution

9. rhode island school of design

10. shopcomposition

11. narrow design: nick jones

12. ux mag

13. another company

14. proa

15. typeneu

16. stephen caver

17. superscript2

18. figtree

19. the architects

20. marlous de roode

21. floor 89

22. supercolors

23. 2×4, inc

24. suie paparude

25. dunne & raby

yazının devamı için buraya tıklayabilirsiniz.

kaynak: dewebtimes.com

yazılarımı takip edebilirsiniz.

blog | friendfeed | twitter | delicious

Bu yazı onderizma tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

15 Adet Dolu Dolu jQuery Kaynak Sitesi

onderizma — Mon, 13 Jul 2009 06:39:00 GMT

Web sayfalarının tasarımlarında oldukça fazlaca kullanılan JQuery'nin, her geçen gün fanatik hayranları da artmakta.
Web sayfalarına oldukça kolay bir şekilde animasyonlu hareketlilikler eklemek isteyen JQuery hayranları, bu amaçla JQuery ile ilgili farklı eğitim ve eklenti sitelerini sık sık web'te aramaktalar.

JQuery hayranlarının bu ihtiyaçlarından hareketle oluşturulmuş ve jQuery ile ilgili eğitici dokümanlar, hileler, ipuçları, eklentiler ve haberlere ulaşabileceğiniz 15 adet JQuery Sitesine aşağıdaki listeden ulaşabilirsiniz.

1. jQuery Style

2. jQuery for Designers

Daha önce yayınlanmış ve oldukça ilgi gören JQuery ile ilgili yazılarımdan bazıları:
JQuery ile iPhone-Style Checkboxes
En iyi 10 jquery slider eklentisi
jQuery ve CSS ile Page Peel Effect'i
jQuery Impromptu ile Şık Tasarımlı Mesaj Kutuları
Layouts için 6 Adet jQuery eklentisi
JQuery ile Hoş Bir Menü
Html formları için 25 harika jquery eklentisi

Kaynak: desizntech
Takip: Blog FriendFeed Twitter Facebook Email RSS

Bu yazı onderizma tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Web Tasarımcılar İçin Gayet Faydalı 15 "Css Grid Yerleşimi" Üreteci

onderizma — Wed, 03 Jun 2009 08:43:00 GMT

Tasarımcılara yardımcı olacak bir sürü çevrimiçi üreteç bulunuyor. Örneğin favicon, arkaplan, buton, kimlik kartı en popüler üreteçler arasında yer almaktadır.

Aşağıda Css Grid şablonları oluşturabileceğiniz sitelere ulaşabilirsiniz.

1 - Grid Layout Generator by Pagecolumn

2 - Grid Generator by DesignByGrid

3 - Blueprint Grid CSS Generator

4 - Grid Generator by netProtozo

5 - Grid Designer (featured in Creative Review magazine)

6 - Grid System Generator

7 - YUI CSS Grid Builder

8 - Variable Grid System

9 - YAML Builder

10 - Layout Generators by Pagecolumn

11 - Fisheye

12 - CSS Layout Generator by CSSCreator

13 - Firdamatic

14 - CSS Source Ordered Variable Border 1-3 Columned Page Maker

15 - CSS Layout Generator by CSSPortal

kaynak: webdesignbooth.com
diğer yazılarım

Bu yazı onderizma tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

50+ video veya resim anlatımlı origami dersi

onderizma — Thu, 11 Jun 2009 09:03:00 GMT

origami, kağıt katlama sanatına verilen isim olmakla birlikte popüler ve oldukça etkileyici bir sanattır. yüzlerce yıllık bir geçmişe dayanan origami, çeşitli örnekleri ile bir çok kez karşımıza çıkmıştır. ve bir çoğumuz en azından basit bir origami çalışması (örneğin kurbağa) elde etmiş ya da elde etmeye çalışmışızdır.
bu bildiride origamiyi öğrenmek ve çeşitli origami örneklerini yapmak isteyenler için videolu ve resimli anlatım ile sunulan origami dersleri bulunmakta. hem de oldukça anlaşılabilir ve kolay bir anlatımla sunulmuş olan dersler. bu eşsiz origami ders ve tekniklerini bir arada bulabileceğiniz bu yazı ile o hep ilgi ile baktığınız muhteşem origami örneklerini artık siz de yapabileceksiniz.
ilk olarak bu derslerin en iyisiyle başlayalım:

14 muhteşem video anlatımlı origami dersi

dersler arasında; ilk kısımda penguen, kutup ayısı, fok, albatros, deniz gergedanı, deniz kırlangıcı, buz dağı diğer kısımda, kurbağa, ördek, köpek, Zümrüdüanka, nilüfer çieği, kelebek ve yarasa origami anlatımları bulunmakta. bu çok çeşitli ve kolay anlaşılır video dersleri ile mükemmel bir arşiv.

13 adet kolay anlaşılır origami dersi (resimli anlatım)

sitede; kutu, t-shirt, kurbağa, kuğu, kalp, yengeç, küp, zarf ve çeşitli uçak anlatımları bulunuyor. anlatımlar resimli ve kolay anlaşılır bir şekilde aşama aşama sunulmuş.

kanat çırpan kuş yapımı

animasyonla anlatılan bu örnekte kanat çırpan bir kuş elde ediyoruz. gerçekten oldukça yaratıcı ve çok eğlenceli.

muhteşem anlatımlı origami örnekleri arşivi

siteden bir örnek

sitenin sol yanında bulunan alanlardan (hayvanlar, bitkiler, uçaklar, kuşlar, vb.) istediğiniz origami örneğini seçip resimli anlatımına ulaşabileceğiniz arşiv niteliğinde eşsiz bir kaynak.

siteden başka bir örnek

folding trees origami

siteden bir örnek

sitede yıldız, ağaç, sepet, cd kutusu, kitap, çiçek vb. oldukça çeşitli ve güzel örneklerin origami anlatımları bulunmakta.

onlarca origami örneği (resimli anlatım)

siteden bir örnek

üç başlık altında toplanan onlarca anlatım mevcut. hayvanlara ait origamiler, bitkilere ait olanlar ve diğer örnekler. uygulaması kolay anlatımların bulunduğu güzel bir kaynak.

ve origamiyi artık yemek masanıza da taşıyabilirsiz. burada peçetlerle yapılan çeşitli origami örnekleri yer almakta.
tüm bunlara ek olarak şurada, oldukça sıradışı örnekler bulunmakta.

siteden bir örnek

fakat anlatım değil de sadece örneğe ulaşılırken elde edilen katlama çizgileri paylaşılıyor.

son olarak origami ile ilgili şu yazılar da ilginizi çekecektir:

|diğer yazılarım|

Bu yazı onderizma tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Çapraz Tarayıcı Uyumluluğu İçin Altın Değerinde İpuçları

onderizma — Mon, 16 Feb 2009 19:13:00 GMT

Internet Explorer'la çalışmak her seviyeden web tasarımcısı için bazen sorun olabilir. Ancak bu sorun olmak zorunda olacağı anlamına gelmiyor. Hepsi olmasa da pek çok Internet Explorer hatası, hatanın nasıl oluştuğunu anladıktan sonra kolayca düzeltilebilir. Bu yazımda özellikle giriş seviyesindeki kullanıcılar için çapraz tarayıcı uyumluluğunu sağlayabilmeleri için önemli problemleri ve çözümlerini listeledim.

Yazımda en çok kullanılan tarayıcı sürümleri olan Firefox 2+, Safari 3+ ve Internet Explorer 6+'ya odaklandım. Her ne kadar IE6'nın kullanım oranı gün geçtikçe düşüş gösteriyor olsa da, bu onu desteklememeniz gerektiği anlamına gelmez, zira halen pek çok kullanıcı hangi tarayıcı sürümünü kullandığını bilmemektedir. Eğer bu IE6 hatalarını biliyorsanız, tarayıcı üzerinde test yapmadan bile sitenizin doğru görünüp görünmediğini anlayabilirsiniz. Bu makale süper deneyimli web tasarımcılarına yönelik olmamakla birlikte IE6'nın çapraz tarayıcı uyumluluğuna yönelik gizlerini anlamanıza yardımcı olacaktır.

Özet
Makalenin tamamını okumak istemeyenleriniz için aşağıda makalenin bir özetini bulabilirsiniz.

Daima STRICT DOCTYPE ve standartlarla uyumlu HTML/CSS kullanın
CSS'nizin en başında daima sıfırlama (CSS RESET) kullanın.
Firefox'ta metin işleme sorunlarını gidermek için -moz-opacity:0.99, Safari'de ise text-shadow: #000 0 0 0 kullanın.
Görselleri asla CSS ya da HTML ile yeniden boyutlandırmayın.
Her tarayıcıda metinlerin nasıl işlendiğini test edin. Lucida kullanmayın.
BODY üzerinde metni % ile boyutlandırıp sitenin geri kalanında em kullanarak metin boyutlandırması yapın.
Üzerine float uygulanmış tüm anahat divleri display: inline ve overwlow: hidden içermeli.
CSS3 seçicilerini kullanmayın.
Alpha'yı yüklemediyseniz saydam PNG kullanmayın.

Element Uyumsuzlukları
Her tarayıcı farklı elementleri farklı şekillerde yorumlar - farklı miktarlarda boşluklar, marjlar, sınırlar vs. Bunun anlamı eğr siz öntanımlı stilleri kullanırsanız, kodunuz doğru olsa bile siteniz farklı tarayıcılarda farklı şekillerde görüntülenebilir.

Çözüm
Yapmanız gereken ilk şey, ki pek çoğunuzun bunu bildiğini düşünüyorum, stillerinizi sıfırlamaktır. Sıfırlamak, stillerinizin en üst kısmına yerleştireceğiniz ve elementler üzerindeki boşlukları, marjları, sınırları ve diğer uyuşmazlıkları sıfırlayıp onları standart olarak yeniden inşa eden bir kod parçasıdır.

Eric Meyer'in reset.css dosyasını indirin ve stillerinizin en başına yerleştirin. İşte bu kadar. Temiz, çapraz tarayıcı uyumlu stillere kavuştunuz.

Görsel İşleme
IE6 ve IE7'nin her ikisi de yeniden boyutlandırılmış görselleri inanılmaz derecede kötü bir şekilde işler. Bir görselin boyutunu CSS ya da HTML kullanarak değiştirdiğinizde görsel inanılmaz derecede kötü görünür.

Çözüm
Yapmayın. Görsellerinizi sitenize yerleştirmeden önce istediğiniz boyuta göre yeniden boyutlandırın.

Metin İşleme
Tüm hataların IE'den kaynaklanmadığını söylemiştim. Safari 3+ açık renkli metinlerin koyu renkli arkaplan üzerinde işlenmesi sırasında bir soruna sahip. Kimileri bunun iyi ya da kötü olup olmadığı konusunda farklı görüşlere sahip olabilir, ancak ilgili metni daha aydınlık görüntülemenin bir yolu var. Safari 3.1'de standart metin aşağıdaki şekilde işlenmektedir.

Çözüm
Oldukça kolay. Tek yapmanız gereken aşağıdaki stillemeyi CSS kodunuza dahil etmek.

p {text-shadow: #000 0 0 0;}

#000 kullandığınız arkaplan rengi olmalı. Seçtiğiniz elementlerde muhtemelen siz daha özgün olmak isteyeceksinizdir. Bunu BODY etiketi üzerinde kullanmanızı önermem. Düzeltmek isteyeceğiniz diğer elementler li, dt, dd, blockquote vs olabilir. Daha 'ince' görüntülemek istediğiniz tüm elementlerde bu düzeltmeyi kullanın.

Bazıları Safari'de tipografi için bunun iyi olmadığını söylüyorlar ve metnin standart işleme ile daha güzel göründüğünü söylüyorlar ki ben de onlara katılıyorum. Ancak bazılarının buna katılmadığını da biliyorum. Ayrıca arkaplan rengine, metin rengine ve metin seçimine karar verirken hangisinin daha iyi olduğuna da karar veremeyiz. Bu durumda seçim tamamen kişisel tercihinize ve sitenizin içeriğinin nasıl olduğuna kalmış.

Bu düzeltmeyi Firefox üzerinde kullanmak için opacity düzeltmesini kullanacağız.

p {-moz-opacity: 0.99;}

Bu düzeltmeyi kullanırken dikkatli olmalısınız zira düzeltmenin uygulandığı element içerisinde bir Flash dosyası bulunuyorsa ilgili dosya doğru görüntülenmemektedir.

İlgili düzeltmeler uygulandıktan sonra metnimiz aşağıdaki şekilde görünecektir.

Yazıtipi Seçimi
Hepimizin kullandığı bazı ortak web yazı tipleri vardır - Arial, Georgia, Verdana vb. Hem PC hem de Mac kullanıcılarının bilgisayarlarında bulunan yazı tipleri de mevcuttur - Century Gothic, Arial Narrow vs. Buna rağmen farklı tarayıcıların ve işletim sistemlerinin yazı tipi işleme yöntemleri farklıdır ve sizin bu farklılıkların farkında olmanız gerekir, zira yanlış bir yazı tipi kullanırsanız siteniz çok çirkin görünebilir.

Çözüm
Kullanacağınız yazı tipinin seçimi tamamen sizin tercihinize bağlıdır. Yazı tipini kullanmak güvenli olduğu sürece sorun yoktur ancak bu işleme sorunlarının farkında olmanız gerekir. Kullanmamanız gereken bir yazı tipi muhtemelen Lucida Grande/Sans zira IE üzerinde bu yazı tipi korkunç görünüyor. Yazı tipinin Safari'de (Mac) nasıl işlendiğine bir bakın.

Güzel değil mi? Internet Explorer (PC)'de yazı tipinin bu şekilde görüntüleniyor olması ise çok kötü.

Kimileri Lucida Sans yazı tipinin de işletim sisteminin ClearType özelliği açıldığında düzgün göründüğünü belirtirken, kimileri de halen yanlış göründüğünü belirtiyor. Bu durumda yapılması gereken en doğru şey muhtemelen Lucida Sans kullanmamak olacaktır. Bunun yerine Arial ya da başka bir san-serif yazı tipi kullanmayı tercih etmelisiniz.

Yazıtipi Boyutlama
Metni yeniden boyutlandırma işlemi farklı tarayıcılarda ve işletim sistemlerinde farklı şekillerde işlenir. Örneğin IE pixel kullanılarak boyutlandırılmış bir metni yeniden boyutlandırmayacaktır. Eğer metinleri em kullanarak boyutlandırırsak, o zaman da IE metni yeniden boyutlandırdığımızda boyutunu abartacaktır.

Çözüm
Yazı tipi boyutlandırmaya yönelik kendinize referans alabileceğiniz en iyi kaynak, Richard Rutter'ın yazdığı CSS'de Metin Nasıl Boyutlandırılmalıdır makalesidir. Sonuç ise, metninizi BODY elementi üzerinde yüzde kullanarak boyutlandırıp, stilin geri kalanında em kullanarak boyutu belirlemek. Satır yüksekliği için de yine pixel yerine em kullanırsanız farklı tarayıcılarda doğru işleme sonuçlarını alırsanız.

Burada hatırlamanız gereken şey öntanımlı yazı tipi boyutunun 16px olduğudur. Bu durumda örneğin yazı tipini 12px'e dönüştürmek için kullanmamız gereken kod şudur:

body {font-size: 75%; line-height: 1.5 em;}

Şimdi boyutlandırmanızı em kullanarak yapabilirsiniz:

h1 {font-size: 3em;}

Önerilen bir diğer teknik ise yazı tipinizi önce 10px'e indirgemektir. Bu durmda metninizi em kullanarak yeniden boyutlandırmak daha kolay olacaktır. Örneğin:

body {font-size: 62.5%; line-height: 1.5em;}
h1 {font-size: 1.8em; /* 18px */}
p {font-size: 1.2em; /* 12px */}

Bu tekniği kullanırsanız dikkat etmeniz gereken bir konu var ki o da insanların Internet Explorer üzerinde küçük yazı tipi seçeneğini kullanmaları durumunda metniniz okunamayacak derecede küçük olabilir. Her ne kadar bu seçeneği bilinçli olarak seçen kullanıcı sayısının yok denecek kadar az olduğunu düşünsem de bu ayrıntıyı bilmenizde yarar var.

Yüzen Elementlerde Çifte Marj
CSS Anahatlarımızı birbiri ardına yüzen (float) divler kullanar oluştururuz, tıpkı bir tür yatay tetris gibi. Satırın sonuna gelindiğinde ise satıra sığmayan div bir sonraki satıra kayar. Bir ızgara oluşturmak için sık kullanılan yöntem aşağıdaki gibidir:

#content {float: right; width: 300px; margin-right: 10px;}
#sidebar {float: right; width: 100px;}

Bu kod "normal" bir tarayıcıda aşağıdaki gibi görünmelidir.

Ancak IE'de bu aşağıdaki gibi görüntülenecektir.

Gördüğünüz üzere marj iki defa işlendi. Yüzen element ile aynı yönde bulunan her marj iki defa işlenecektir. Neden diye sormayın, IE bu. Bunun anlamı sol tarafaki elemente uygulanan marj, kodda belirtilenin aksine 20px olarak işlenecektir ki bu da muhtemelen anahattı bozacaktır.

Çözüm
Bu sorunu gidermek için anahat divlerinize display: inline yerleştirmelisiniz.

#content {float: right; width: 300px; margin-right: 10px; display: inline;}
#sidebar {float: right; width: 100px; display: inline;}

Bu sayede marj hatasını da gidermiş olduk. Her ne kadar bu yüzen element ile aynı yöndeki tüm marj elementlerini etkilese de bu düzeltmeyi yüzen tüm div elementlerine eklemek kullanışlı olabilir. Ne zaman yüzen tarafta marj kullanmak isteyeceğinizi önceden kestiremezsiniz. Bu kod diğer hiçbir tarayıcıyı etkilemeyeceğinden kullanışlı olabilir.

Genişleyen Kutu
Genişleyen kutu problemi pek çok CSS anahattında sorun oluşturur. birbiri ardına yüzen elementler içeren ve öntanımlı genişlikleri bulunan divleri içeren bir anahat kullanmanız durumunda eğer ilgili divin genişliğinden daha geniş bir genişliğe sahip bir görsel ya da boşluk içermeyen bir metin kullanmanız durumunda ilgili anahat IE6'de yanlış görüntülenecektir. Örneğimize bir bakalım:

#content {float: right; width: 300px; margin-right: 10px; display: inline;}
#sidebar {float: right; width: 100px; display: inline;}

Pek çok tarayıcıda bu aşağıdaki şekilde işlenecektir:

Buna rağmen IE6'da anahattımız bozulacaktır:

Çözüm
Burada kullanacağımız çözüm overflow özelliğini kullanmaktır. Eğer overflow: hidden değerini anahat divlerine dahil ederseniz, anahat IE6'de bozulmayacaktır.

#content {float: right; width: 300px; margin-right: 10px; display: inline; overflow: hidden;}
#sidebar {float: right; width: 100px; display: inline; overflow: hidden;}

Her ne kadar ekleyeceğiniz bu kod sorunu giderse de bazı karmaşık anahatlarda başka sorunlara yol açabilir. Bunun yanı sıra IE6 dışındaki tarayıcılarda metnin otomatik olarak iki satıra bölümlenmesinin aksine alana sığmayan metnin görünmemesine neden olacaktır.

Yüzen Elementleri Kapsamak
Burada anlatmak istediğimiz şey kapsayıcı bir divin içerisindeki divleri doğru bir şekilde kapsamamasıdır. Aşağıdaki örneğe bir bakın.

Kapsayıcının içerisindeki divleri nasıl doğru bir şekilde kapsadığını gördünüz mü? Olması gereken de bu zaten. Buna rağmen bazen bu şekilde sonuçlanmayıp aşağıdaki gibi bir hal alabiliyor.

Kapsayıcı doğru bir şekilde içerisindeki divleri kapsamıyor. Muhtemelen kapsayıcınıza bir arkaplan resmi atamadığınız sürece bunu fark etmeyeceksinizdir.

Çözüm
Bu sorunu gidermeye yönelik birkaç çözüm bulunmakla birlikte kullanılabilecek en iyi yöntem kapsayıcınıza overflow: auto; ya da overflow: hidden değerlerinden birisini atamaktır.

#container {width: 966px; margin: 0 auto; overflow: auto;}

overflow: auto değerinin Firefox üzerinde bazen sorunlara yol açabileceğini unutmayın. Eğer bunu kullandıktan sonra bir sorunla karşılaşırsanız, onun yerine overflow: hidden kullanmayı deneyin. Eğer bu da sorun oluşturuyorsa o zaman şuradaki makaleye bir göz atın. Bunu eklemenin dışında IE6 üzerinde anahattınızın tetiklenmesi gerektiğini de unutmayın. Bunu elementinize yükseklik ve genişlik atayarak yapabilrsiniz. Eğer kapsayıcınıza bir genişlik değeri vermek istemiyorsanız o zaman height: 1%; ya da zoom: 1; değerlerinden birini verebilirsiniz.

CSS Seçicileri
Her ne kadar hepimiz CSS3 seçicilerini kullanmaya can atsak da, IE6 bu seçicilerin büyük bir kısmını desteklememektedir. Bırakın CSS3'ü, IE6'nın desteklemediği CSS2 seçicileri bile vardır. İşte kullanmamanız gereken seçicilerin bir listesi:

E > F
E + F
E ~ F
:root
:last-child
:only-child
:nth-child()
:nth-last-child()
:first-of-type
:last-of-type
:only-of-type
:nth-of-type()
:nth-last-of-type()
:empty
:not()
:target
:enable
:disabled
:checked
E[değer] seçicilerinden herhangi biri
:first-child
:lang()
:before
::before
:after
::after

Elbette bu seçicilerin pek çoğu daha Firefox 3 üzerinde de desteklenmiyor. Desteklenen seçicilerin tam bir listesi için evotech.net üzerinde yer alan tarayıcılarda css seçiciler için destek yazısına bir göz atın.

Çözüm
Standart seçicileri kullanmaya devam edin. Sadece IE üzerinde çok önemli bir değişiklik yapmayacağı sürece E + F, F, E > F, E ~ F seçicilerini kullanın. Eğer gerçekten bu seçicileri kullanmak istiyorsanız, o zaman IE8.js'yi deneyebilirsiniz. Bu JavaScript kütüphanesi IE6'ya seçiciler için daha iyi destek sunmasına rağmen sitenizi yavaşlatacaktır. Ancak biz IE6 kullanıcılarını dikkate almıyoruz, öyle değil mi?

PNG Saydamlığı
IE6 PNGler üzerinde alfa saydamlığı desteklemiyor. Bu muhtemelen IE üzerinde gördüğümüz en rahatsız edici sorun.

Çözüm
Bu problem için bir dizi çözüm bulunuyor. Ya IE'ye özgü bir stil şablonunda AlphaImageLoader'ı kullanacaksınız ya da bu sorunu gidermek için oluşturulan çeşitli JavaScriptlerden birine başvuracaksınız. Hangisini tercih ederseniz edin, tekrar eden saydam arkaplan görsellerini IE6 üzerinde kullanabilmenin bir yolu yok.

AlphaImageLoader'ı kullanmak biraz zahmetli. Saydam olan tüm PNG görsellerine aşağıdaki özellikleri ekleyin (CSS'nizin doğrulanabilmesini istiyorsanız o zaman bu kodu IE'ye özgü bir stil şablonu içerisine yerleştirin).

.saydam {background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.bildirgec.org/images/transparent.png', sizingMethod='image/scale/crop');}

Tüm PNG görsellerinizi "saydam" sınıfına dahil ettiğinizi varsayarsak yukarıdaki kodu kullanabilirsiniz. Ayrıca 1x1 saydam bir png oluşturup src değerinde onun konumunu belirtmeniz de gerekiyor. Geçtiğimiz yıl 24ways üzerinde bu konuda muhteşem bir makale yayımlandı.

Bu sorunu giderebileceğiniz daha da iyi bir yöntem, Blueprint CSS Çatısı'nın geliştiricisi Olav Bjorkoy'un şuradaki makalesinde anlattığı yöntemi uygulamak. AlphaImageLoader'e benzer bir yöntem ancak onun yerine saydamlığı tetikleyen bir betiğe bağlantı veriyorsunuz.

Kullanabileceğiniz üçüncü yöntem ise IE8.js'yi kullanmak. Bu yöntem öncekinden de güvenli ve bir sorunla karşılaşmanız neredeyse mümkün değil. HTML'niz üzerinde bu betiğe bağlantı verin ve betik dosya adı -trans ile biten tüm png dosyalarının saydamlık sorununu giderecektir (örneğin resim-trans.png).

Tüm bu yöntemleri kullanmanıza rağmen saydam pngler ile sorun yaşamanız halen olasıdır. Bu yöntemlerden herhangi birini kullandıktan sonra IE6 üzerinde sağlam bir test uygulamayı unutmayın.

Kaynak: Anthony Short

CSS İle İlgili Yazdığım Diğer Yazılar

Bu yazı onderizma tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Web Tasarımcıları İçin Web Üzerindeki 6 Kullanışlı Araç

onderizma — Thu, 22 Jan 2009 19:33:00 GMT

Herhangi bir proje üzerinde ya da bir başka şey üzerinde çalıştığım çoğu zaman, web üzerinden kullandığım ve kullanışlı bulduğum pek çok araç bulunuyor. Bu araçlar hem tasarımcıların ve geliştiricilerin üzerinde çalıştıkları proje için harcadıkları zamanı kısaltmaya yarıyor, hem de bazı durumlarda tamamlaması sıradan araçlarla oldukça uzun sürecek pek çok işlemi bizler için kolaylaştırıyor. Sözü daha fazla uzatmadan gelin, web tasarımcılarının işlerini kolaylaştırmayı hedefleyen bu 6 önemli araca hep beraber bir göz atalım:

4096 Color Wheel: Web üzerinde pek çok çeşit renk küresi (color wheel) bulunmaktadır. Ben bu renk küresinin kullanımını oldukça kolay buluyorum. Jemima Pereira tarafından hazırlanan bu renk küresi, üzerindeki renkleri web safe, web smart, ve web unsafe olarak gösteriyor. Sırf bu özelliği ile bile bu ilgili araç renk seçimi sırasında web tasarımcıları için oldukça yararlı hale geliyor.

CSS Type Set: Her web tasarımcısı / geliştiricisinin işine yarayacak bu araç sayesinde bir yazıtipinin sayfa üzerinde nasıl görüneceğinden, hangi boyutu kullanmanın daha güzel görünmesine yol açacağına pek çok elementin etkisini doğrudan sayfa üzerinde görüntüleyebiliyorsunuz. Doğrudan sayfa üzerinde yazıtipi boyutu, rengi ve çok daha fazlasını değiştirmenin mümkün olmasının yanısıra, ilgili CSS kodunu da eş zamanlı olarak güncelleyip size göstererek, kodu doğrudan kopyalayıp projenize entegre etmeniz mümkün hale getirilmiş.

CSS Text Wrapper: CSS Text Wrapper sayesinde bir metni doğrudan saydam bir imaj üzerindeki objenin kendisinin köşelerine yaslanacak şekilde döşemeniz mümkün hale getiriliyor. Bu sayede yuvarlaklar, zig-zaglar ya da aklınıza gelebilecek herhangi bir şekle sahip imajı çevreleyen metinler oluşturmanız mümkün. Tek yapmanız gereken sol ve sağ sınırları farenizle işaretlemek ve ardından sitenin size sunacağı kodu sayfanıza yapıştırmak.

CSS Menu Maker: CSS menü oluşturucusu özellikle çabucak CSS menüler hazırlamaya ihtiyacı olan web geliştiricileri için tam bir biçilmiş kaftan niteliğinde. İlgili araç üzerinden menüyü özelleştirebilmeniz, yeni bağlantılar ekleyebilmeniz, tarayıcı uyumluluğunu görüntüleyebilmeniz mümkün hale getirilmiş. Ayrıca eğer sizin kendi tasarladığınız ve diğer kullanıcılarla paylaşmak istediğiniz menüler var ise, site üzerinden onları siteye gönderebilmeniz de mümkün.

DevSnippets: DevSnippets, tabir-i caizse bir web tasarımcısının ve/veya programcısı için cennet niteliğinde bir web sitesi. İlham almak için bir avuç CSS, JavaScript, AJAX, PHP kodundan daha iyi ne olabilir? Bunun da ötesinde dilerseniz kendi kodlarınızı da siteye gönderebiliyorsunuz. Ben bu siteyi her gün ziyaret ediyorum. Siteyi hazırlayan ekip, Noupe ekibi ile aynı kişilerden oluşuyor.

Script and Style: Script and Style web sitesi, mükemmel bir web tasarımcısı / blogcusu olan ve bir dizi kullanışlı siteyi yöneten Chris Coyler'in elinden çıkmış bir site olup, içeriği kodlar ve web tasarımı için hilelerden oluşuyor.

Chris'in Script ve Style hakkında söylediği sözleri sizlerle paylaşmak istiyorum:

Ben daima CSS Tricks web sitesine sosyal haber açısı ile yaklaşabilen bir site olmasını istedim ancak bu tip bir siteye Internet üzerinde raslayamadım. Bizim için doğru olan bu proje David Walsh ile partner olup ikimizin de ayrı birer site işletmesinin ardından gelişti. Script & Style sitesini özetlemek gerekirse "Bir Tasarımcı ve Geliştirici Olarak İlerlemenizi Sağlayacak Bağlantılar" diyebiliriz. Site içeriğinin %90'ı komünitenin gönderdiği bağlantılardan oluşuyor.

Evet, hepsi bu... Yazının sonunda, kolayca HTML tablolar oluşturmanızı sağlayan , Font Tester benzeri ancak daha iyi bir arayüze sahip olan Typechart ve piksel değerlerini em değerlerine dönüştürmenize olanak sağlayan PXtoEM web sitelerini de sürpriz kaynaklar olarak ekledikten sonra, tüm bu sitelerin işinize yarayacağını umuyor ve yazıyı buraya kadar okuma nezaketini gösterdiğiniz için teşekkür ediyorum.

Kaynak: DesiznTech

Web Tasarımcı Araçları İle İlgili Yazdığım Diğer Yazılar

Bu yazı onderizma tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage