bildirgec.org - etiketler: css dersleri

bedava css kitabı

XPoSeidOnx — Fri, 13 Aug 2010 07:13:00 GMT

Fatih Hayrioğlu'nun hazırladığı pdf formatında 251 sayfalık harika bir kitap.
Profesyonel bir anlatımla css'te harikalar yaratmaya hazır olun.
İndirme sayfası

Bu yazı XPoSeidOnx tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Harika Web Tasarımı Yaratıcılığı: 50+ Örnek ve İlham Kaynağı

LeBron — Tue, 21 Apr 2009 12:28:00 GMT

Bu yazıda web tasarımı ve geliştiricileri için yaratıcı örneklere ulaşabileceksiniz. Aynı zamanda html ve css ile ilgili bazı dersler bulunmaktadır. bunlar size ilham kaynağı olacaktır.

1 - Padding Top (ders)

2 - Text Shadow (metin gölgelendirme) (ders)

3 - Z-Index (ders)

4 - List-Style-Type (ders)

5 - Import Libraries (kütüphaneleri içeri aktarmak) ders

6 - Web Design Drawing (Web tasarım çizimi)

7 - Syntax Error (Sözdizimi hatası)

8 - Desk (masa)

9 - End Smile (gülümseme sonu)

10 - Vera Graphic Design (vera grafik tasarımı)

yazının devamı için buraya tıklayın.

ayrıca aşağıdaki yazılarda ilginizi çekebilir.

101 Yüksek Kaliteli Css ve XHTML Web Şablonu

101 Daha Kaliteli Css ve XHTML Web Şablonu

Web Geliştiricileri İçin En İyi 50 Firefox Eklentisi

35+ Faydalı Photoshop Eklentisi

22 Fantezi Photoshop Dersi ve 125 Photoshop Fırçası

25 İlham Veren Logo Tasarım Kaynağı

40 yüksek kaliteli simge seti

ilham kaynağı olabilecek 30 güzel müzik web sitesi

En iyi 5 web tasarım aracı

70 Kurumsal Maskot Tasarımı

20 Güzel Klasikleşmiş Photoshop Fırça Seti

kaynak: desizntech
diğer yazılarım
yazılarımı rss üzerinden takip edebilirsiniz

ilgili yazılar

Bu yazı LeBron tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Size Sıfırdan CSS3 Öğretecek 20 Kaynak

pinkfloyd — Mon, 06 Apr 2009 06:42:00 GMT

Her ne kadar W3C'nin CSS3 tanımlamaları üzerinde çalışmalarını tamamlamamış olsa da, Mozilla Firefox, Opera ve WebKit tabanlı tarayıcılar (Safari, Chrome) halihazırda CSS3'ü tamamen ya da kısmen destekliyor durumda.

Bir web geliştiricisi olarak modern ve gelecekteki web standartları hakkında bilgi sahibi olabilmek önemlidir. Diğer geliştiricilerden bir adım önde olmak için yazının devamında bulacağınız CSS3 hakkında 20 mükemmel kaynak size CSS 3 öğrenmenizde yardımcı olacaktır.

1. CSS3 İlerleme Raporu

CSS Çalışma Ekibi tarafından geliştirilen CSS3 İlerleme Raporu web sitesi tüm CSS3 modüllerinin geçerli durumlarını belirtiyor. Özellikle CSS3'ün gelişimine katkıda bulunan ya da bulunmak isteyen geliştiriciler için bu kaynak, üzerinde çalışılan alanları görüp nereden katkıda bulunabileceğinize karar vermede yardımcı olacaktır.

2. CSS3'e Başlangıç

Web Monkey, web sitesi üzerinde CSS3'ün temellerini ele aldığı bir kılavuz bulunduruyor. İlgili kılavuz sayesinde halihazırda modern tarayıcılar tarafından desteklenen bazı CSS3 özelliklerini bulacaksınız. Eğer CSS3'e yeni başladıysanız bu makale size oldukça yardımcı olacaktır.

3. CSS3 İle Aşamalı İyileştirme

CSS3 tanımlamalarını ilk olarak destekleyen öncü tarayıcılardan olan Opera'nın geliştiricilerine yönelik hazırladığı web sitesi üzerinde, CSS3'e uygulanabilecek aşamalı iyileştirme yaklaşımından bahsediliyor. Bu yaklaşım sayesinde CSS3 kodunuzu modern tarayıcılar için iyileştirirken, CSS3 yeniliklerini desteklemeyen eski tarayıcılar tarafından da temel seviyede kullanılabilmesini sağlayabiliyorsunuz.

