bildirgec.org

Arkaplan, CSS‘nin çekirdek parçalarından birisidir. Az da olsa bilmeniz gereken en temellerindendir. Bu makalede, CSS’de arkaplanların temel özelliklerini öğreneceğiz. Arkaplanlar kullanılarak yapılabilecek bazı hileleri de makalede bulabilirsiniz. Ayrıca CSS3’ün yeni arkaplan özellikleri de makalede mevcut. Aslında bu adreste yazılmış olan makeleyi Türkçe’ye çevirip kendi sitemde yayınlamıştım. Kodaman’da da yayınlamak istedim.

CSS2’de Arkaplanlarla Çalışmak
Gözden Geçirme
CSS2’de 5 ana arkaplan özelliğimiz var. Bunlar;

• background-color : arkaplanın doldurulacağı düzgün rengi belirler.
• background-image : arkaplan için bir imaj belirler.
• background-position : belirlenen imajın arkaplanda nereye konumlandırılacağını belirler.
• background-repeat : belirlenen imajın arkaplanda tekrar etme durumunu belirler.
• background-attachment : belirlenen imajın arkaplanda kayma durumunu belirler.

Bu özellikler background denilen daha kısa bir özellik altında toplanabiliyor.Not edilmesi gereken önemli nokta, background özelliği, uygulandığı elemanın içeriğini (content) , iç boşluklarını (padding) ve kenarlıklarını (border) kapsar. Elemanın dış boşluklarını (margin) kapsamaz. Bu özellikleri Firefox, Safari, Opera ve şimdi Internet Explorer 8 desteklemektedir. Fakat aşağıda da görebileceğiniz gibi Internet Explorer 6 ve Internet Explorer 7’de background özelliği kenarlıkları (border) kapsamaz.

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.

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.

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 buradanbakabilirsiniz. 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 TypeTesterprogramını kullanabilirsiniz.

Çoğu web tasarımcının heyecanla beklediği ve w3c konsorsiyumu tarafından geliştirilen css3, uygulamada konfor sağlayan bir çok yeni özellikler vaad ediyor. İşte bu vaadlerinden birisi de hiç bir imaj öğesi kullanmaksızın, oval köşeleri olan elemanları tek satır kod yazarak üretebilmek.

HTML ve CSS Kod Örneği

http://www.youtube.com/watch?v=VErw0OHTxtw

pikifx fotoğraflarınız üzerine çevrimiçi çeşitli değişiklikler yapmanıza yarayan bir site. örneğin resimlerinizin boyutlarıyla oynayabilir, onlara çeşitli efektler katabilirsiniz.