css tutorial | bildirgec.org

CSS'de Yardıma İhtiyacınız Olduğunda Kullanabileceğiniz 10 Kaynak

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.

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.

Bu makalede sadece CSS kullanılarak oluşturulmuş bir ilerleme çubuğunun nasıl oluşturulabileceğini anlatmaya çalışacağım. Aslında hile çok basit. İhtiyacımız olanlar 3 element, bir kapsayıcı (container) ve 2 içiçe geçmiş element.

demo | indir

Konsept
Kapsayıcının arkaplanına güzel görünümlü bir resim yerleştirip kapsayıcının sabit yüksekliğini ve genişliğini belirteceğiz. İlk astımız (SPAN) ilerleme çubuğu görevini üstlenecek. İkinci astımızı (EM) ise ilerleme çubuğunun üzerine mutlak (absolute) konumlandıracağız ve onu sola doğru kaydırarak istediğimiz seviyeye çekeceğiz. EM, kapsayıcı ile aynı arkaplana sahip, bu sayede ilerleme çubuğunun bir süre sonra durduğu izlenimini vermiş olacağız.

css kitap

css'i anlatan bir çok websitesi var bunlardan türkçe içerik sunanlarını artık tanımayanınız yoktur... en başta Fatih Hayrioğlu gibi popüler blog sahibi arkadaşlarımız olmak üzere css bahçesi,css Rehberi gibi siteler bizlere css'i öğretmek için ellerinden geleni yapıyorlar. kendilerine teşekkür ederiz. css öğrenmek isteyenler için yabancı css kaynaklarını da tanıyalım.