4. CSS'nin Erişilebilirlik Özellikleri

Taşınabilir avuçiçi aygıtların ve ekran okuyucuları gibi alışılagelmiş olmayan web tarayıcılarının popülerliğinin günden güne artmasıyla, CSS Geliştiricileri Grubu, CSS3'te erişilebilirliği üzerinde durulması gereken öncelikli konuların başında getiriyorlar. Bu W3C belgesi şu anda kullanılan ve önümüzdeki dönemde kullanılması planlanan CSS3 tanımlamaları üzerindeki erişilebilirlik özelliklerini ve taslaklarını içeriyor.

5. CSS3'e Giriş (Design Shack)

5 bölümlük bu yazıdizisinde Design Shack, okurlarına CSS3 dünyası hakkında mükemmel bilgiler veriyor. Kolay anlaşılır bir dilde yazılmış olan bu belge, CSS3'ün temellerinden bahsederken, sınırlar ve metin efektleri gibi CSS3 ile hayatımıza girecek olan tekniklerden bahsediyor.

6. CSS3.info

CSS3 . Info, CSS3 hakkındaki her şey hakkında bir web sitesi. Site yetkilileri CSS3 haberlerini, röportajlarını ve web üzerindeki kaynakları düzenli olarak paylaşıyor. CSS3.info sitesi ayrıca CSS3 Önizlemeleri adı verilen bölüm altında CSS3 modüllerini ve özelliklerini, onları destekleyen Opera ve WebKit tabanlı tarayıcılar üzerinde deneyebilmenizi sağlıyor.

7. CSS Gelişmiş Anahat Modülü

CSS3 tanımlamalarındaki popüler modüllerden birisi olan Gelişmiş Anahat Modülü'nü öğrenin. W3C'nin üzerinde çalıştığı bir taslak olan bu belge, özellikle biz geliştiriciler için CSS3'ün ne kadar mükemmel olacağını anlamanıza yardımcı olacak.

8. Altı Soru: Eric Meyer ile CSS3 Hakkında

Six Revisions web sitesi, ödüllü CSS uzmanı Eric Meyer ile CSS3 hakkında konuşma şansına kavuşmuş. Bu röportajda Eric Meyer, CSS3'ün hangi özelliklerinin kendisini en çok heyecanlandırdığı, CSS3 tanımlamalarının geliştirilme yaklaşımı ve CSS3 ile JavaScript ilişkisi hakkında sorulara yanıt vermiş. Kesinlikler önerilir.

9. WebKit Tabanlı Tarayıcılar İçin CSS3 Özellikleri

Bu canlı tanıtımda Safari gibi WebKit tabanlı tarayıcılarının hangi sürümlerinde hangi CSS3 özelliklerinin desteklenip desteklenmediği belirtilirken, ilgili özelliklerinin hangilerinin iPhone üzerindeki Safari tarayıcısı üzerinde kullanılıp kullanılamayacağını da belirtiyor.

10. WaSP Komünitesi CSS3 Geribildirimi

Bu makale, Web Standartları Projesi'nin (WaSP) CSS Geliştiricileri Grubu'na CSS3'ten Neleri Beklediğinizi Söyleyin başlıklı bloguna verilen yanıtların bir özetini içeriyor. Özellikle dünyanın çeşitli yerlerindeki web geliştiricilerinin CSS3 tanımlamaları hakında neler düşündüğünü ve beklediğini görmek açısından oldukça faydalı bir makale.

11. CSS3 Öznitelik Seçicileri

CSS3'teki en büyük iyileştirmelerden birisi de oldukça karmaşık ve özgün DOM seçimlerine olanak veriyor olması. Dev.Opera'daki bu kılavuz, CSS3'te görülecek yeni öznitelik seçim özelliklerinin neler yapabileceğini görmenizi sağlıyor.

12. W3C: Seçiciler

W3C'nin CSS3 seçicilerine yönelik çalışma taslağı özellikle CSS3'teki seçiciler konseptine giriş açısından mükemmel bir kaynak.

13. CSS3 Ekibi İle Sohbet

W3C'nin eski CSS çalışma grubu başkanı Bert Bos ile yaptığı bu röportaj, CSS3'ün geliştirilme aşamasına CSS'nin lider uzmanının gözünden bakabilmenizi sağlayacak.

14. CSS3'ün Temel Problemleri

Matt Wilcox'un yayımladığı bu makale, CSS3'te gözlenen problemlerden bahsediyor.

15. CSS Çalışma Grubu Blogu

Kısa adı CSS WG olan ve CSS standartlarının gelişiminden sorumlu olan CSS çalışma grubunun blogu düzenli olarak güncelleniyor ve CSS3 hakkında kullanışlı bilgileri içeriyor.

