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.
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.
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.
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.
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.
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.
CSS cephesinde gelişmeler
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>
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.
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.
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.
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.
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.
 |
basarozcan hakkında daha fazla bilgiyi profilinde bulabilirsiniz. |
bildirgec.org içeriği kullanıcıları tarafından üretilen kolektif bir blogdur.
