css teknikleri | bildirgec.org

CSS, güncel tasarımın temellerindendir. Yaklaşık 10 yıl önce yapılan basit tasarımları göz önüne alırsak, css'in ne kadar büyük bir önem taşıdığını görebiliriz. Birbirinden etkili css tekniklerine aşağıdan ulaşabilirsiniz.

1. Cross Browser CSS SlideShow

Sadece css kullanarak çapraz tarayıcı resim galerisi nasıl oluşturulacağı hakkında harika bir örnek.

2. CSS Based Image Maps

Sadece css kullanarak resim haritası oluşturma dersine ulaşabilirsiniz.

Bu yazı giriş ve orta seviyedeki CSS öğrencilerine hitab etmektedir. Eğer CSS'yi sıfırdan öğrenmek istiyorsanız, o zaman muhtemelen pek çok teknikle, hile ile ve ders ile karşılaşmışsınızdır. Bu yazıda, her web tasarımcısının bilmesi gereken pek çok temel CSS yeteneklerine dair kendi yaklaşımımı yansıtmaya çalıştım. Aşağıdaki makaleleri gerçekten seviyorum ve bu sebeple sizlerle paylaşmaya çalıştım. Umarım beğenirsiniz.

1- CSS Anahatları Oluşturmak

• CSS Anahatları Oluşturmak: PSD'yi XHTML'ye dönüştürmek için en iyi dersler
  
  
  

• CSS Anahatları: 40+ Ders, İpucu, Demo ve en iyi yöntemler
  
  
  

2- Stilleme ve Listeler Kullanma

CSS3 ile birlikte web tasarımında yaratıcılıkta patlamaya yol açacak pek çok yeni özellik bulunuyor. Bu özellikler CSS'nin stilleme kurallarında yer alıyor ve hazırlıkları halen süren CSS3 Tanımlaması'nda yer alıyor. Aslında bu yeni özellikleri müşterileriniz için geliştirdiğiniz web sitelerinde henüz önümüzdeki birkaç yıl boyunca kullanamayacaksınız ancak tasarım blogları ve Web tasarım komünitesini hedefleyen web siteleri, web tasarımının sınırlarını zorlamak için bu özellikleri kullanaral tasarımınıza biraz daha güzellik katabilirler ve endüstriyi geleceğe taşıyabilirler.

Yazının devamında bulacağınız 5 teknikle şimdiden geleceğin teknolojisi için hazırlık yapmaya başlayabilirsiniz.

1. Border Radius

Muhtemelen günümüzde en çok kullanılan CSS3 tekniği border-radius elementi. Standart HTML blok elementleri kare şeklindedir ve 90 derecelik köşelere sahiptir. CSS3 ile birlikte gelecek olan bu yeni özellik ile birlikte yuvarlatılmış köşeleri de web sitelerimizde kullanabileceğiz.

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

border-radius ayrıca köşelerin her birini ayrı ayrı stillememize de izin veriyor ancak bunun için kullanılan sözdizimi -moz ve -webkit için biraz farklı:

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

Bu özellik şimdilik Firefox, Safari ve Chrome tarafından destekleniyor. İlgili özellik ayrıca Twitter üzerinde de kullanılıyor.

Ayrıca bakınız:

• W3C şablonu
• CSS3.info'da border-radius
• Web Sanatı

Zaman zaman bir web tasarım ya da geliştirme projesi üzerinde çalışırken bir yardıma ya da rehbere ihtiyacınız olacaktır. Her ne kadar İnternet üzerindeki css kaynaklarının sayısı gün geçtikçe artsa da, bu yazıda CSS ile bir sorun yaşadığınızda size yardımcı olabilecek 10 adet gerçekten kullanışlı kaynağı listelemeye çalıştım.

Stack Overflow

Stack Overflow bir sosyal medya sitesi ve bir forumun kombinasyonundan oluşmuştur. Özellikle programlama ve geliştirmeye yönelik zengin içeriğe sahip bir sitedir (CSS, sitede tartışılan konulardan sadece biri). Stack Overflow'un amacı programcılara soru sorup onların sorularına cevap verebileceğiniz bir platform oluşturmak. Sitede herkes bir soru sorabilir (bir hesap bile açmanıza gerek yok) ve ardından sitedeki diğer kullanıcılar sorularınıza cevap verebilirler. Diğer kullanıcılar sitedeki cevaplara artı ya da eksi puan vererek en iyi cevabın seçilebilmesine yardımcı oluyorlar.

Günümüzde CSS kullanmayan site sayısı gittikçe azalırken buna ters orantılı olarak gelişen CSS araçlarının sayısı da gün geçtikçe artıyor. Her yeni bir araç, CSS geliştiricilerinin projeler üzerinde harcadıkları zamanı azaltmaya ve daha verimli kodlama yapmalarını hedefliyor.

İşte tam da bu noktada Back to Essentials web sitesi, İnternet üzerindeki CSS araçlarına yönelik bir liste hazırlamış. Ben de ilgilenen bildirgec okurları için bu yazıyı yayımlama gereği hissettim. Umarım işinize yarar.

Yazıtipleri

Typetester

Ekranda farklı yazıtiplerini karşılaştırabilmenize yarayan bir uygulama.

Em Calculator

Em Calculator, küçük bir JavaScript aracı olup genişletilebilir ve erişilebilir CSS tasarımları oluşturmanıza yardımcı oluyor. Pixel değerindeki verileri bağıl em birimlerine dönüştürüyor.

CSS'yi kodlamak kolay olabilir ancak buna rağmen her kodcuyu delirtebilecek bazı konseptleri de bulunmaktadır. Bu yazımızda kimilerine göre zor olan ancak anlaması oldukça kolay olan CSS derslerini bir araya getirerek CSS bilginizi bir adım daha ileriye taşımanıza yardımcı olacak dersleri inceledik.

1. CSS Sekmeler ve Navigasyon

1.1. Genişleyebilen CSS Sekmeleri Dersi
Genişleyebilir CSS sekmelerinin anlamı, sekmenin içerisindeki metnin uzunluğuna göre genişleyebilen sekme başlıklarıdır. Kodun özünde start.gif ve end.gif adında iki adet görsel bulunuyor. start.gif görseli boyutu genişletmek için kullanılırken end.gif görseli değişmeden kalıyor.

1.2. Gelişmiş CSS Menüsü
Bu rehberde Photoshop'taki watercolor efektini nasıl tasarlayabileceğiniz anlatılmış. Bu rehber size adım adım bir menü tasarımını nasıl kırpabileceğinizi ve ardından CSS kullanılarak nasıl onları bir araya getirebileceğinizi gösteriyor. Pek çoğunuz muhtemelen dikey ya da yatay menünün CSS ile nasıl kodlanacağını bilyorsunuzdur. Gelin şimdi bunu bir sonraki seviyeye taşıyarak CSS'nin position özelliğini kullanan gelişmiş bir menü tasarlayalım.