16. CSS3 İle Yuvarlatılmış Köşeler

Dünyanın en meşhur web geliştiricileri tarafından hazırlanan ve yıllık olarak yayımlanan çevrimiçi dergi 24 Ways web sitesi üzerinde, CSS3 ile yuvarlatılmış köşeler oluşturmaya yönelik olan ve CSS uzmanı Andy Budd tarafından yazılmış bir makale bulunuyor. Bu kılavuzda CSS3'ün stilleme iyileştirmelerinden biri olan CSS arkaplanları kullanmadın yuvarlatılmış köşeler oluşturmayı gösterecek.

17. Web Sitenizi CSS3 İle Geleceğe Taşıyın

Smashing Magazine'nin CSS3 hakkında yayımladığı ve benim de türkçeleştirdiğim grafik/web tasarımcısı Chris Spooner tarafından yazılan bu makale, CSS3 tanımlamaları kullanarak web siteleri oluşturmayı anlatıyor. Özellikle şu an CSS3 kullanarak neler yapılabileceğini görebilmek açısınan faydalı bir makale.

18. CSS3 Saydamlığına Giriş

Bu makale, CSS Renk Modülü'nün bir parçası olan CSS3 saydamlık özelliklerinden bahsediyor.

19. Öznitelik Seçicileri İle Form Tasarlamak

Dev.Opera web sitesi üzerindeki bu makale, öznitelik seçicilerinin faydalarını, "yaparak öğren" tarzındaki bu rehberde, formları stillemek üzerinden anlatmaya çalışıyor.

20. Sizi CSS3 İle Tanıştıracak 5 Teknik

NETTUTS tarafından yayımlanan ve bir süre önce benim de çevirisini kodaman üzerinde yayımladığım bu makale, CSS3'ü kullanarak nasıl öğrenebileceğinizi gösteriyor. Makalede sayfa elementlerine bırakma gölgeleri uygulamak ve elementlerin saydamlığını değiştirmek gibi kullanışlı CSS3 özelliklerinin tanımlamalarını bulacaksınız.

CSS3 Kullanmaya Başladınız mı?

CSS3'ü web geliştirme pratiğinize dahil ettiniz mi? Eğer CSS3'ü öğrenmeye başladıysanız CSS3'ün yeni özelliklerini ne kadar biliyorsunuz? Deneyimlerinizi ve düşüncelerinizi yorumlarınızla paylaşın.

Size Sıfırdan XX Öğretecek Kaynaklar Serisi

CSS3 Hakkında Yazdığım Yazılar

ilgili yazılar

Bu yazı pinkfloyd tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

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

pinkfloyd — Mon, 02 Mar 2009 07:37:00 GMT

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-Discuss.org

CSS-Discuss CSS ile ilgili sorunlara yönelik çok geniş katılımcı sayısına sahip bir elektronik posta forumudur. Dilerseniz listeye dahil olup soru sorabilir ya da soruları cevaplayabilir, arşivi ziyaret edip sorunuza yanıt arayabilir, ya da wiki üzerinde gezinere içeriğe katkıda bulunabilirsiniz.

CSS Kopya Kağıdı

CSS Kopya Kağıdı özellikle fazladan bir yardıma ihtiyacınız olduğunuzda kullanabileceğiniz her zaman yanınızda taşıyabileceğiniz eşsiz bir kaynak. Tek sayfalık PDF belgesini bilgisayarınıza indirip yazıcıdan çıktısını alabilirsiniz. Belge tüm seçicileri ve özellikleri kapsıyor.

CSS Shorthand Kopya Kağıdı

Eğer CSS dosyalarınızın boyutunu indirgemek ve performansını arttırmak istiyorsanız, CSS Shorthand Kopya Kağıdı bu alanda mükemmel bir kaynak. Yine tek sayfadan oluşan bu PDF dosyası sayesinde bazı teknikleri kullanarak daha verimli CSS kodları yazabileceksiniz.

Web Geliştirici Eklentisi

Chris Pedrick'in Web Geliştirici eklentisi genel web geliştirme ve CSS çalışmalarınıza yeni bir soluk ve esneklik katıyor. Araç çubuğunu kullanarak bir elementi etkileyen tüm stilleri listeleyebilir, CSS kaynak kodunu görebilir, blok elementlerini boyutunu görebilir ve CSS'yi etkisizleştirerek sayfanızın nasıl görüntülendiğini görebilirsiniz.

Firebug

