bildirgec.org - basarozcan - yazdıkları

tüm tarayıcılara uyumlu yan sanayi css3 ürünleri

basarozcan — Thu, 11 Mar 2010 09:02:00 GMT

css3 please ile tüm tarayıcılarda css3 kodları uyumluluğu

Büyük bir heyecanla beklememize karşın tüm tarayıcıların desteklemesi için uzun süreer beklememiz gerekecek olan CSS3'ün tasarım dünyasına getirdiği bazı yenilikleri şimdiden kullanabileceğinizi biliyor muydunuz? Evet belki hepsinden haberiniz vardı, belki bir kısmını kullanıyorsunuz ama CSS3 Please! uygulaması ile tüm tarayıcılarda bazı CSS3 kodlarını şimdiden kullanabilmek mümkün.

CSS3 Clean uygulaması yuvarlak köşeler , gölge (shadow), renk geçişi (gradient), RGBA, obje çevirme (rotation) ve font-face kullanımı için tüm tarayıcılarla uyumlu css kodunu otomatik olarak oluşturuyor.

Yapmanız gereken ise, sizin tasarımınızda ölçeklendirdiğiniz objelere uygun ayarları site üzerinden manual olarak değiştirmek ve son halini sitenizin stil dosyasının içine eklemek.

Destek verilen CSS3 kodları:

border-radius
box-shadow
rgba
rotate
@font-face

İlginizi çekebilecek yazılar

ilgili yazılar

Bu yazı basarozcan 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

font-face artık tüm tarayıcılarda!

basarozcan — Fri, 30 Oct 2009 10:03:00 GMT

Eğer web tasarımı ile uğraşıyorsanız @font-face tanımlamaları ile istediğiniz fontları sitenizde kullanmanın olağan olduğunu biliyorsunuzdur. OTF ve TTF gibi değişik uzantılı fontları birçok tarayıcıda sorunsuz olarak gösterebiliyorsunuz. Fakat iş bu fontları Internet Explorer’da kullanmaya gelince malesef tahmin edeceğiniz gibi yine bir sorunla karşı karşıya kalıyoruz.

@font-face desteği aslında Internet Explorer 4’ten beri Microsoft’un desteklediği bir deklerasyon. Fakat bu destekleri biraz tutucu. Çünkü IE serisi sadece EOT (Embedded Open Type) fotmatlı fontları desteklemekte. Bu formatın seçilmesinin nedeni ise bu formatlı font dosyalarının kopyalanarak kişisel kullanıma izin vermemesidir.

Bu yazıda sevdiğiniz fontları nasıl EOT formatına çevireceğinizi ve sitelerinizde nasıl kullanacağınız konusunda ipuçlarını kullanarak sitelerimizin albenisini arttıracağız.

Tarayıcılar ve desteklenen formatlar

Birinci Adım: Ücretsiz bir font seçin
Internet’te birçok ücretsiz font sunan site var. Lisans problemleri ile karşılaşmak istemiyorsanız tamamen ücretsiz lisansla yüklenmeye sunulan fontları bularak sitelerinizde kullanmaya bakın. Bu tarz fontların sıralandığı fontex.org mutlaka göz atılması gereken kaynaklardan.

fontex

İkinci adım: Yazı tipi dönüşümü
Kendinize en uygun fontu seçtiniz ve lisans konusunda da probleminiz yoksa, artık elinizdeki yazı tipi dosyasını birçok tarayıcı tarafından desteklenecek formatlara çevirme zamanınız geldi. Font Squirrel @font-face Kit Generator servisi oldukça başarılı ve ihtiyaçlarımıza en iyi cevap veren site. Bu program TTF ya da OTF formatındaki fontlarınızı EOT, SVG ve WOFF formatındaki fontlara çeviriyor. SVG formatı bir vektör grafik standardı olmasının yanında içine aktarılan fontlar ile de Opera, iPhone ve Google Chrome için font-face desteği sağlıyor.

Üçüncü Adım: CSS’e giriş!
Evet artık tüm tarayıcılar için @font-face desteği sağlamak için elimizde her türlü ekipman mevcut. Artık CSS kodlarımızı yazabilir ve fontlarımızı kullanmaya başlayabiliriz. İlk olarak gerekli @font-face deklerasyonu. (bu tanımlamayı kit generator içinde gelen stylesheet.css dosyasında da bulabilirsiniz.)

@font-face { font-family: 'CuprumFFU Regular'; src: url('Cuprum.eot'); src: local('CuprumFFU Regular'), local('CuprumFFU'),
url('Cuprum.svg#CuprumFFU') format('svg'),
url('Cuprum.otf') format('opentype');
}

Bu tanımlamayı yaptıktan sonra örnek olarak h1 etiketinde fontumuzu kullanalım.

h1 { font-family: 'CuprumFFU Regular', Helvetica, Arial, sans-serif;
}

Sonuç: Daha iyi bir görünüm
Sitelerinizdeki yazıların göze hitap etmesini istiyorsanız,EOT ve SVG destekli font-face’i mutlaka kullanmalısınız.

