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.
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
2- Stilleme ve Listeler Kullanma
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
Ekranda farklı yazıtiplerini karşılaştırabilmenize yarayan bir uygulama.
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.
css web Tasarımını hızla değiştirmeye devam ederken, geçen hafta yazmış yolduğum onlarsız yapamadığımız 53 css tekniği başlıklı yazımın çok tutulması sebebiyle bu konuda daha derin bir kaynak araştırması yapma gereği duydum, eminim bu yazıyı tutan bir çok arkadaş elinin altında böylesine önemli ve işe yarar css örnekleriyle dolu bir kaynağın bulunmasından çok hoşnut olmuşlardır bunları bu şekilde listeleyip bildirgec‘e yazmamın asıl amacı , bulduğum döküman tarzı kaynakların sıkkullanılanlar listemde kaybolup gitmesidir… Neyse fazla uzatmadan CSS Tekniklerine kaldığımız yerden devam edelim…
işte Her zaman Kullanılacak 101 Css Tekniği…
101 – 1:web sitenizin kısa haber köşelerinde css Cinleri oluşturmak.
101 – 2: Css ile Kıvrımlı Köşeler oluşturmak
bu uygulamanın demosu için burayabakabilirsiniz.
101 – 3:Resim Yenileme tekniği
bu tekniğin açıklaması için Dave Shea‘nin yazdığı şu makale‘ye bakabilirsiniz.
101 – 4:CSS ile Geçişli Kapılar oluşturmak
101 – 5: Css ile Rounded Box oluşturmak
benim en çok hoşuma giden uygulama bu oldu. kaynak koduna da aynı sayfadan ulaşılabilmesi çok iyi.
evet yazımın diğer örneklerine buradan ulaşabilirsiniz . Siz bunları incelerken ben 2.Bölüm için hazırlıklarımı yapıyor olacağım yorumlarınız için şimdiden teşekkürler umarım beğenirsiniz…
Buradaki sayfada 53 farklı css tekniği listelenmiş.
Bu liste sayesinde css tabanlı navigasyon menülerinin, sekmelerin, tabloların, formların … nasıl yapılabileceğini öğrenebilirsiniz.