Bir diğer eklenti olan ve bence tüm web geliştiricilerinin bilgisayarında sorgusuz sualsiz kurulu olması gereken, parmaklarınızın ucuna sayısız CSS bilgisini getirebilen Firegug ile herhangi bir web sayfası üzernde JavaScript ve HTML'nin yanısıra CSS kodunuzu düzenleyebilir, izleyebilir ve hatalarını ayıklayabilirsiniz. CSS ile çalışan herkes için Firebug, kodunuzu hızlıca düzenlemek ve test etmek için ideal bir araç. Özellikle kodunuzun sitenize nasıl etki edeceğini kodunuzu yazdığınız anda eş zamanlı olarak görmek istediğinizde oldukça kullanışlı hale geliyor.

CSS-Tricks

CSS-Tricks, CSS'ye gönül vermiş pek çok kişinin abonesi olduğu popüler bir blog. CSS-Tricks yazarı Chris Coyler, CSS'yi her açıdan ele alan makaleleri ve dersleri düzenli olarak yayımlıyor. Uzun süredir yayımda olan sitenin arşibi CSS hakkında daha fazla şey öğrenmek isteyen herkes için birşeyler sunuyor. Chris'in makalelerin yanısıra site bünyesinde yardım alabileceğiniz aktif bir forum da bulunuyor.

CSS Kullanarak Herşeyi Yapmak: 50+ Yaratıcı Örnek ve Ders

Noupe bir süre önce CSS'de yapabileceğiniz şeylere yönelik 50 örnek adlı bir makale yayımladı. Eğer yeni fikirler arıyorsanız bu makale mükemmel bir kaynak teşkil ediyor. Eğer özel bir soruna yönelik yardım ediyorsanız, sorununuza yönelik bir kaynak listede yer alıyor olabilir. By yazıda listeleri stillemek, formlarla, altlıklarla ve görsel değiştirmeleri, görsel konumlandırmaları, diğer görsel teknikleri, metin ve bağlantı efektleri, navigasyon, galeriler, yuvarlatılmış köşeler gibi pek çok alanda kaynak mevcut.

CSS Anahatları: 40+ Ders,, İpucu, Demo ve En İyi Deneyimler

Noupe'den bir diğer mükemmel makale daha. Bu makale, CSS'nin belki de en çok baş ağrıtan sorunu olan anahatlara yönelik. eğer siz de anahattınızın istediğiniz gibi çalışmamasından şikayetçi iseniz, muhtemelen burada sorununuzun çözümü halihazırda mevcuttur.

CSS Sütunlarınızın Bozulmasının Ana Nedenleri

Warspire üzerinde yer alan bu kaynak, sütunlar ve anahatlarla çalışırken sık görülen sorunları gidermeye yönelik yardım içeriyor. Makale görülmesi muhtemel problemleri ve problemin çözümünü içeriyor. Çözümde, kullanılması gereken kodlar da yer alıyor.

Kaynak: Vandelay Design Blog

CSS Hakkında Yazdığım Diğer Yazılar

ilgili yazılar

Bu yazı pinkfloyd tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

css'de uzman olmanızı sağlayacak 20 css dersi

pinkfloyd — Sat, 14 Feb 2009 15:25:00 GMT

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.

1.3. CSS Tabanlı Navigasyon
Bu rehberin amacı fare imleci bir menü öğesi üzerine getirildiğinde ilgili öğenin ön plana çıkarılması ile sonuçlanan CSS tabanlı bir menü oluşturmak.

1.4. Şık CSS Menüsü
Bu makalede bazı sevimli Javascript efektleri kullanılarak oluşturulmuş özel bir navigasyon çubuğunun oluşturulma aşamalarını öğreneceksiniz. Mootools kütüphanesinin işlevselliği sayesinde bu efekt sadece 1.5 KB'a sığdırılmış durumda. Bununla da kalmıyor ve ilgili menü hem çapraz tarayıcı desteğini bünyesinde barındırıyor hem de erişilebilir olduğu için arama motoru optimizasyonunu dikkate alanların gönlünü fethediyor.

1.5. Kayan Kapılar
CSS ile kayan kapılar tekniğinin nasıl kullanılabileceğine yönelik güzel bir makale.

1.6. Tanıtım Metni İçeren CSS Dikey Navigasyon
Navigasyon elementlerine tanıtım metni eklemenin yanısıra bu teknik sayfanız üzerindeki herhangi bir elemente açıklama eklenecek şekilde modifiye edilebilir. Örneğin profil adlarına, soru-cevap tarzındaki SSS sayfalarına, navigasyon elementlerine ya da diğer uygulamalara açıklama mesajları ekleyebilirsiniz.