Çeşitli tarayıcılarda görünümler

Bu bildiri themeforest'in blog'unda yer alan how to achieve cross browser font face support yazısından derlenerek yazılmıştır.

Çeşitli Font Çeviriciler

İlginizi çekebilecek yazılar

Beni takip edin
basarozcan: RSS, Twitter, FriendFeed

ilgili yazılar

tüm tarayıcılara uyumlu yan sanayi css3 ürünleri (0)

Bu yazı basarozcan 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

hayatı kolaylaştıracak 11 css3 tekniği

basarozcan — Thu, 10 Sep 2009 09:03:00 GMT

Hayatı kolaylaştıracak CSS tekniği nasıl mı olur? İşte cevabı... CSS3 birçok yeni nesil tarayıcıda desteklenmeden önce CSS ile yapmaya uğraştığımız birçok efekt vardı. Örneğin Yuvarlak Köşeler (rounded corners) yapmak için ekstra bir imaj ya da javascript dosyası kullanmak zorundaydık. Lakin CSS3 ile beraber ,bu çok kullanılan ama yapılması biraz külfetli olan efektler, rahatça yapılmaya başlanacak. Bu yazıda CS3 desteği ile gelen ve kod yazma süresini oldukça aza indirecek efektleri göreceğiz.

1. Yuvarlak Köşeler
jquery eklentisini kullanarak, yada top şeklindeki bir imaj dosyasını CSS Sprite tekniği ile bölerek yapabildiğimiz yuvarlak köşeleri artık kısa bir kod ile yapabileceğiz.

rounded corners


border-radius: 10px;  
-moz-border-radius: 10px;  
-webkit-border-radius: 10px;

2. Eleman Gölgesi
Türkçe mealini eleman gölgesi olarak telaffuz edebileceğimiz Box Shadow'u aslında jQuery'nin dropShadow eklentisi ile kolayca yapmak mümkündü. Şimdi ise sadece 3 satırlık bir kod ile yeni nesil tarayıcılarda bu özelliği kullanmak mümkün.

box shadow


box-shadow: 5px 5px 2px black;  
-moz-box-shadow: 5px 5px 2px black;  
-webkit-box-shadow: 5px 5px 2px black;

3. Yazı Gölgesi
CSS ile yazı gölgesi yapabilmek için eskiden iki divi üst üste getirip, araya çok ufak bir top margin ve left margin koyuyorduk. İki div'de farklı renklerde aynı yazının bulunmasına da önem gösteriyorduk. CSS3 ile yazı gölgesi desteği de geldi.

text shadow

