Günün Derlemeleri / 27 Şubat 2009
XHTML CSS Web formları için 5 basit teknik Link
Kullanıcı arayüzü elemanları (Site Silverlight ile hazırlanmış, gayet başarılı) Link
Markaların fontları Link
20 ilginç jQuery uygulaması Link
jQuery ile web sitenizi istediğiniz gibi hareket ettirin Link
CSS ile içindekiler menüsü hazırlayın Link
Ajax web uygulamaları Link
Ücretsiz Ajax bileşenleri Link
Photoshop CS4 eğitim videoları Link
Tipografik reklam afişleri Link
2009
Best WordPress Design Award
WP Web Host bir yarışma düzenliyor: Best WordPress Design Award
Yarışma 5 kategoride, WordPress altyapısı kullanan sitelerin en iyisilerini seçmeyi amaçlıyor.
Kategoriler:
- Clean&Minimalist
- Retro & Vintage
- Grunge
- Hand Drawing Style
- Modern & Elegant
Ben de bu yarışmaya Retro&Vintage kategorisinde katılıyorum.
Katılmak ise oldukça basit. Sitenizde yarışma hakkında yazı yazıyorsunuz (Şu an benim yaptığım gibi) .
Yarışma sayfasına, yazdığınız yazının linkini ve hangi kategoride katılmak istediğinizi yorum olarak yazıyorsunuz.
Bu kadar basit.
Kazanın ödülü ise 200$ nakit.
En son ne zaman başvurabilirim derseniz: 22 Mart 2009
2009
Günün Derlemeleri / 26 Şubat 2009
Tasarımcılar için ilham kaynağı olacak ücretsiz online dergiler Link
Anlık yorum Link
Interface componentleri Link
Grup chat Link
Flickr galeri (RSS, Flickr ve jQuery kullanılmış) Link
CSS ile dikey ortalama Link
Bilinmesi gereken 5 CSS tekniği Link
2009
Ücretsiz PSD Dosya Kaynakları
Dzineblog en bilinen ve beğenilen Photoshop(PSD) kaynaklarını barındıran web sitelerini derlemiş. Buyrunuz:
1.) Photoshop Files
3.) PS galaxy
4.) Designbum
5.) Free PSD
6.) devinatART
7.) PSD Frebee
8.) Download PSD
10.) Lord of Design
11.) Pixey
12.) Psd Protocol
13.) For Designer
14.) Photoshop Candy
15.) TopTut Psd Category
2009
Günün Derlemeleri / 23 Şubat 2009
E-ticaret sitesi tasarımları Link
Işık efektleri Link
Photoshop-Illustrator tutorialları Link
2009
Günün Derlemeleri / 19 Şubat 2009
Photoshop CS2 ve CS3 ile slice çıktısını CSS olarak alma Link
Tab menü Link
Alışveriş sepeti ikonları Link
Web tasarımcıları-geliştiricileri için kullanışlı araçlar Link
Web sitesi arkaplanları, etkileyici trendler, pratikler Link
Ajax otomatik tamamlama (auto-complete) Link
Profesyonel logo nasıl tasarlanır? Link
2009
En iyi jQuery uygulamaları
Kaynak: jQuery Plugins – Best for Web Designers – Hidden Pixels
2009
Günün Derlemeleri / 18 Şubat 2009
CSS’te uzman olmanızı sağlayacak 20 ders Link
XML fotoğraf albümü Link
Mootols tree menü Link
Resim önizleme Link
40 web tasarım firması Link
120 CSS yatay menü Link
Düzenli CSS kodları yazmak için ipuçları Link
Slide efektiyle yeniden boyutlanabilen kutular Link
2009
CSS Ölçü Birimleri : em px pt %
CSS ile kodlama yapan herkes en azından bir kere düşünmüştür “ölçü birimi olarak px mi kullanmalıyım em mi?” diye. Ben de çok düşündüm ve araştırdım. Okuduklarımdan anladıklarımı paylaşmak istiyorum.
em nedir? px(pixel) nedir? pt(point ) nedir? %(percent) nedir?
em ve % bağıl ölçü birimleridir. Yani body elemanında varsayılan (default) font büyüklüğünüze (font-size) bağlı büyüme-küçülme gösteren ölçülerdir. em’in %’den ayrılan yanı varsayılan font büyüklüğünde ve font ailesinde (font-family) yer alan “M” harfinin genişliğini baz almasıdır. Yani varsayılan font-size değerini sabit tutup font-family’i değiştirdiğinizde bile görüntüde değişimi görebileceksiniz.
px ve pt ise sabit ölçülerdir. Tarayıcıdan tarayıcıya değişkenlik göstermezler. Ancak pt’de şöyle bir fark vardır. DPI tabanlı olduğundan, sayfa kağıda basıldığında monitörde göründüğünden farklı görünür. “E o zaman hangisini kullanmalı?” derseniz benim önerim
ekranda göstereceğiniz(1) font büyüklükleri için px’i kullanmak, sayfanızdan çıktı(2) alacağınız sayfalar için pt kullanmak.
<link rel=”stylesheet” href=”screen-style.css” type=”text/css” media=”screen” /> (1)
<link rel=”stylesheet” href=”print-style.css” type=”text/css” media=”print” /> (2)
Peki em mi, px mi?
Bu seçim sizin tercihlerinize ve ihtiyacınıza bağlı aslında. Bu konuyla ilgili yazacağım kısım tamamen şahsi görüşüm ve deneyimimdir. Herkes kendince yorumlayabilir.
Sitenizi kullanan kişi bilerek ya da bilmeyerek tarayıcısındaki Metin Boyutu/Text Size ayarında varsayılanın haricinde bir boyut seçmiş olabilir. Bu durumda siz px seçtiyseniz kullanıcının seçimi bir işe yaramayacaktır. Yani siz ne göstermek isterseniz kullanıcı onu görür. Peki ya sizin için görünebilir olan font boyutu kullanıcı için karınca kadarsa? Kısacası px seçerek kullanıcının seçim şansını ortadan kaldırmış olursunuz. Bu durum, kullanıcı açısından erişilebilirlik sorunudur. Ama öyle tasarımlar vardır ki bu seçim şansını ortadan kaldırmak zorunda kalırsınız. Örnek verecek olursam çok beğendiğiniz bir görsel kullanmışsınızdır ve yazılar seçtiğinizin dışında bir boyutta kullanılırsa tasarımın bozulacağına ve sitenin etkisini yitireceğine inanıyorsunuz. O zaman hiç düşünmeyin, px kullanının:)
İkinci bir örnek, aynı sayfada çok fazla içerik bulundurduğunuz bir siteniz var (online gazete gibi). Bu durumda font boyutunu sabitlememek kullanıcı açısından sıkıntı yaratabilir. Bu durumda da yine hiç düşünmeyin, px kullanının:)
Bu noktada Hürriyet Gazetesi‘ni ve Fatih Hayrioğlu‘nun sitesini ele almayı uygun gördüm. (Görüntüler Internet Explorer7′den alınmıştır.)
Hürriyet Gazetesi’nin Text Size ayarı değiştirildiğinde gözlenen değişimler ve CSS dökümanı (Büyük hallerini görmek için resimlerin üzerine tıklayabilirsiniz):
Fatih Hayrioğlu’nun web sitesinde Text Size ayarı değiştirildiğinde gözlenen değişimler ve CSS dökümanı:
Hürriyet Gazetesi sabit px değerleri, Fatih Hayrioğlu em değerleri kullanmıştır.Text size ayarını değiştirdiğimde Hürriyet’te sadece bullet’ larda büyüyüp küçülme gözlenirken, Fatih Hayrioğlu’nda fontun değişimini göz önünde bulunduran tüm elemanlar orantılı olarak büyüyüp küçülüyor.
Diyebilirsiniz ki “ben sitemde em değeri kullanmak istiyorum ama kullandığım görseller de bozulmasa?”. Sorun değil! Çünkü görsellerinize de em değeri tanımlayailirsiniz. Kısaca px kullandığınız her yere em tanımalayabilirsiniz. Böylece yazı boyutunuzla aynı oranda görselleriniz de büyüyüp küçülür.
Tasarımcı boyut olarak pt kullanmış ben bunu nasıl em’e/px’e/%’ye çevireceğim?
Bugünün tarayıcılarında body elemanında tanımlı varsayılan font büyüklüğü 16px’dir. Kullanılan oranlar da bu 16 px’e bağlıdır.
Varsayılan değerinizi 12 px yapmak isterseniz aşağıdaki hesaplarda 16 yerine 12 yazmanız yeterlidir.
Örneğin:
12px’lik bir fontu yazılarınızda kullanmak istiyorsunuz.
em hesabı: 12px / 16px = 0.75em
yüzde hesabı: 12px / 16px * 100 = 75%
punto hesabı: 16px * 72 / 96 = 12pt
Px (piksel) hakkında not : Piksel, monitörlerin çözünürlüğüne göre değişiklik gösterdiği için hesaplanan-bağlantılı bir değer birimidir. Örneğin, inç başına düşen nokta değerini temsil eden DPI (Dot Per Inch) birimine göre monitörler genelde 96 DPI‘dır.(Kaynak)
Tersi durum da söz konusu. Elinizde em tanımlı bir div vardır. Tasarımcıdan o alan için bir banner isteyeceksiniz. Ya bu alanın baskı için kaç pt olduğunu öğrenmeniz gerekiyor. O zaman da:
px hesabı: .75em * 16px = 12px
yüzde hesabı .75em * 100 = 75%
pt hesabı = 0.75em * 16 * 72 / 96 = 9pt
Ayrıca pt’den px’e dönüşüm gerekirse: 12pt * 96ppi / 72ppi = 16px
Bu hesapları çok karışık bulduysanız korkmayın! Her şeyin bir çözümü var. Bu hesabı bizim için yapan siteler var.
px to em, em to px benzeri aramalarla http://pxtoem.com/ gibi dönüştürücü sitelere erişebiliyorsunuz. Tek yapmanız gerek varsayılan font değerinizi yazmak.
Bu verdiğim bilgilere dayanarak örnek bir tipografi stili oluşturalım.
/* Varsayılan font değerlerini body elemanının içinde belirliyorum.
Bu değerin 10px olmasını yani aksini belirtmediğim sürece sayfa boyunca yazdığım tüm yazıların 10px olmasını istiyorum.
Bu durumda body nin içindeki ilk font boyutunu % ile 16px (tarayıcının varsayılanına göre oranlayarak) yazıyorum.
(10px / 16px = 62.5%) */
body { font-size: 62.5%; color: #222;background: #fff; font-family: Arial, Helvetica, sans-serif; }
h1,h2,h3,h4,h5,h6 { font-weight: normal;color: #111;} h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }
Bu örnekte varsayılan font büyüklüğüm 10px olduğu için, tarayıcımda da varsayılan text size ayarlıysa; h1:30px, h:20px, h3:15px, h4:12px, h5:10px ve h6:10px olacaktır.
Örneği görmek için tıklayın.
Peki bunun nasıl bir faydası var?
Aradan biraz zaman geçti, sitenin tasarımı eskidi, yenisi yapıldı. Bu sefer kullanmak istediğimiz font büyüklüğünün 12px olması istendi. Tek yapmanız gereken body içindeki font-size değerini 75% olarak değiştirmek.
Örneği görmek için tıklayın.
Sözünü ettiğim 4 ölçü biriminin dışında cm, in, mm, ex ve pc de bulunmaktadır ama ben en çok kullanılanlara ve kafa karıştıranlara değinmek istedim.Bu konuyla ilgili Türkçe yazı çok az olduğu için de bunları yazma ihtiyacı hissettim. Fikriniz / eleştiriniz / ekleyecekleriniz olursa paylaşmanızdan çok memnun olurum.
Kullandığım kaynaklar:
px to em , The Sug , John Tangarine , Kyle Schaeffer
2009
CSS 3 ile Volkswagen Camper
UYARI: CSS3 Camper Firefox-Chrome tarayıcılarda görüntülenebilmektedir!!!
Bu yazı güncellenmiş halini Club Crema’dan okuyabilirsiniz.
Geçenlerde işten dönerken otobüste aklıma bir anket sorusu geldi. Henüz anketi yapmadım ama soru şu: “Yaptığınız işin günlük yaşamınıza etkisi ne?”
Benim aklıma ilk gelen cevap gördüğüm her şeyin satır-sütun , float:left; float:right, list (li) lerden oluştuğunu farketmemdi. Sonra, bunu bir uygulasam diye düşündüm. Önce sadece list elemanlarını kullanarak bina ypmak geldi aklıma. Sonra dedim neden css3 özelliklerini kullanarak bir şeyler yapmıyorum?
Yuvarlak köşeli şeyleri düşünürken de aklıma en sevdiğim arabalardan olan Volkswagen Camper geldi. CSS3 border-radius özelliğini kullanarak bu arabayı yaptım.
Arabayı yapmaya dışından başladım. Dış gövdeyi yaptıktan sonra pencereler, ardından da kapı çizgilerini yerleştirdim.
En sona da tekerlekler ve far kaldı. Tekerleklerin yuvarlaklığının püf noktası verdiğim yüksekliğin yarısı kadar border vermek oldu. (height:86px iken border-radius-topleft:43px vermek gibi)
Çalıştırabilseydim CSS3 gradient özelliğini kullanarak harikalar yaratacaktım ama başka sefere artık:)
Umarım bir an önce CSS3′ü tüm tarayıcılar destekler de bir çok şeyi yapma kabiliyetimiz artar ve zamandan kazanırız.
CSS
<style type=“text/css”>
*{margin:0; padding:0; border:0}
body{ font-size:62.5%;background:#E3EF77 }
#Kapsayici{ width:754px; height:530px;margin:0 auto; margin-top:100px;position: relative; }
/*Tüm elemanları kapsar / Contains all the elements*/
#Araba-Govdesi{ width:730px; height:368px; background:#899f23; border:1px solid #777;
-moz-border-radius-topright:40px; -moz-border-radius-topleft: 40px; }
/*Arabanın dış gövdesi / Body of the van */
#Pencereler{ background:#fff; height:100px; padding:50px 0 0 40px;
-moz-border-radius-topright:40px;-moz-border-radius-topleft: 40px;
border-bottom:2px solid #777} /*Pencereler / Windows div*/
.Kutu{height:86px; float:left; margin-right:20px; border:1px solid #777;}
/*Pencereleri ve tekerlekleri belirleyen kutular /
Kutu means Box, defines windows and Tekerlekler*/
.Beyaz{ background:#fff}
/*Kutuların içinde kullanılan arkaplan renkleri / Background colors used in boxes */
.Acik-Gri{background:#e0e4e7}
.Koyu-Gri{ background:#777}
.W35{ width:35px } /*Ön tanımlı uzunluklar/ predefined widths*/
.W86{ width:86px }
.W130{ width:130px }
.W180{ width:180px }
.W250{ width:250px }
/*Önceden tanımladığım köşe yuvarlaklıkları/ Predefined rounded corner*/
.topright{ -moz-border-radius-topright:20px;}
.topleft{ -moz-border-radius-topleft:20px;}
.bottomright{ -moz-border-radius-bottomright:20px;}
.bottomleft{ -moz-border-radius-bottomleft:20px;}
.Izgara {background:#e0e4e7 } /*Pencerelerin solundaki havalandırma / Grilled box */
.Izgara ul li{border-bottom:3px solid #777; list-style-type:none; height:10px}
#Cizgi1{width:2px; height:370px; background:#e0e4e7;margin-left:358px;position:absolute;}
#Cizgi2{width:2px; height:370px; background:#e0e4e7;margin-left:560px;position:absolute;}
#Tekerlekler{width:580px; height:90px; top:320px;left:100px; position:absolute; }
.Teker1{border:2px solid #777;-moz-border-radius:43px}
.Teker2{border:2px solid #777;-moz-border-radius:43px; float:right}
.Far{position:absolute; top:270px; right:0; width:20px; height:40px; border:1px solid #777}
@font-face {font-family: Mama;src: url(’Mama.ttf’)}
h1,a { font-family: Mama, verdana; position:absolute ;left:20px; color:#641F7F}
a{ font-size:1.4em; padding-top:70px;}
h1{font-size:36px; padding-top:20px;}
</style>
HTML
<div id="Kapsayici"> <div id="Araba-Govdesi"> <!--Kapı Çizgileri / Door lines--> <div id="Cizgi1"></div> <div id="Cizgi2"></div> <!--Pencereler / Windows--> <div id="Pencereler"> <!-- Havalandırma/Grilled box--> <div class="Kutu W35 topleft Izgara "> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <!-- Havalandırma bitiş/Grilled box ends--> <div class="Kutu W250 topleft Acik-Gri "></div> <div class="Kutu W180 topleft topright Acik-Gri"></div> <div class="Kutu W130 topright Acik-Gri"></div> <!--Pencereler bitiş /windows finito!--> </div> <h1>CSS3 - Camper </h1> <a href="camper.jpg" target="_blank">Orjinal camper</a></p> </div> <!--Tekerlekler/Tires--> <div id="Tekerlekler"> <div class="Teker1 Kutu W86 Acik-Gri"></div> <div class="Teker2 Kutu W86 Acik-Gri"></div> </div> <!--Far / Light--> <div class="Far topright bottomright Acik-Gri"></div> </div>