1.7. CSS'de Sekmeli İçeriğin Üzerine Bindirme
Bu makalede Javascript kullanmadan ve çapraz-tarayıcı desteği bulunan, CSS ile hazırlanmış, bindirme desteği bulunan bir CSS sekmeli navigasyonun nasıl oluşturulabileceği anlatılmış.

2. CSS İle Yuvarlatılmış Köşeler

2.1. Box - Hepsi İçin Yuvarlatılmış Köşeler
Bu egzersizin amacı görsel olarak göze hoş gelen ve semantik olarak yazılmış en az miktarda kod kullanarak yuvarlatılmış köşeler oluşturmak. Ayrıca bu kutuların boyutu gerektiğinde değiştirilebilmeli de. İlk kutu için gerekli olan XHTML ve CSS kutunun hemen alt kısmında yer alıyor.

2.2. CSS'de Yuvarlatılmış Köşeler
CSS'de yuvarlatılmış köşeler oluşturmaktan bahsediyorduk ve arkadaşıma kendi yöntemimi gösterdim. Bunu gerçekleştirebilmek için diğer yöntemlerin de olduğunu biliyorum ancak bu yöntemlerin pek çoğı karmaşık HTML ve CSS kullanımını gerektiriyor. İç içe girmiş DIV'lerin tablo kullanmaktan çok daha iyi olmadığının farkına vardım. Bu sebeple benim yöntemim HTML ve CSS açısından fazla bir kod gerektirmiyor.

pinkfloyd'un notu: Her ne kadar burada arkadaşımız tablo kullanma yoluna gitmiş ancak siz sakın zorunda olmadıkça bu yöntemi denemeyin. Tabloları sitenizin anahat elementlerini oluşturmak için kullanmak yanlıştır.

3. CSS Fotoğraf Galerisi

3.1. Hoverbox Görsel Galerisi
Efekt için anchor bağlantısı kullanılmış zira IE'de :hover ast sınfının tek desteklendiği element bu. Her ne kadar kullandığım bu örnekteki tüm bağlantılarda # bağlantısını kullanmış olsam da siz görsellerin tam boyutlu sürümlerine bağlantı verebilirsiniz.

3.2. Çapraz Tarayıcı ve Çoklu Sayfa Destekli Fotoğraf Galerisi
Suckerfish HoverLightbox'dan esinlenmesine rağmen bu örnekte benim geliştirdiğim, metin yerine görsel kullanan çoklu sayfa anahat sistemini kullandım.

Suckerfish HoverLightbox'un aksine bu sürüm JavaScript'e ihtiyaç duymuyor ve sadece CSS kullanılmasına rağmen IE üzerinde sorunsuz çalışıyor.

3.3. Kayan Fotoğraf Galerileri
Bu galeri benim bugüne kadar geliştirdiğim en sade galeri. Dikey olarak 8:1 oranında sıkıştırılmış görselleri sırasız liste üzerinde kullanıyorum. Bu görsellerden birinin üzerine fare imlecinizi getirdiğinizde sıkıştırılan bu görseller tam boyutuna genişliyor. Kayan menü sistemimi temel aldığım bu örnekte metin yerine görsel kullandım. Herhangi bir küçük resim kullanmaya gerek yok ve tüm görsel önceden yükleniyor. Bu yöntem hem dikey hem de gösterildiği gibi yataay olarak kullanılabilir.

4. CSS Gölgeler

4.1. CSS Gölge Efekleri: Fuzzy Shadows
Bu makalede:

IE harici tarayıcılarda bir stil şablonunu nasıl gizleyebileceğimizi ve bu sayede ilgili belgenin doğrulanmasını engellememeyi,
IE5.5 ve IE6'da PNG saydamlığının nasıl doğru olarak görüntülenebileceğini,
Yukarıdakileri kullanarak nasıl gölge efekti oluşturabileceğimizi öğreneceğiz.

4.2. CSS Gölgeler
Bu makalede bir başka tekniği inceleyeceğiz. Diğer tekniklerin pek çoğu negatif marj kullanırken bu örnekte bağıl pozisyonlama kullanılarak nasıl gölge efekti oluşturabileceğimizi göreceğiz.

5. Diğer CSS İpuçları ve Hileleri

5.1. IE Çift Yüzen Marj Hatası
Eminim bununla pek çoğumuz boğuşmuşuzdur, zira en sık kullanılan css "hilelerinden" birisi de budur. eğer bu hata ile daha önce karşılaşmadıysanız hemen özetleyelim: ie6'da üzerine 'margin' uygulanmış yüzen (float) bir element kullanıyorsanız, bunun ilgili tarayıcı üzerinde doğru pozisyonlanmadığını göreceksiniz. ne şans ki ie6'nın bu hatasını gidermek çok basit.