Eski tip yazı gölgesi
<style type="text/css"> .font { font-size: 20px; color: #2178d9; } .fonts { position: relative; } .fonts .font { position: absolute; z-index: 200; } .fonts .second { top: 1px; color: #000; z-index: 100; } </style> <div class="fonts"> <span class="font">The quick brown fox jumps over the lazy dog.</span> <span class="font second">The quick brown fox jumps over the lazy dog.</span> </div>

Yeni tip yazı gölgesi
<style type="text/css"> .font { font-size: 20px; color: #2178d9; } .font { text-shadow: 0 1px 0 #000; } </style> <span class="font">The quick brown fox jumps over the lazy dog.</span>

4. Font Desteği
Cufon, sIFR, FLIR gibi servisleri sırf CSS'in desteklemediği fontlar için kullanmadık mı? Hala çok popüler olan bu servisler gelecekte tarihin tozlu sayfalarında yerlerini alacaklar. Çünkü CSS3 ziyaretçinin bilgisayarında bulunmayan fontları indirerek gösterime izin vermekte.

font face

Yaşasın @font-face
<style type="text/css"> @font-face { font-family: 'Loyal'; src: url('loyal.ttf'); } .font { font-family: Loyal; font-size: 20px; } </style> <span class="font">The quick brown fox jumps over the lazy dog.</span>

5. Opaklık
Zaman zaman png dosyaları ile sağladığımız, zamanla css'nin de içine sızan opacity'i CSS3 ile tüm tarayıcılar destekleyecek.

Eski usul opaklık ayarlama
<style type="text/css"> .box { opacity: .6; // all modern browsers (this is CSS3) -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE 8 filter: alpha(opacity=60); // IE 5-7 } </style> <div class="box">  </div>

CSS3 ile opaklık ayarlama
<style type="text/css"> .box { opacity: .6; } </style> <div class="box">  </div>

6. RGBA Desteği
Herkes RGB'nin red, green ve blue (kırmızı, yeşil ve mavi) olduğunu bilir. Ama nedir bu A harfinin anlamı? A harfi Alpha'nın baş harfidir. Alpha ise transparanlık değerini belirlemektedir. Daha önce php ile sağlanan rgba desteği artık CSS3 ile server tabanlı bir uygulama olmaktan kurtuluyor.
CSS3 kullanımı
<style type="text/css"> .box { background: url(rgba.php?r=239&g=182&b=29&a=.25); } </style> <div class="box">  </div>

7. Arkaplan Resmi Boyutu
Arkaplan resmini Windows'taki döşeme usulü kutumuzun içine yapıştıran CSS'e resmin boyutlarını belirtmek için bol satırlı tanımlamalar yapardık.
<style type="text/css"> .box { position: relative; overflow: hidden; } .box img { position: absolute; top: 0; left: 0; width: 50%; height: 50%; z-index: 100; } .box .content { position: absolute; z-index: 200; } </style> <div class="box"> <div class="content">  </div> <img src="http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg" alt="" /> </div>

Fakat dediğimiz gibi CSS3 hayatı kolaylaştırıyor.
<style type="text/css"> .box { background: #ccc url(http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg) no-repeat; -webkit-background-size: 50%; /* Safari */ -o-background-size: 50%; /* Opera */ -khtml-background-size: 50%; /* Konqueror */ } </style> <div class="box">  </div>

8. Çoklu Arkaplan Resmi
Bir içeriğin arkaplanına iki resim üst üste atayabilmek için, iç içe iki div tanımlamalı, bir de üsttteki resmin arkaplanını transparan yapmak zorunda kalırdık. Çok şükür ki CSS3'e gelen özellik ile bir elemana birden çok arkaplan resmi tanımlayabilecek, bunları sıralayarak hangisinin daha üstte görüneceğini belirleyebileceğiz.

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;
}
</style>
<div class="box">
    <!--CONTENT-->
</div>

9. Hücreler
bir paragrafı iki hücre halinde sayfaya yansıtmak için çok kez javascript'e başvurduk, sayfalarımızı gereksiz kodlarla doldurduk. CSS3 bu uğraşımıza çare bulmuş ve nihayet hücrelendirmeyi bünyesine katmış.

hücrelendirme

<style type="text/css">
.columns {
-moz-column-count: 2;
-webkit-column-count: 2;
}
</style>
<div class="columns">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>

10. Kenarlık Resmi
Border olarak tanımladığımız ve sadece çizgiden ibaret olan bu elemanlar sizin de canınızı sıkmadı mı? Eğer cevabınız evet ise, CSS3 kullanarak borderlarınıza istediğiniz resimleri koymanızda hiçbir sakınca yok!

border'a resim koymak css3 ile mümkün olacak

<style type="text/css">
.box {
border-width: 20px;
-webkit-border-image: url(images/border.png) 27 round;
-moz-border-image: url(images/border.png) 27 round;
border-image: url(images/border.png) 27 round;
}
</style>
<div class="box">
    <!--CONTENT-->
</div>

11. Animasyonlar
jQuery ile yapabildiğimiz animasyonlar Webkit'li tarayıcılarda hiç javascript kodu yazmadan görülebilecek.

<style type="text/css">
.box {
position: relative;
-webkit-transition: top 300ms linear;
}
.box:hover {
top: 20px;
}
</style>
<div class="box">
    <!--CONTENT-->
</div>

Sözün Özü
Yakın gelecekten CSS3'ün iyice yaygınlaşması ile bir işe ayrılan zamanda azalmalar olacaktır. Her ne kadar IE başta olmak üzere tarayıcıların birbirleriyle olan uyumsuzluğuna bir çare bulunamasa da CSS3, birkaç popüler uygulama için bu uyumluluğu sağlayacak gibi görünüyor.

Not: Bu yazının orjinali Nettuts sitesinde 11 Classic CSS Techniques Made Simple with CSS3 başlığı ile yayınlanmış olup, bildirgeç için Tükçe'ye çevrilmiş ve yazar tarafından yorumlanmıştır.

İlgilinizi çeker mi?

Beni takip edin
basarozcan: RSS, Twitter, FriendFeed

ilgili yazılar

Bu yazı basarozcan 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

firefox 3.5 ile web geliştiricileri sevinecek

basarozcan — Thu, 16 Apr 2009 15:52:00 GMT

Firefox 3.5 ile web geliştiricilerinin yüzü gülecek

Mozilla tarafından geliştirilmekte olan Firefox 3.5 sürümü web geliştiricilerinin yüzünü güldürecek cinsten yenilikler ile gelmeye hazırlanıyor. Birçok gelişmekte olan web standartını destekleyecek biçimde piyasaya çıkacak olan Firefox 3.5, tasarımcıların hünerlerini sergileyebilmesi için birçok olanak sunacak.

Firefox 3.5 ile desteklenecek standartlar ve yapılacak yenilikler aşağıda listelendi.

HTML5 desteği
Daha önce yeni html5 tag'leri ve kullanım şekilleri yazısında belirtilen özelliklerin bir kısmı firefox 3.5 ile kullanılabilir olacak.

Audio ve video tag'leri desteklenecek.
Siteler arasında sürükle ve bırak (drag & drop) özelliği etkin olacak.

CSS cephesinde gelişmeler

@font-face desteklenecek. Sitelerdeki font'lar ziyaretçilerin bilgisayarlarına indirilip siteler her font ile sorunsuzca görünebilecek.
::before ve ::after geliştirilecek
media sorgulamaları geliştirilecek
-moz-opacity desteği kalkacak. opacity özelliği eklenecek
text-shadow ile yazıları gölgelendirme desteklenecek
word-wrap özelliği eklenecek
ziyaretçinin bilgisayarında tanımlanan link bilgilerine ulaşım için -moz-nativehyperlinktext desteği gelecek
-moz-window-shadow desteği gelecek
-moz-transform desteği gelecek

CSS3 hakkında bilgilenmek için bu siteye göz atabilirsiniz.

DOM cephesindeki gelişmeler

DOM workers desteği
Geolocation API desteği
JSON'un DOM'a entegrasyonu

Javascript cephesindeki gelişmeler

Object.getPrototypeOf() ile prototip seçimi desteği
string'ler için yeni trim metodları

Geliştirmeler sadece bunlarla sınırlı kalmamış. Mozilla'nın geliştirme sayfasından diğer tüm yenilikleri öğrenebilir ve başlıklara tıklayarak açıklamalı bilgilere ulaşabilirsiniz.

Kaynak: developer.mozilla.org

Bakmadan geçmeyin:

CSS ile şekil çizmek çok kolay!

[mb]Siteleriniz IE8'e uyumlu mu?

CSS Sprite kullanmak artık daha kolay!

CSS Sprite'ların kullanış alanları

yeni html5 tag'leri ve kullanım şekilleri

Twitter ile takip
Friendfeed ile takip
RSS ile takip

ilgili yazılar

Bu yazı basarozcan 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

CSS ile şekil çizmek çok kolay!

basarozcan — Mon, 13 Apr 2009 19:16:00 GMT

Tasarımlarımızı XHTML ve CSS’e geçirirken bazen çok basit şekilleri bile kimi zaman resim olarak kaydederek tasarımlarımıza ekliyoruz. Oysa bu davranış bize ekstra bir “http isteği” olarak dönmüş oluyor. Daha önce CSS Sprite'ların kullanım alanları yazımda bu istekleri azaltarak performansı nasıl yükselttiğimiz konusuna az da olsa değinmiştim. Bu yazıda ise minik ve basit resim dosyalarından kurtularak http isteklerini minimum düzeye çekecek ve sitelerimizin performansını arttıracak. Pingdom ile performansınızı ölçmeniz mümkün.

Dertlere derman css border
Başlıktan da anlayabileceğiniz gibi bu şekilleri çizmek için elimizdeki en önemli özellik border olacak. İstediğiniz şekli çizmek için border’ları solid yapmalı ve genişliklerini ayarlamalıyız.
Şimdi ufak bir örnekle border’ları nasıl ayarlamamız gerektiğini görelim.

.cisim{
    width:0;
    height:0;
    line-height:0;
    border-top: 50px solid magenta;
    border-right: 100px solid green;
    border-bottom: 100px solid red;
    border-left: 50px solid yellow;
}

<span class="cisim"></span>

farklı renkteki border'lar

Burada rahatlıkla görebilmeniz için border değerlerini çeşitli renklerde tanımladım. Boyutsuz olan span elemanının etrafında üçgensel olarak 4 farklı bölge oluşuyor. İşte bu bölgeleri kullanarak çeşitli dörtgenler, içbükey çokgenler ve üçgenler çizerek tasarımlarımızı tamamlayacağız.

Konuşma balonu örneği
Tasarımlarda artık sıkça karşılaşılan elemanlardan biri de konuşma balonları. Genelde Blog sitelerinin yorumlar bölümünde, twitter kullanan kişilerin kişisel sitelerinde sıklıkla karşımıza çıkıyor konuşma balonları. Tasarımların olmazsa olmaz elemanı olan bu konuşma balonlarının yazı yazılan kısmını yapmak genelde imaj dosyası gerektirmeyen bir şekilde yapılabiliyor. Lakin balonun ucundaki oklar CSS şekilleri tekniğini çözene kadar imaj dosyası ile yapılmaktaydı. Artık bu imaj dosyasını kullanmadan maksimum iki satırlık bir css stili ile hem bandwith’ten hem de performanstan kazanç sağlayacağız.

ilk adım

Gördüğünüz gibi konuşma balonumuz hazır. Balonumuzu dizayn ettikten sonra bu balonu 2 parçaya ayırarak çalışmamıza devam edeceğiz.

ikinci adım

Okun biçimlendirilmesi
İki parçaya bölünen elemanda en çok okun biçimlendirilmesi konusuna yoğunlaşacağız. Çünkü diğer eleman basit bir div biçimlendirilmesi ile oluşturulabiliyor. Önce okun değerlerini belirleyelim:

üçüncü adım

Gördüğünüz gibi 25 e 25 piksellik bir ok tasarladım. Arkaplan olarak ben bildirgeçte arka plan resmi olmadığından beyaz kullandım.

Kodlamaya giriş
Öncelikle oku oluşturmak için bir span elemanı yaratıyoruz.

<span class="ok"></span>

Şimdi bu oku biçimlendirmek için head etiketleri içinde stilimizi tanımlıyoruz.

 <style> .ok{ width:0; height:0; line-height:0; border-top: 25px solid #999999; border-right: 25px solid white; border-bottom: none; border-left: none; } </style>

Yarattığımız span’ın genişlik, yükseklik ve satır genişliği yüksekliğini 0 belirterek bu şekilleri oluşturabilmemiz mümkün oluyor. Daha sonra border-top tanımlaması ile okumuzun yükseklik değerini ve hangi renkde olacağını belirtiyoruz. Border-right ile de genişlik değerini ve okun arka planında bulunan renk değerini giriyoruz. Eğer arka planda resim kullandıysanız bu değeri transparent olarak girmelisiniz.

Gördüğünüz gibi okumuz oluştu. Şimdi yapmamız gereken ise ana kutucuğun altına bunu iliştirmek. Bunun için ben 300px genişliğinde bir p tanımladım. Ve bunu balon’umun içine koydum. Sonra da okumu bu p elemanından sonra yerleştirdim.

 <div class="balon"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p><span class="ok"></span></div>

Okumuzda da bazı düzenlemeler yaparak balonumuzu son haline sokuyoruz:

 <style>
.balon{ width:340px;}

.balon p{ width:300px; line-height:20px; background:#999; color:#fff; font-size:20px; padding:20px; margin:0; float:left; }

.ok{ width:0; height:0; line-height:0; border-top: 25px solid #999; border-left: none; border-bottom: none; border-right: 25px solid white; float:left; margin: 0 0 0 250px; }

</style>

İşte bu kadar basit! Artık basitçe şekiller üretebilir ve tasarımlarınızda kullanabilirsiniz. Benim kullandığım birkaç başka şekil de var. Bunları da inceleyelim.

tüm şekillerin çizimi

Şekil 1
Basit bir üçgendir. Tüm border değerlerine eşit ölçülü sayılarda atama yapacağız fakat border-top hariç hepsi renksiz olacaktır. Border-top ise bizim şeklimizin rengini verecektir.

 <span class="cisim"></span>
<style>
.cisim{
            width:0;
            height:0;
            line-height:0;
            border-top: 50px solid #999;
            border-left: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-right: 50px solid transparent;
        }
</style>

Şekil 2
Her ölçüsü değişik olan bir üçgendir. Border değerlerinin tümü farklı ölçülerdedir. Border-top cismin rengini belirler, diğerleri ise arkaplan rengini belirler.

 <span class="cisim"></span>
<style>
.cisim{
            width:0;
            height:0;
            line-height:0;
            border-top: 50px solid #999;
            border-left: 20px solid transparent;
            border-bottom: 50px solid transparent;
            border-right: 100px solid transparent;
        }
</style>

Şekil 3
Bayrak gibi bir görüntüsü olan bu şekil nerede işinize yarar bilinmez ama çokgenlerin oluşturulması konusunda bir örnek olsun.

 <span class="cisim"></span>
<style>
.cisim{
            width:0;
            height:0;
            line-height:0;
            border-top: 50px solid #999;
            border-left: 50px solid #999;
            border-bottom: 50px solid #999;
            border-right: 50px solid white;        
}
</style>

Şekil 4
Bu şekil gördüğünüz gibi şekil 1’in tam tersi. Bu yüzden şekil 1’de border-top değerini cismin rengi olarak göstermişken burada border-bottom’da cismin rengini belirliyoruz.

 <span class="cisim"></span>
<style>
.cisim{
            width:0;
            height:0;
            line-height:0;
            border-top: 50px solid white;
            border-left: 50px solid white;
            border-bottom: 50px solid #999;
            border-right: 50px solid white;    
}
</style>

CSS ile basit şekilleri bu şekilde çizebilmek mümkün. Biraz yaratıcılık biraz da CSS hakimiyeti ile daha karışık şekiller de çizmek tabi ki mümkün.

Bakmadan geçmeyin:

Web Tasarımında sıkça karşılaşılan hatalar

[mb]Siteleriniz IE8'e uyumlu mu?

CSS Sprite kullanmak artık daha kolay!

CSS Sprite'ların kullanış alanları

yeni html5 tag'leri ve kullanım şekilleri

Twitter ile takip
Friendfeed ile takip

ilgili yazılar

Bu yazı basarozcan 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ımında sıkça karşılaşılan hatalar

basarozcan — Thu, 09 Apr 2009 10:06:00 GMT

Bir site tasarlamak sanıldığı kadar kolay bir iş değildir. Tasarımın güzelliği ayrıntılarda gizlidir ve o ayrıntılar web tasarımında o kadar fazladır ki bazen gözümüzden kaçan hatalar başkasının gözüne çok batabilir. Bu makalede sıkça yapılan hatalara dikkat çekilmiş ve tasarımda bize kolaylık sağlayacak öğelere değinilmiştir.

Tipografi
Web sayfalarında en çok göze hitap eden öğeler yazı karakterleridir. Uygun font’ların kullanılması tasarımlarımızı daha da çekici kılar. Fontların değişik işletim sistemlerindeki görünüşüne buradan bakabilirsiniz. Buradaki listede kullanıcı memnuniyetini en üst düzeye çıkarmak için “yazı tipi ailelerini” (font family) nasıl ayarlamanız gerektiğini bulabilirsiniz.

İkiden fazla Font Kullanmayın!
Tasarımlarda çok fazla sayıda font kullanmak sakıncalı olmaktadır. Eğer farklı font kullanmak istiyorsanız, başlıklar için ayrı düz yazılarınız için ayrı olmak üzere toplam 2 font belirleyin ve kullanın. Örneğin Başlıklar için “IMPACT” yazılar için “ARIAL” kullandıysanız, diğer sayfalarda da bu seçimleri kullanın. Ayrıca her font değişik alt, üst değerler ve satır yüksekliği kullanmaktadır. Bu değerleri karşılaştırmak için TypeTester programını kullanabilirsiniz.

KÖTÜ

İYİ

sans ile serif düşman gibidir!
Aslında bu bir kural değil ama yine de güzel gözükmediği için kural gibi söylenebilir. Sakın sans ailesine sahip bir font ile sans-serif ailesine sahip bir font’u beraber kullanmayın. Hoş bir görüntü oluşturmuyorlar.

Gördüğünüz gibi iki farklı aileye ait karakterler arasında büyük bir görünüş farklılığı bulunmakta. Eğer kullanmak isteğiniz varsa en azından A List Apart’taki makaleye bir göz atın.

Doğru yazı boyutunu seçin
CSS ile genelde yüzde, em ve piksel ile boyutlandırma kullanmaktayız. Kendi boyutlarınızı belirlemek için testler yapın ve ideali bulmaya çalışın. Referans olarak bazı ölçüler verilebilir. Örneğin paragraflar için %62.5 kullanılabilir. Fakat bunun yerine em ya da piksel kullanırsanız daha çok verim alabilirsiniz. Burada bilmeniz gereken 10 pikselin 1 em’e karşılık geldiğidir. Bunu hesaba katarsak 14px yani 1.4em paragraflar için yeterli bir boyuttur. Başlıklar içinse nispeten daha büyük ve fark edilebilecek boyutlar kullanmalısınız. 14 piksel paragrafınız varsa 18 piksel ile 24 piksel aralığında bir başlık kullanmak çok uygun olacaktır. Tabi bu değerlerin font’tan fonta değişmesi gerektiğini unutmayın.
KÖTÜ

İYİ

Satır Aralarına Dikkat!
Satır aralarındaki dev boşluklar sizin de dikkatinizi dağıtmıyor mu? Siteler Photoshop’ta tasarlanırken anti-alias özelliği açık olduğu için satır araları gözümüze daha güzel görünebilir. Ama tarayıcılarda böyle bir özellik bulunmadığından sayfamız daha farklı görünür. Eğer genelde 16 piksellik karakter kullanıyorsanız aralığınızda 16 piksel ile 18 piksel arasında olmalıdır ki göze daha hoş gelsin.

Renkler iç dünyanın aynasıdır!
Renkler çoğumuzun en çok dikkat ettiği şeydir. Ama bir kez daha hatırlatmakta yarar var. Arka planları ayarladıktan sonra yazı rengini deneyin ve kesinlikle yakın tonlar seçmeyin. Arka plan ve yazı renginiz olabildiğince birbirine zıt olsun ki yazılarınız dikkat çeksin. Eğer renkler konusunda referans alacak bir kaynak istiyorsanız Adobe Kuler, ColorCombos ve ColourLovers’ı kullanmaktan çekinmeyin.
İYİ

KÖTÜ

Aman hizaya dikkat!
Öğelerin sayfa içindeki hizalamalarına çok dikkat edin. Sayfanın göze hoş gelmesi için öğelerin bir blok gibi birbiriyle ilişkili görünmesi tasarımı çekici kılar. Eğer Amerika’yı yeniden keşfetmeye ne gerek var diyorsanız hizalama konusunda kullanabileceğiniz birkaç CSS Çatısı (Framework) mevcut. 960 Grid Sistemi bu konuda tavsiye edilebilir.

KÖTÜ

İYİ

Aralıklara dikkat edin!
Aralıklar yani CSS dilinde konuşmamız gerekirse border ile içerik arasındaki aralığı belirten padding değerini en uygun biçimde kullanmaya çalışın. İçeriğiniz ne birbirine çok yapışık ne de birbirinden çok fazla uzakta olsun.
KÖTÜ

İYİ

Elemanlar bir arada dursun
Sayfada bulunan ve birçok elemanı kapsayan blokları birbirinden çok uzakta tutmayın. Bu davranış içeriğin bir bütünmüş gibi görünmesini engeller. Oysa Ufak aralıklar ile yerleştirilen bloklar sayfayı bir arada tutarak ilgi çekici olur.
KÖTÜ

İYİ

Aralıklar konusunda tutarlı olun
Bu kadar çok aralıklardan konuştuktan sonra son konu ise sayfanın genel görünümündeki aralıkların önemi. Örneğin sayfanızı Header, Nav, içerik, sidebar ve footer olarak bölmelere ayırdıysanız, bu bölmeler arasındaki boşlukların hep sabit olmasını sağlayın. Aksi takdirde düzensiz sayfalarınızın hesapları ile boğuşmak zorunda kalabilirsiniz. Eğer 960GS gibi bir çatı kullanıyorsanız, sistem aralıkları yönetmek konusunda size yardımcı olacaktır.

Bu makale, “Common Mistakes in Web Design” ismiyle Marko tarafından http://blog.themeforest.net için yazılmıştır.

ilgili yazılar

Bu yazı basarozcan 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

[mb]Siteleriniz IE8'e uyumlu mu?

basarozcan — Sun, 22 Mar 2009 08:28:00 GMT

Microsoft; Firefox, Opera, Safari, Chrome gibi tarayıcılarla yarışmaya çalışırken Web Tasarımcıları da uyumluluk okyanusunda boğulmamak için zamanla yarışmaya başladılar. IE8'in kararlı sürümünü internette yayınlayan Microsoft, yeni bir sorunu da piyasaya sürmüş oldu.

IE8'in kararlı sürümü çıktı!

IE8'in internete etkisi
IE8, kısa bir süre önce bazı ayrıntılarını duyduğumuz CSS2.1'i desteklemekte. CSS2.1 ise hali hazırda gelişmekte olan CSS3'ün bazı özelliklerini bünyesinde bulundurmakta.

Hal böyle olunca tasarımcılar hem CSS2.1 kullanmak için hem de sitelerinin uyumunu kontrol etmek için buradan IE8'i indirebilir.

Uyum Sorunu mu yaşıyorsunuz?
Siteleriniz IE8 ile uyumsuzsa satırlarca kodu yeniden düzenlemek için uğraşmanıza gerek yok. Microsoft uyum sorununu aşmak için basit bir denetleyiciyi IE8'e yerleştirmiş. Bir META etiketi sayesinde ziyaretçinin IE8'ini IE7 uyumluluk modunda çalıştırabilirsiniz.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Kısa vadeli bir çözüm olan bu meta etiketi, sitelerinizi uyumlu hale getirene kadar size yardımcı olacaktır.
Kaynak: davidwalsh.name

Bu yazı basarozcan 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

CSS Sprite kullanmak artık daha kolay!

basarozcan — Thu, 19 Mar 2009 11:48:00 GMT

Daha önce CSS Sprite tekniğinden "css sprite'ların kullanış alanları" başlıklı yazımda bahsetmiştim. Eğer bu yazıyı okumadıysanız bu tekniğin yararını kavrayabilmeniz için okumanızı tavsiye ederim. Bu yazıda ise bu tekniği satırlarca kod yazmadan nasıl uygulayabileceğimizi anlatacağım.

1. adım: Kullanılacak Resmin Yaratılması
Matt Varone'un yapmış olduğu CSS Navigation Bar Code Generator uygulamasına önceden yaptığımız sprite dosyamızı yüklüyoruz. Ben rehberde örnek olarak aşağıdaki butonları kullanacağım.

örnek sprite

2. Adım: Ayarlamalar
Resmi yükleyip ikinci adıma geçiyoruz. Bu sayfa Menü tasarımı için yapıldığından dolayı uygulama sizden menünün ismini yazmanızı ve horizontal (yatay) ya da vertical (dikey) özelliklerinden birini seçmenizi istiyor. Bu seçimi yapıp bir sonraki adımda menümüzün sayfa yüklendiği anda gösterilecek halini seçmemiz isteniyor.

3. Adım: Ana Katmanı Seçmek
Bu adımda yatay menü yapıyorsanız yatay, dikey olarak tasarladıysanız dikey olarak menünün ilk elemanlarını seçmeniz gerekmekte. Eğer uygun bir seçim yaparsanız uygulama size onay mesajı göstererek bir sonraki adıma geçmenize izin veriyor.

Ana Katman

4. Adım: Ana Katmanı Bölümlere Ayırmak
Bu adımda Seçtiğiniz Ana katman size gösterilir. Butonları tek tek belirlemeniz isteniyor. İlk butonu belirledikten sonra Confirm tuşuna basarsanız bir sonraki tuşu seçmeniz sağlanıyor. Tüm tuşları bu şekilde seçtiğinizde uygulama otomatik olarak son adıma geçiyor.

Tuşların Seçimi

5. Adım: Kontrol ve Download
Buraya kadar tüm işlemleri doğru gerçekleştirebildiyseniz sistem size demo sayfasını gösterecek ve onaylamanız halinde zip'li dosya içinde kodunuzu indirmeye sunacak.

Notlar
Bu uygulama CSS Sprite'lar sayesinde Menüler oluşturmaya yarar. Bu yüzden liste koduyla uygulama yazılmıştır. CSS bilginiz yeterli seviyedeyse ufak bir düzenleme sonucunda değişik amaçlarla da kullanmanız mümkündür.

ilgili yazılar

Bu yazı basarozcan 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

PayPal'dan Türk Bankalarına vize çıktı

basarozcan — Tue, 10 Mar 2009 14:28:00 GMT

PayPal, Türkiye'deki üyelerine ödeme yapacağının işaretini, kısa bir süre önce Türkçe olarak yayına geçerek müjdelemişti. Ardından gelen güncelleme ile Paypal Türk Banka kartlarına ödeme yapma işlemine başladı ve 5$ kesinti yaparak Türkiye'deki kullanıcılarına yıllardır bekledikleri bu hizmeti sunmuş oldu.

Bu gelişmelerden sonra PayPal cephesinden beklenen son hamle de yapıldı. Artık PayPal hesabımızdan Türkiye'deki banka hesaplarımıza para aktarabileceğiz.

Ufak Kesintiler
Yıllardır çok istediğimiz para transfer işlemleri ücretsiz değil. 0 ila 599 TL arası para transfer işlemlerimizde PayPal bizden işlem başına 6 TL komisyon alıyor. Yıllardır hiç transfer yapamayan kullanıcılar için bu miktar pek sorun teşkil etmemekte. Ayrıca 600 TL üzerindeki para transferi işlemlerinizde ise bu hizmet ücretsiz olarak sağlanmakta.

ödeme ekranı

Ödeme Süreleri
PayPal hesabınızdan banka hesabınıza para gönderdiğinizde işleminiz 5 ila 7 gün arasında gerçekleştirilecek. Amerikan bankaları için bu süre 3 ila 4 gün arasında değişiyor. Amerika'dan biraz uzun bir sürede işlemimiz onaylansa da artık ödeme alabilmek bu süreyi beklemeye değecektir.

Sorunlar Sona Erdi
Bazı bankaların Kredi Kartına yapılan para transferi işlemlerini durdurması ve müşterileri arayarak durumun Maliyeye bildirileceğini söylemesi kredi kartlarına ödeme alanların canını sıkmıştı. Fakat hesaplara havale hizmeti ile PayPal'ın kullanımı Türkiye'de en sorunsuz biçime geldi.

PayPal artık Türkiye'de aktif bir şekilde yoluna devam ediyor. Böylece yurtdışı sitelerden güvenle ürün alabilecek, ticaret yapabileceğiz. Ayrıca PayPal kullanarak sitemiz üzerinden yapılan satışlardan elde ettiğimiz kazancı hesabımıza havale edebileceğiz.

ilgili yazılar

Bu yazı basarozcan 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

Adobe Flash kullanmadan sIFR yapımı

basarozcan — Mon, 03 Nov 2008 12:22:00 GMT

Son zamanlarda web tasarımcılarının alet çantasında en önemli bölmede bulunan sIFR uygulaması ile tasarladığımız siteler artık göze daha güzel görünüyor. İsterseniz demosuna bir göz atın!

CoffeeCup - sIFR Font Maker

sIFR nedir?
Eğer bir web tasarımcısı olarak bu uygulamayı henüz duymamışsanız siteleriniz biraz eski moda görünüyor olabilir. sIFR, ziyaretçilerde bulunmayan yazı tiplerini sitenizde kullanabilmenizi sağlıyor. Bu konu hakkında Muhammet Sevim'in kullanım kılavuzu makalesini ve sIFR tanıtım makalesini okuyabilirsiniz. Ayrıca uygulamanın fikir babası olan Mike Davidson'ın konu hakkındaki makalelerini de buradan inceleyebilirsiniz.

Flash Neden gerekli?
Bu tasarımcının hayatını kurtaran uygulama basit bir swf dosyası içeriyor ve bu dosya tüm karakterleri tanıyarak sitenizin yazıtiplerini değiştiriyor. Bu swf dosyasını açıp içine kullanmak istediğiniz yazıtipiyle 3 harf yazıyorsunuz ve kaydediyorsunuz. Tabi Bu dosyayı açabilmek ve kaydedebilmek için Adobe'nin paralı Flash programı gerekiyor. Eğer Flash programına sahip değilseniz sizi ücretsiz bir sIFR yaratıcı programıyla tanıştırayım:
CoffeeCup - sIFR Font Maker!

sIFR kullanılan bir sayfa

Ücretsiz bir çözüm
CoffeeCup'ın sIFR Font Maker programı tüm tasarımcılar için ücretsiz indirmeye sunulmuş. Resmi siteden programı indirdikten sonra ufak bir kurulum yapıyorsunuz ardından kullanmak istediğiniz yazı tipinin normal, kalın ve italik tarzlarının dosya yolunu programa göstererek Save As butonuna basıyor ve sIFR'de kullanacağımız swf dosyasına sahip oluyoruz.

Web tasarımcıların alet çantasında kesinlikle bulunması gereken sIFR Font Maker'a şu an için tek alternatif online hizmet sunan sifrgenerator sitesi. Fakat bu sitede sadece TrueType yazıtiplerini kullanmak zorunda kalıyoruz. Oysa CoffeeCup bize Opentype ve diğer yazıtiplerini de kullanma imkanı sunuyor.

ilgili yazılar

Bu yazı basarozcan 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