5.2. CSS Çapraz Tarayıcı Saydamlığı
İster inanın ister inanmayın tüm tarayıcılar üzerinde CSS'nin saydamlık elementini doğru bir şekilde kullanmak mümkün. Bu teknikle IE, Firefox, Safari, Opera ve Netscape Navigator gibi eski tarayıcıları bile kapsayabiliriz.

5.3. Kapanır Tablolar: Bir Örnek
Aşağıdaki tabloların her bili "footcollapse" adı verilen bir sında dahiller. Bu sayede kullanılan betik ok görselini altlığa yerleştiriyor ve üzerine tıkladığında tablonun kapanıp açılabilmesini sağlıyor.

5.4. CSS İle İçerik Üzerine İçerik
Kapsayıcı üzerine fare imlecini getirdiğinizde halihazırda var olan içeriğin üzerinde yeni bir kapsayıcı belirecektir. Bu teknik position:relative tekniğini kullanarak statik içeriğin mutlak olarak pozisyonlanmış içeriğin üzerinde görüntülenebilmesini sağlıyor.

5.5. CSS Yakınlaştırma
Son zamanlarda metni yeniden boyutlandırabilme özelliğini barındıran bir web sitesinin yeniden tasarlanmasında çalışıyorum. Sitenin hitab ettiği kesimin yaş ortalaması biraz yüksek, bu sebeple büyük boyutlu metin kullanmak onlar için önem taşıyor. Ve siz insanların tarayıcılarında halihazırda bulunan bu özelliği kullanmaları gerektiğini söyleyip üzerime yürümeye başlamadan önce pek çok ziyaretçinin bu tip özelliklerin farkında olmadığını ve benzer özelliğin sitenin içine gömülmesinden memnun olduğnu hatırlatmak isterim.

5.6. CSS İle Oluşturulan ve Sonradan Beliren Görsel Açıklamaları
Bu örnekte ise görsel açıklaması ve tanıtım tekniğini bir arada kullandım. Görselin açıklamasını bir bağlantı içerisine dahil ettim. Yapmak istediğim şey ise ilgili açıklamayı kullanıcı görsel üzerine fare imlecini getirene kadar gizlemek.

Kaynak: DWS mg

CSS Üzerine Yazdığım Diğer Yazılar

ilgili yazılar

Bu yazı pinkfloyd tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

jQuery Kullanarak Satıriçi Metinlerin Rengini Değiştirmek

pinkfloyd — Sun, 11 Jan 2009 16:27:00 GMT

Sadece birkaç satır jQuery kullanarak istediğiniz bir metnin üzerine fare imlecini getirdiğinizde onun rengini değiştirmek çok kolay bir işlem. Nasıl mı? Yazının devamını okuyun.

Demo | İndir

Prensip
Bu betiğin yaptığı şey, bağlantıları (A Etiketikleri) seçmek, içeriğini ".one" adındaki bir sınıfa dahil olan SPAN'a dahil etmek ve ".two" adında bir SPAN elementi oluşturmak. SPAN "iki" A etiketi ile aynı içeriği taşıyor ve bağlantı metninin hemen üzerine konumlandırılmış.

Başlangıçta ikinci SPAN gizli. A elementinin üzerine fare imleci getirildiğinde, "two" SPAN elementi jQuery'nin fadeTo

Her zaman olduğu gibi IE yine problem çıkarıyor ve bu sebeple bunu çözecek bir yöntem uygulamak zorunda kaldık. Çünkü bir metin IE üzerinde yavaşça belirginleşirken IE o metnin görünümünü çirkinleştiriyor, bu sebeple de ilgili elemente bir arkaplan rengi uygulamamız gerekiyor.

Betiği sitenize nasıl ekleyeceksiniz?

Adım 1 - JavaScript

Yukarıda verdiğim bağlantı üzerinden betiğimi ve jQuery kütüphanesini içerek betiği indirin ve sitenizde bir yere yarlaştırın. Ben genellikle tüm JavaScript dosyalarını ana dizindeki "/js" klasörü içerisine yerleştiririm. Ardından aşağıdaki kodu kullanarak jquery kütüphanesini ve renk geçiş betiğini içeren js dosyasını ekleyin.

<script type="text/javascript" src='http://www.bildirgec.org/js/jquery.js'></script>
<script type="text/javascript" src='http://www.bildirgec.org/js/fadeLinks.js'></script>

Adım 2 - CSS
Aşağıdaki satırları CSS dosyanızın içerisine ekleyin. Bu bir demo olduğu için ben etiket seçicilerini kullandım. A için kullandığım stil öntanımlı olarak kullanılırken, SPAN için kullandığım stil fare imleci metnin üzerine getirildiğinde beliriyor.

a{
    color:#f30;
    font-weight:bold;
    text-decoration:none;
    }
a span.two{
    color:#069;
    cursor:pointer;
    }

Adım 3 - Özelleştirmeler
CSS seçicilerinizin düzgün yazıldığına emin olun ki bu betiği seçici olarak ekleyebilirsiniz. Yoksa bu stil belgenizdeki tüm A etiketlerine uygulanır. Seçicileri özelleştirmek CSS üzerinden ve betik üzerinden de yapılmalı. Örneğin eğer bu efekti id="content" kullanan bir div'e uygulamak istediğinizi varsayarak, kullanmanız gereken kod aşağıdaki gibi olmalı.

#content a{
    color:#f30;
    font-weight:bold;
    text-decoration:none;
    }
#content a span.two{
    color:#069;
    cursor:pointer;
    }

fadeLinks.js dosyanızda da selector adındaki değişken de şu şekilde görüntülenmeli.

var selector = "#content a";

Eğer geçiş efektinin hızı yavaşsa o zaman "speed" değişkeninin değerini değiştirebilirsiniz. Yavaş için "hızlı", normal için "normal", hızlı için "fast" değerini kullanın.

Betik, Windows'ta FF, IE7 ve Opera üzerinde, Mac'te FF ve Safari üzerinde denendi.

Demo | İndir

Kaynak: CSS Globe

Bu yazı pinkfloyd tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Sadece CSS İle Oluşturulmuş Animasyonlu İlerleme Çubuğu (Progress Bar)

pinkfloyd — Thu, 08 Jan 2009 17:17:00 GMT

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.

Biçimlendirme

Kodu mümkün olduğu kadar anlamlı tutabilmek için bazı değerlerde tanımlama listesi (Definition List - DL) kullandım. Tek bir ilerleme çubuğu için istediğiniz elementi kullanabilrsiniz. Ben paragrafları sevdiğim için örneğimde P kullandım.

<dd>
    <span><em style="left:100px">50%</em></span>
</dd>

Sol EM konumlandırması için satıriçi stil kullandım. Her iki değeri de aynı yere bir kerede yazmak daha elverişli.

Animasyon
Peki bu nasıl oluyor? Elbette animasyonlu gif imajı kullanarak. Onları hatırlıyorsunuz değil mi? SPAN elementinin 200px genişliğinde arkaplan imajı var ve bu imaj "sıfır"dan 200px'e kadar animasyon içeriyor. Hangi yüzdeyi kullanırsak kullanalım, imaj 200px'in sonuna kadar gidiyor ve sonra duruyor. Durma efekti ise daha önce bahsettiğim EM ile yapılıyor.

EM Konumlandırması

Örneğimde 200px genişliğinde ilerleme çubuğu kullandım. EM elementinin genişliği de 200px. Buradan her bir yüzdenin 2px genişliğinde olduğu anlamını çıkarmışsınızdır. Eğer EM'i doğru olarak itelemek istiyorsanız o zaman yüzde değerinizi 2 ile çarpmanız gerek. Örneğin %50'nin anlamı 100px genişliğinde, %24'ün anlamı 48px genişliğinde, %75'in anlamı 150px genişliğinde olacak... Buradan ne demek istediğimi anlamışsınızdır.

demo | indir

Kaynak: CSS Globe

Bu yazı pinkfloyd tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

css dersi veren yabancı siteler

mglass — Sun, 10 Aug 2008 19:27:00 GMT

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.

css kaynakları

Örnek olarak css dersi veren Tizag.com'a bir göz gezdirmenizi tavsiye ediyorum. buradaki içerik her ne kadar yabancı olsa da (ingilizce) uyguladığı formata az önce bahsettiğim turkçe içerikli css sitelerinde pek rastlayamıyoruz...

ne dersiniz böyle sitelerin de türkçeleri olsa ya da türkçe içerik sunan arkadaşlarımız için de ilham kaynağı olabilecek bir format sunuyor.

ilginizi çekebilecek bazı Yabancı css kaynakları:

Tizag.com: bu site sadece css değil bir çok konuda başlıklar halinde dersler veriyor...
Html.net/css gibi bir çok site bulabilirsiniz...

paylaşmak istediğiniz yerli ve yabancı css kaynaklarını yorumları kullanarak ekleyebilirsiniz.

ilgili yazılar

Bu yazı mglass tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

850+ Ücretsiz Css ve xhtml tema

bosasalla — Sat, 02 Aug 2008 18:47:00 GMT

850+ 1,2,3 kolonlu, rengarenk ve akışkan özellikleri ile kaliteli, CSS ve XHTML hazır tema şablonlarını, ücretsiz olarak indirebileceğiniz bir tema galerisi.

Örnek:

Temaları önizleme yapabilir ve temalar hakkında yorumunuzu site üzerinden diğer kullanıcılar ile paylaşabilirsiniz.İsterseniz kendi temanızı ekleyerek gelecek yorumlar ile tasarımınız hakkında bilgi sahibi olabilirsiniz.

Tema galerisine gidin.

ilgili yazılar

Bu yazı bosasalla tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

CSS Tasarımları: 40'dan fazla ders, ipucu ve en iyi örnekler

takip — Sat, 02 Aug 2008 10:27:00 GMT

css, yeni nesil web tasarımı için neredeyse kaçınılmaz hale geldi. Esneklik, tasarım güzelliği ve diğer pek çok nedenden ötürü artık css pek çok tasarımcının gözdesi konumunda.

Nope sitesi 40'dan fazla ders, ipucu ve örneği toplayarak harika bir liste hazırlamış. Bu listede pek çok yararlı css tekniğine ilişkin ders, yöntem bulmanın yanısıra; size ilham verecek harika tasarımlar göreceksiniz.

listeyi Türkçeleştirerek ve gereken yerlerde açıklama ekleyerek sizlere aktarıyorum:

CSS ile tasarım dersleri

1) CSS ile üç sütunlu tasarım

2) CSS kullanarak sayfa düzenini tasarlama

3) Yatay olarak kayan site yapımı

4) Oldukça basit iki sütunlu tasarım

5) 2 sütunlu Basit CSS tasarımı

6) Kutsal Kase (The Holy Grail) Düzeni - 3 sütun ve çok daha az sorun

7) CSS kullanrak sabit (fixed) genişlikte sayfa tasarlamak

8) Yeni başlayanlar için CSS

9) Çok sütunlu tasarımlar

10) Tek bir güzel tasarımın peşinde: Pek çok CSS tekniği anlatılarak bunları nasıl bir araya getirip güzel bir sayfa tasarlayabileceğimiz anlatılıyor.

11) PSD'den HTML'e, adım adım web tasarımı

12) xhtml / css tasarımları için kodlama ipuçları

13) CSS tabanlı şablon hazırlama

14) CSS ile sıradışı tasarımlar

15) Adım adım ileri düzey CSS tasarımları

16) Modern CSS tabanlı tasarımları anlamak için 6 ipucu

17) Bloglarda sık yapılan tasarım hataları

18) CSS ile sayfa düzeni

19) Bir saat içinde site yapmak

En iyi Tasarım Kaynakları

Aşağıdaki adreslerde bulunan örneklerin çoğu izin almadan kullanılabilir. Ancak bazıları e-posta ile onay almanızı gerektiriyor. Bunun için kullanmadan önce her bir sitenin telif hakları koşullarına bakmanız yeterli.

20) Örnek CSS Sayfa tasarımları

21) 3 sütunlu Kusursuz tasarım (CSS hilesi yok. SEO dostu. Resim ya da Javascript gerektirmez. iPhone uyumlu)

22) CSS Şablonları ve Örnekleri

23) Ironmyers tasarımları (Basit CSS tasarım sistemi. A sınıfı tarayıcı desteği)

24) CSSPlay (CSS layout listeleme)

25) Layoutgala (CSS hilesi olmadan geçerli css ve html'ler elde edin)

26) Glish (Tüm tarayıcılarda sorunsuz görünüm için tasarım teknikleri)

27) Thenoodleincident (değişken sütun sayılarıyla CSS kutuları)

28) The Layout Reservoir (Pek çok faydalı CSS tekniği)

29) İhtiyacınız olan tek CSS tasarımı (Aynı HTML'yi kulanan 10 farklı CSS tasarımı)

30) Bir başka Çok sütunlu tasarım

31) Liquid Designs (xhtml ve css ile her çözünürlüğe uyan tasarımlar için)

en iyi örnekler

css temelli tasarım için ilham arıyorsanız aşağıdaki web siteleri size yardımcı olacaktır.

32) Helldesign

33) Silverbackapp

34) OS communications informatique

35) Rockatee

36) Darrenhoyt

37) Makebetterwebsites

38) Elitetheme

39) Studio7designs

40) Brightcreative

Bu yazı takip tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage