bildirgec.org - lateralus - beğendikleri

web tasarımcıları için 16 firefox eklentisi

lateralus — Sun, 23 Aug 2009 11:45:00 GMT

mozilla firefox tarayıcılar arasından öne çıkmış bir tarayıcı. belkide onu öne çıkaran eklentiler, temalar ile kişiselleştirilebilir olması. daha önce bir çok yerde ( *, *, * ) web geliştiricileri için firefox eklenti listeleri yapılmıştı. şimdi de sitepoint tarafından web tasarımcıları için firefox eklentileri listelenmiş.

renk araçları

colorsuckr renk skalası yaratmaya yarayan bir araç.

en çok kullanılan eklentilerden biri olan colorzilla photoshoptaki Eyedropper ve ColorPicker araçlarının görevlerini yapıyor.

firepalette firebug ile çalışan, firebug'un css panelini zenginleştiren bir renk aracı.

palette grabber websitesindeki renkleri bir palet halinde kullanmanız için photoshop, illustrator, flash, fireworks, gimp, paintshop pro ve türevi programlara uygun formata getiriyor.

ölçme/ölçüm araçları

gridfox şablon çıkartmak için harika mı harika bir araç websitelerinin tablolarını gösterebiliyor. örnek bir uygulamasını göstereyim:

measureit en iyi ölçme aracı olarak gözüküyor. herhangi bir elementin kaç piksel olduğunu measureit cetveli ile birkaç saniyede ölçebilirsiniz.

web sayfasındaki herhangi bir resim dosyasının ( jpg, png, gif ) köşelerini yuvarlak ( overlay ) hale gelirmek için ideal bir eklenti pixelperfect. çalışması için firebug eklentisi gerekli

diğer araçlar

firebug 17,346,759 indirme sayısı ile firefox eklentilerinin gözdelerinden. ne işe yaradığını sorarsanız css, html ve türevi dosyaları görerek düzenlemenize yarıyor diyebilirim kısaca.

fontfinder'in tam karşılığı yazı tipi bulucu. eklenti açıklamasında ise firefoxta seçili tüm metnin stilleriin firefox veya thunderbird'e alın deniliyor. denemediğim için birşey söyleyemeyeceğim bu eklenti hakkında.

window resizer adında anlaşılacağı üzere pencereyi farklı boyutlarda göstermeye yarayan bir eklenti.

webdeveloper'da en çok indirilenler - 11,882,236 indirme- listesinde başı çekiyor. web tasarım ve geliştirenlerin kesinlikle kullanması gereken bir eklenti. web tasarımcı ve geliştiriciler için bir toolbar.

view dependencies 'page info', sayfa bilgisi penceresi altında resimde görüldüğü üzere sayfaların boyutlarını belirtiyor.

ekran görüntüsü araçları

abduction sağ tıklama ile web sayfasının bir alanını veya tüm websayfasını resim olarak kaydedebilirsiniz.

en kapsamlı ekran görüntüsü eklentisi kesinlikle fireshotdur. bir milyonu aşan indirme sayısıda bunun kanıtı olabilir. aldığınız ekran görüntüsü üzerinde hiçbir program kullanmadan kesme, kırpma ve benzeri işlemler yapabiliyorsunuz.

imagezoom adlı basit eklenti websayfasındaki resimlere daha dikkatli bakmanız için %400e kadar büyütebiliyor.

picnik eklentisi resimlere sağ tıkladğınıda edit image in picnik özelliği ile resim düzenleme sitesi picnik.com'da resmi düzenlemesini sağlıyor.

pixlr picnik eklentisi ile aynı işi pixlr.com ile yapıyor.

Bu yazı lateralus 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

Göz Atılası jQuery Eklentisi: AnythingSlider

lateralus — Wed, 19 Aug 2009 15:34:00 GMT

Web tasarımı ile uğraşanların artık can yoldaşı haline gelen jQuery, özellikle 3.parti ekletilerin de desteği ile oluşan ekosistemi ile, her derde deva bir ortamı web tasarımcılarına/geliştiricilerine sunmuş durumda.

Bir jQuery eklentisi olan AnythingSlider ile neredeyse, her türlü HTML içeriğini bir slayt halinde kullanıcılarınıza sunabileceksiniz.

Sonraki ve önceki slaytlar için butonlar, slaytların kendiliğinden değişebilmelerini sağlayabilme, herbir slayt için buton ekleyebilme, her bir slayta link ekleyebilme gibi özellikleri bulunan AnythingSlider ekletisinin, projelerinize nasıl uygulayabileceğinize dair bilgilerin de bulunduğu kendi sayfasına buradan gidebilir, demosunu buradan ineceleyebilir ve kendisini de buradan indirebilirsiniz.

Bonus++++++++++++:
+15 Adet Dolu Dolu jQuery Kaynak Sitesi
+jQuery Scrollable ile Web Sayfalarını Hareketlendirin!
+jQuery ve CSS ile Page Peel Effect'i
+jQuery Impromptu ile Şık Tasarımlı Mesaj Kutuları
+html formları için 25 harika jquery eklentisi
+Layouts için 6 Adet jQuery eklentisi
+Portfolio'nuz için Kullanışlı Bir jQuery Eklentisi
+JQuery ile Hoş Bir Menü
+15 adet Kullanıcı Dostu JQuery Tooltip Eklentisi
+Etkileyici Bildirimler Bir JQuery Eklentisi: Gritter
+jQuery İle Hazırlanmış Sürgülü Panel Eklentisi
+10 Adet Klas JQuery Eklentisi

Kaynak: AnythingSlider
algoz: Blog FriendFeed Twitter Facebook Email RSS

Bu yazı lateralus 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

30 Flash Tabanlı Fotoğraf Sitesi

lateralus — Fri, 14 Aug 2009 17:20:00 GMT

Ticari fotoğraf sever misiniz? Eğer öylese, bu yazı tam size göre. Bu yazıda ilham kaynağı olabilecek flash tabanlı 30 harika fotoğraf sitesi yer almaktadır. Çoğu tam ekran modunda tasarlanan bu fotoğrafların arasında inanılmaz çarpıcı olanlarda yer almaktadır.

1. Bergh

2. Timothy Hogan

3. Ciriljazbec

4. John Wright Photo

5. RW2 Studios

6. Werkstette

7. James Day Photo

8. Jeremy Cowart

9. Brook Pifer

10. David Lindsey Wade

11. Lyndon Wade

12. Manipulator

13. SasoKos

14. Filippa Smedhagen Sund

15. Miles Aldridge

16. Egofoto

17. Seo Hiroshi

18. Towndrow

19. FWA Photo

20. Steffen Jahn

21. Tom Nagy

22. Douglas Fisher

23. Shu Akashi

24. Joshua Stearns

25. Kurt Stallaert

26. Frieke

27. 0-Style

28. Vilamajo

29. Javier Ferrer Vidal

30. Albrecht Gerlach

kaynak: webdesignerwall.com

yazılarımı takip edebilirsiniz.

diğer yazılarım | kişisel blogum
friendfeed | twitter | delicious

Bu yazı lateralus 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

Ücretsiz Jquery Slider İçin En İyi 15 Örnek

lateralus — Wed, 12 Aug 2009 14:48:00 GMT

Jquery'nin her geçen gün daha fazla popüler olması ile ses, kaliteli eklentiler ve dersler geliştiriciler için çok faydalı olmaktadır. İçerik sürgüsü (content slider) web sayfa veya blogunuzda küçük bir alan içerisinde içeriğinizi göstermek için harika bir çözümdür. Popüler web sitelerinde çeşitli içerik sürgüleri yer almaktadır.

Eğer sizde content slider ile ilgileniyorsanız bu yazı çok faydalı olacaktır.

1. jFlow

Resmi Website | Test

Çok düzgün fotoğraf sürgüsü.

2. Create Featured Content Slider Using jQuery UI

Resmi Website | Test

Web sayfanızda en iyi içerikleri göstermek için kullanabileceğiniz bir uygulama.

3. Create Beautiful jQuery sliders tutorial

Resmi Website | Demo

Bu eğitici derste ise güzel bir jquery sürgüsünün nasıl oluşturulduğu anlatılmaktadır.

4. A Basic Content Slider With jQuery

Resmi Website | Test

Jquery kullanarak basit bir içerik sürgüsü oluşturmak.

5. JC Play List

Resmi Website | Test

Ücretsiz ve kolay bir kullanıma sahip bir uygulamadır.

6. Easy Slider

Resmi Website | Test

Yatay ve dikey olarak görebilirsiniz.

7. jqGalScroll

Resmi Website

Dikey, yatay ve çapraz kaydırma oluşturur.

8. Image Gallery

Resmi Website

Basit bir resim galerisidir.

9. Making a Content Slider with jQuery UI

Resmi Website | Test

Dan Wellman tarafından adım adım anlatılmış güzel bir ders.

10. Creating a Slick Auto-Playing Featured Content Slider

Resmi Website | Demo

Chris Coyier tarafından yazılmış bu ders Coda Slider tabanlıdır.

11. slideViewer

Resmi Website

Sadece birkaç satır ile bir resim galerisi oluşturmanıza olanak sağlar.

12. Start/Stop Slider

Resmi Website | Test

13. A Minimalist jQuery Plugin

Resmi Website | Test

Basit bir şekilde içerik sürgüsü oluşturmayı açıklamaktadır.

14. BarackSlideshow

Resmi Website | Test

Çok küçük ve hafif bir uygulamadır.

15. Wordpress Theme using JQuery s3Slider

Resmi Website | Test

JQuery s3Slider kullanarak wordpress temasında içerik sürgüsü oluşturmak.

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

Jquery Oyunları - Hafıza, Tetris, Bulmaca, Kağıt...

7 İlginç Jquery Takvim Eklentisi

Tasarımcılar İçin Faydalı 28 Jquery Eklentisi

Flash Gibi Jquery Menü

Sitenize Eklemeniz İçin 5 Jquery ve Ajax Sosyal İmleme Widget Dersi

Web Geliştiricileri İçin 8 Jquery ve ve Ajax Tabanlı Etiket Bulutu Yapımı

15 Mükemmel Jquery Navigasyon Tekniği ve Çözümü

kaynak: visionwidget.com

yazılarımı takip edebilirsiniz.

blog | twitter | friendfeed | delicious | rss

Bu yazı lateralus 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

50 Gerçekten Yüksek Kaliteli Photoshop Navigasyon Menü Dersi

lateralus — Tue, 11 Aug 2009 12:36:00 GMT

Photoshop, web tasarımı yaparken büyük kolaylıklar sağlıyor. Navigasyon, menü ve buton tasarımı için çok kaliteli derslere aşağıdan ulaşabileceksiniz.

Navigasyon bir site için çok önemlidir. Özellikle sitedeki bölümler arası geçişi sağladığından sık kullanılmaktadır ve görsel olarak iyi olması gerekmektedir.

Şimdi Parlak, temiz, şık, düzgün ya da 3d navigasyon tasarlamayı öğrenmeye başlayalım.

1.Content Box With Orange Banner Heading (Turuncu banner başlığı ile içerik kutusu)

Bu derste içerik kutusu benzeri benzeri menü tasarlamayı öğrenebileceksiniz.

2. Vista Styled Button Photoshop Tutorial (vista tarzı buton photoshop dersi)

Çoklu layer stili, araçları ve teknikleri kullanarak vista tarzı buton tasarlamayı öğrenin.

3. How to Create a Slick and Clean Button in Photoshop (Photoshop'da düzgün ve temiz buton nasıl oluşturulur?)

Bu photoshop dersi size basit ve temiz web 2.0 tarzı buton oluşturmayı göstermektedir. Ayrıca bazı temel css tekniklerini de göreceksiniz.

4. Blue on Black Navigation Bar (Siyah üzerinde mavi navigasyon bar)

Bu eğitici derste pek çok katman stillerini birleştirmeyi göreceksiniz.

5. Green Navigation (yeşil navigasyon)

Bu derste parlaklık efekti ile şık görünümlü yeşil navigasyon oluşturmayı öğrenebileceksiniz.

6. High-Detailed Plastic Navigation Bar (Yüksek detaylı plastik navigasyon bar)

7. Modernistic Navigation Module (Çağdaş navigasyon modülü)

Photoshop ile güzel navigasyon modülü oluşturun. Zarif tasarımlar oluşturmak için gerekli adımları görebilirsiniz.

8. Create a Nice Stylish Glossy Button in Photoshop (Photoshop'da şık ve düzgün buton oluşturmak)

9. Light Lime and Blue Navigation (Açık Limon ve Mavi Navigasyonu)

10. Stylish Dark Navigation Box (Şık koyu navigasyon kutusu)

Bu derste bazı efekt ve araçları kullanarak gelişmiş navigasyon kutusu oluşturmayı görebilirsiniz.

11. Creating A Cool 3D Web Design Effect (Harika 3d web tasarım efekti oluşturmak)

Geçiş ve katman efektlerini kullanarak kolay teknikleri göstermektedir.

12. Web Button Making Tutorial 1 (Web buton yapımı dersi)

Web buton setinin nasıl oluşturulduğunu bu derste ulaşabilirsiniz. Photoshop ile temel bilgileri bildiğiniz varsayılmaktadır.

13. Web Button Making Tutorial 2 (Web buton yapımı dersi)

14. Photoshop Tutorial: Designing a Unique Bookmark Box (Photoshop dersi: Tek yer imi kutusu tasarlamak)

Bu ders blog ve web siteniz için profesyonel şık yer imi kutusu oluşturmayı göstermektedir.

15. Volkswagen Inspired Navigation (Volkswagen'den esinlenilmiş navigasyon)

16. Professional Menu Button (Profesyonel menü butonu)

Bu derste adım adım ilginç profesyonel menüler tasarlamayı görebileceksiniz.

17. Design Watercolor Effect Menu (Suluboya efekt menüsü tasarlamak)

18. Professional header design for your website (websiteniz için profesyonel başlık tasarlamak)

Profesyonel başlığı kolayca görünür hale getirmek için hoş bir ders.

19. Glossy-Style Carbon Fibre Navigation Buttons (Düzgün stil karbon dokusu navigasyon butonu)

20. Interface Orbs (Gözbebeği arayüzü)

Standart arabirim ile bir teknik kullanarak gözbebeği tasarlamayı öğrenebileceksiniz.

21. How To Create a Stunning Vista Inspired Menu (Vista'dan esinlenilmiş çekici menü nasıl oluşturulur?)

Bu derste gölgeler kullanarak şık bir menünün nasıl oluşturulacağını görebilirsiniz.

22. Clean Vertical Navigation Interface in Photoshop (Photoshop'da temiz dikey navigasyon arayüzü)

Websiteniz için temiz dikey navigasyon arayüzünün nasıl oluşturulduğu yer almaktadır.

23. Clean White Navigation Bar (Temiz beyaz navigasyon bar)

Sadelik ve güzellik bir web sitesinin anhatarıdır. Photoshop'da güzel navigasyon bar çizimini öğrenin.

24. RSS button in Photoshop (Photoshop'da rss butonu)

25. Stylish Dark Navigation Menu (Şık koyu naviasyon menü)

Dikdörtgen aracı ile bazı hileler yaparak şık bir navigasyon kutusu dersi.

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

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

40 Gerçekten Kullanışlı Photoshop Metin Efekti Dersi

24 Hayran Eden Photoshop Dersi

3d Metin Efekti Oluşturmak İçin 25 Photoshop Dersi

Photoshop Kullanarak 29 Harika "Forum İmzası" Hazırlama Dersi

Web Tasarımı Oluşturmak İçin 16 En Hoş Photoshop Dersi (İngilizce)

Photoshop'ta Simge Oluşturmak İçin 30+ Şaşırtıcı Ders

75 Fevkalade Photoshop Fırça Seti

500+ Photoshop İçin Püskürme Fırça Seti

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

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

35+ Faydalı Photoshop Eklentisi

kaynak: 1stwebdesigner.com

yazılarımı takip edebilirsiniz.

blog | twitter | friendfeed | delicious | rss

Bu yazı lateralus 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

Web sitenizin açılma hızını ölçün

lateralus — Wed, 13 Jun 2007 08:57:00 GMT

webwait. site açılma hızı

Site sahipleri için host yani internet sitesinin barinma yari her zaman sorun olmuştur. Host ile alakalı olan sitenizin açılma hızını webwait sitesi ücretsiz ölcüyor.. Üstelik Firefox ve İE degerleri farklı olarak açılma hızını veriyor.. Burada bildirgec.org açılma sonucları var.. Eski Hızına kavuşan bildirgeci(5.51s) tebrik ediyorum umarim tekrar yavaşlamaz

Bu yazı lateralus 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

100 Ücretsiz Online Seo Aracı

lateralus — Sat, 08 Aug 2009 10:41:00 GMT

SEO (Arama Motoru Optimizasyonu) arama motorlarından bir web sitesine trafiğinin doğal olması için yapılan çalışmalara verilen isimdir. Bu yazıda sizlere faydalı olabilecek seo araçlarına ulaşabilirsiniz.

Bağlantı Popülerlik Kontrolü

1. Submitexpress.com

2. Marketleap.com

3. Seochat.com

4. Webmaster-toolkit.com

5. Selfseo.com

6. Addme.com

Meta Tag Analizi

3. Seochat.com

Robots.txt Üreteci

1. Mcanerin.com

2. Seochat.com

3. Yellowpipe.com

4. Seobook.com

5. Live2support.com

6. Howrank.com

Arama Motoru Anahtar Kelime Konum Aracı

1. Seochat.com

2. Seocentro.com

3. Free-webmaster-tools.com

4. Rankchecker.net

Anahtar Kelimeleri En İyi Şekilde Kullanma Araçları

1. Seochat.com

2. Auscan.biz

Anahtar Kelime Yoğunluk Araçları

1. Webconfs.com

2. Seochat.com

3. Ranks.nl

4. Seobook.com

5. Keyworddensity.com

6. Davidnaylor.co.uk

7. Webconfs.com

8. Seocentro.com

9. Evrsoft.com

İndekslenmiş Sayfa Araçları

1. Selfseo.com

2. Seomoz.org

3. Seochat.com

4. Seologs.com

5. Dailyserver.com

6. Indextree.com

7. Wannaberichtoo.com

Anahtar Kelime Önerme Araçları

1. Google.com

2. Wordtracker.com

3. Digitalpoint.com

4. Keyworddiscovery.com

5. Selfseo.com

6. Bad-neighborhood.com

7. Addme.com

8. Webconfs.com

9. Iwebtool.com

Gelecek PageRank Araçları

1. Seochat.com

5. Seotime.com

7. Pagerankprediction.com

Meta Tag Üreteç Araçları

1. Addme.com

2. Seochat.com

3. Submitcorner.com

4. Seobook.com

5. Submitexpress.com

6. Webmaster-toolkit.com

7. Onlinemetatag.com

8. Searchenginegenie.com

9. Ad2go.com

10. Spiderweblogic.com

11. Webweaver.nu

Pagerank Arama Araçları

1. Top25web.com

2. Seochat.com

3. Iwebtool.com

4. Prchecker.info

5. Prcheckingtool.com

6. Digpagerank.com

7. Validrank.com

8. Mypageranker.com

Whois Arama Araçları

1. Domaintools.com

2. Geektools.com

3. Webconfs.com

4. Seoconsultants.com

5. Whoisbucket.com

6. Dndetails.com

7. Seoimage.com

Website Bedeli Araçları

1. Dnscoop.com

2. Directory.sootle.com

3. Websiteoutlook.com

4. Sitevaluecheck.com

5. Stimator.com

6. Cwire.org

7. Welcomia.com

8. Websitevaluecalculator.com

9. Websitevaluecalculator.com

10. Mywebsiteworth.com

kaynak: devsnippets.com | psdeluxe.com

yazılarımı takip edebilirsiniz.

blog | friendfeed | twitter | delicious

Bu yazı lateralus 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

resim gösterimleri için js eklentileri

lateralus — Mon, 27 Apr 2009 10:43:00 GMT

jquery, mootools ile beraber tasarımcıların en fazla başvurduğu javascript kütüphanelerinin başında geliyor. bunda, sanırım hemen her alanda eklenti bulundurmalarının payı büyük. şurada da jquery için yararlanabileceğiniz 14 fotoğraf eklentisi verilmiş.

GALLERIA | demo 1 | demo 2

jQuery Multimedia Portfolio | demo

Bu yazı lateralus 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 ile Resim Galerisi Oluşturma

lateralus — Fri, 07 Aug 2009 12:10:00 GMT

profesyonel bir fotoğrafçı iseniz ya da çektiğiniz resimleri sergileyebileceğiniz hoş bir site hazırlamak istiyorsanız bu işi jquery ile kolaylıkla yapabilirsiniz.

Ayrıca:

Modern tasarımlar için ücretsiz fontlar popüler
Css ile yazı döndürme popüler
arama kutularınızı javascript ile güzelleştirin
Php programlama dersleri
html 5 duyuruldu

jquery ile resim galerisi oluşturma dersleri:

Önizlemeli ve açıklamalı resim döndürücü (css/jquery)

jquery resim galerisi/haber sitelerinde kullanabilirsiniz

tam ekran flickr resim galerisi

jquery ile slideshow

üzerine gelince büyüyen resimler

transparan resim yazısı ile slideshow

apple sitesinde yer alan resim kaydıracının aynısı

otomatik olarak resimleriniz sola doğru kayıyor

jquery ile kaygan kutucuklar

güzel bir resim kaydıracağı

bağlantıların üzerine gelindiğinde, yazı veya resim görüntületebilirsiniz

coda kaydıraç etkisi

jquery eklentileri ile resim galerileri:
tam ekran resim galerisi: supersized

resim önizlemeli, tam ekran resim galerisi: galleria

bir tane daha önizlemeli resim galerisi

hepimizin wordpress'ten aşina olduğu jquery lightbox

önizlemeli resim galerisi: gallerific

resim kaydıracı: easy slider 1.5

önizleme ve resim yazısı: pikachoose

otomatik resim kaydıracı: s3 slider

kayan resim galerisi

flickr resim galerisi

basit kontrollü resim galerisi

popeye

kontrol edilebilir resim kaydıracı

kaynak

Bu yazı lateralus 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

öğrenilmesi gereken 15 css hilesi

lateralus — Tue, 27 Jan 2009 09:25:00 GMT

Web tasarımcıları ve geliştiricileri olarak zamanla, anahat hedeflerimize ulaşmamıza yardımcı olması için pek çok CSS hilesini ve ipucunu öğreniriz. Bu tekniklerin bir listesini yapmaya kalksanız, projenizin yoğunluğuna göre yüzlerce hileyi bir arada toplamanız gerekebilir. Ancak bu yazıda bulacağınız 15 önemli css hilesi, web geliştiricilerinin karşılaştığı sorunların pek çoğunu giderebilecek kalitededir.

1. Bağıl (relative) pozisyonlanan element içerisinde mutlak (absolute) pozisyonlama
Mutlak pozisyonlanan bir elementi bağıl pozisyonlanan bir element içerisine yerleştirdiğinizde, onun pozisyonu kendisine en yakın olan üst elementin pozisyona göre belirlenecektir. Bu, özellikle bir elementi sayfanızda belirleyeceğiniz bir noktaya sabitlemek istediğinizde oldukça kullanışlı bir hiledir, örneğin başlık (header) damgaları (badge) gibi.

Pozisyonlama hakkında daha fazla bilgi alabileceğiniz siteler:

2. Z-index ve pozisyonlama
z-index kimi zaman geliştiriciler arasında çözümü zor olan bir bulmacaya dönüşebilir. Genellikle bir div elementini diğer bir elementin üzerine yerleştirmek için çok yüksek z-index değerleri atayan tasarımcılarla karşılaşırsınız. Burada unutmamamız gereken, z-index elementinin "position" değeri atanmamış bir element üzerinde çalışmayacak oluşudur. Eğer siz de uyguladığınız z-index kuralının işlevsel olmadığını düşünüyorsanız, kuralı uyguladığınız elemente 'position: relative' ya da 'position: absolute' değerlerini ekleyin.

Z-index hakkında daha fazla bilgi alabileceğiniz siteler:

3. Margin Auto
Bir şablon üzerinde 'margin: auto' değerini kullanmak, o elementin tarayıcı üzerindeki pozisyonunu, tarayıcının kullanıldığı sistemin ekran çözünürlüğüne bakılmaksızın ortalamak için mükemmel bir yöntemdir. Ancak 'margin: auto' değeri uygulandığı elementin 'width' değeri belirlenmediği sürece çalışmaz. Bu ayrıca satıriçi (inline) elementlerde 'margin: auto' değerinin 'display: block' kullanılmadan işlevsel olmayacağı anlamına da gelir.

Margin Auto hakkında daha fazla bilgi alabileceğiniz siteler:

4. Padding Elementini Dikkatlice Ve Doğru Bir Şekilde Kullanın
CSS ile çalışmaya başladığımda genellikle yaptığım hatalardan birisi de onun tüm efektlerini ve CSS Kutu Modeli'ni gözardı etmektir. Kutu modeline göre 'padding' değerinin uygulandığı elementinin genel genişliğini etkilediğini aklınızdan çıkarmayın. Bunu gözardı ettiğinizde elementlerin olması gerektiği yerde olmadığını göreceksinizdir. Örneğin:

#div {
width:200px;
padding: 30px;
border:2px solid #000;
}

Bunun toplam genişliği 264px olacaktır (200 + 30 + 2 + 2). Bunun yanısıra 'padding' özelliğinin 'margin'in aksine negatif değerler içeremeyeceğini unutmayın.

Padding hakkında daha fazla bilgi alabileceğiniz siteler:

W3 Padding Properties

text-indent kullanarak bir metni gizlemek
Sitenizde logo olarak bir resim kullandığınızı varsayalım. Bu resmin H1 etiketi içerisinde olması SEO açısından önemlidir, ancak H1 tagı içerisinde, arama motorlarının okuyabilmesi için bir metin olmasını da isteriz. Bazıları 'display: none' kullanmak isteyebilir ancak bu yöntemi kullanırsak logo resmini h1 etiketinden ayırmamız gerekecektir. 'text-indent' ve negatif değerler kullanarak ziyaretçiler için bir resim, arama motorları için de okunabilecek bir metin kullanmak mümkündür.

h1 {
text-indent:-9999px;/*Metni gizle, SEO için tut*/
margin:0 auto;
width:948px;
background:transparent url("images/header.jpg") no-repeat scroll;
}

Bu kod sayesinde kullanılan metnin herhangi bir çözünürlükte görünmeyeceğinden ancak onun yerine bir resmin görüntüleneceğinden emin olabiliriz. Bu yöntem ayrıca ekran okuyucularının ilgili metni görebilmesini sağlayacaktır, ancak "display: none" için bu geçerli değildir.

text-indent kullanarak metin gizleme yöntemleri hakkında daha fazla bilgi alabileceğiniz siteler

SitePoint - Using text-indent

6. IE Double Float Margin 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. Tek yapmanız gereken 'display' özelliğinin diğerini aşağıda gösterildiği şekilde 'inline' olarak belirlemek.

.yourClass {
float: left;
width: 350px;
margin: 20px 0 15px 100px;
display: inline;
}

Bu değişikliğin diğer tarayıcılara hiçbir etkisi olmayacaktır, zira elementin kendisi zaten yüzen bir element olduğundan satır içi görüntülenir, ancak her nedense bu teknikle IE6'daki bu sorun giderilmektedir.

IE'nin marj hatası hakkında daha fazla bilgi alabileceğiniz siteler:

Double Margin Causes and Fixes

7. CSS Kullanarak SPAM'a Karşı Savaşın
Şablon açıklamınızı iyileştirecek güzel bir teknik. CSS-Globe.com sitesinden Alen Grakalic CSS kullanarak nasıl CAPTCHA benzeri bir korumayı sitenize entegre edebileceğinizi anlatmış. İlgili tekniğin uygulandığı bir form şu şekilde olsun:

<label for=”Name”>Ad:</label>
<input type=”text” name=”name” />
<label class=”captcha” for=”captcha”>Cevabınız?</label>
<input type=”text” name=”captcha” id=”captcha” />

'captcha' ID'si için CSS ile bir arkaplan resmi kullanıyoruz. Bu tekniği çözebilmek için spam betiklerinin öncelikle HTML elementini bulması, CSS'nizi taraması, seçicileri karşılaştırması ve ardından doğru seçici ile ona bağlı olan arkaplan imajını bulmasının ardından ilgili imajı okuması gerekir. Bu yöntem oldukça güvenlidir zira pek çok spam betiği bunu başarabilecek kapasitede değildir. Bu yöntemin bir kötü özelliği CSS'nin etkinleştirilmediği tarayıcılarda kullanıcı ne yapacağını bilemez.

Spam'a karşı CSS İle Savaş Açmak hakkında daha fazla bilgi alabileceğiniz siteler:

Fighting spam with CSS

8. IE6 Üzerindeki Saydam PNG Sorununu Gidermek
Hepimizin IE6 üzerindeki saydam PNG sorununun can sıkıcı olduğu konusunda hemfikir olduğuna eminim. Buna yönelik Internet üzerinde pek çok çözüm bulunmaktadır ve bunlar karmaşık JavaScript kodlarından Microsoft'un kendi filtrelerini kullanmaya kadar değişiklik göstermektedir. Unutmayın ki bu tekniklerin pek çoğu Microsoft'un AlphaImageLoader özelliğine dayanmaktadır.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);

IE6'nın PNG saydamlık sorunu hakkında daha fazla bilgi alabileceğiniz siteler:

9. CSS Çoklu 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. Chris Coyler'in bu konuda yazılmış mükemmel bir makalesi bulunuyor.

.yourClass {
filter:alpha(opacity=50);/*IE İçin Gerekli*/
-moz-opacity:0.5;/*NN gibi eski Mozilla tarayıcıları*/
-khtml-opacity: 0.5;/*Safari'nin Eski Sürümleri ve "KHTML" tarama motorları*/
opacity: 0.5;/*FF, Safari ve Opera*/
}

Bu kod doğrulanmayacaktır ancak bu özelliği kullanmak isteyen kullanıcılar için bu pek bir sorun teşkil etmez.

CSS Opacity hakkında daha fazla bilgi alabileceğiniz siteler.

10. CSS Konumlandırlabilir Görseller (CSS Image Sprites) Kullanın
CSS Konumlandırılabilir Görseller birden fazla CSS görselinizi tek bir seferde yükleyebilmeniz için mükemmel bir yöntemdir. Bu yöntemle hem sunucuya bindirilen yük azalır hem de şablonunuzun dosya boyutunda önemli bir düşüş gözlenir.

CSS Konumlandırılabilir Görseller birden fazla görsel elementin tek bir görsel üzerinde depolanması ile oluşturulur. Ardından CSS kullanılarak arkaplan pozisyonu, genişliği ve yüksekliği gibi CSS değerleri ile görüntülemek istediğimiz görseli seçeriz.

Konumlandırılabilir Görseller hakkında daha fazla bilgi alabileceğiniz siteler:

11. IE6'yı desteklemek için Koşullu Yorumlar (Conditional Comments) Kullanın
Web geliştiricileri IE'nin bazı özel sürümlerini desteklemek için yeni CSS kuralları ve komutları oluştururlar. Eğer koşullu yorumlar hakkında bilginiz yoksa, aşağıdaki kod içerisinde yer alan stil şablonu, sadece IE 7 ve altındaki tarayıcılarda çalışacaktır.

<!--[if lte IE 7]>
<link rel="stylesheet" media="screen" href="styleIE.css" />
<![endif]-->

Bu kod HTML dosyanızın HEAD kısmına yerleştirilir. Eğer CSS IE'de çalışmıyor görünüyorsa, CSS seçimlerinizde daha doğrudan hedefleyen CSS komutlarını kullanmayı deneyin.

12. CSS Özgüllüğü
Yukarıda da belirtildiği üzere CSS stilleri belirli özgül sırasını takip eder ve hangi değerin hangisinin üzerine yazacağını belirlemek ,için puanlama kullanır. Nettuts'ta yayımlanan bu makalede CSS için puanlama değerleri açıklanmış. Değerler aşağıdaki gibidir.

Elementler: 1 puan
Sınıflar: 10 puan
Belirleyiciler: 100 puan
Satıriçi Stilleme: 1000 puan
Şüpheye düştüğünüzde stil tanımlamalarınızda daha keskin olmaya çalışın. Ayrıca gerektiğinde hata düzeltme işlemleri için !important değerini de kullanabilirsiniz.

CSS Özgüllüğü hakkında daha fazla bilgi alabileceğiniz siteler:

13. Tüm tarayıcılarda minimum yükseklik değerini kullanabilmek
Bir arabirim üzerinde çalışırken genellikle bir element için en düşük yükseklik değerini belirleme ihtiyacı hissederiz ve ardından ilgili yüksekliği, dahilindeki içerik sığmadığında otomatik olarak arttırabilmek isteriz. Ne yazık ki her zaman olduğu gibi IE min-height değerini doğru bir şekilde yorumlamamaktadır. Ancak min-height hızlı hilesi adı verilen bir çözümümüz var. Kod şu şekilde:

#yourId {
min-height:300px;
height:auto !important;
height:300px;/*Needs to match the min height pixels above*/
}

Sade, işlevsel ve doğrulanabilir bir kod. Bu örnek ayrıca '!important' özelliğinin kullanışlı olduğu sayılı örneklerden birini teşkil ediyor.

min-height hilesi hakkında daha fazla bilgi alabileceğiniz siteler:

Using the min height fast hack

14. * HTML hilesi
Eğer IE'ye özgü stil şablonlarına bağlantı vermek istemiyorsanız, o zaman * html hilesini kullanabilirsiniz. Kusursuz bir dünyada HTML elementi daime ana elementtir, bu sebeple HTML'den önce herhangi bir element bulunamaz. Buna rağmen IE, bunun mümkün olduğunu iddia eder. Bu sebeple eğer IE üzerinde bir elementi hedeflemek istersek onu bu şekilde gerçekleştiririz:

* html body div#sideBar {
display:inline;
}

html hilesi hakkında daha fazla bilgi alabileceğiniz siteler:

15. Kayan Kapılar Tekniği
Navigasyon düğmeleri için görsel kullanmanın oluşturduğu önemli problemlerden birisi de istemcinin metninin olması gerektiğinden uzun olma ihtimali ve bunun da düğmenin sınırlarını aşması ya da sınırları dahiline sığmamasıdır. İki görsel ve CSS kayan kapılar tekniği kullanarak içerisindeki metnin uzunluğuna göre genişleyip kısalabilecek düğmeler oluşturabiliriz. Bu tekniğin ardında yatan fikir, her düğme için iki adet görsel kullanmak ve ardından bu görselleri CSS'nin arkaplan tanımlamma özelliği ile düğmelere entegre etmektir. Örneğin:

HTML Dizisi
Başlık Metni

CSS
a.myButton { background: transparent url('right.png') no-repeat scroll top right; display: block; float: left; height: 32px; /* Görsel Yüksekliği */ margin-right: 6px; padding-right: 20px;/*Görsel Genişliği*/ /*Other Styles*/ } a.myButton span { background: transparent url('button_left.png') no-repeat; display: block; line-height: 22px; /* Görsel Yükseliği */ padding: /*İstediğiniz değer ile değiştirin*/ }

Kayan kapılar tekniği hakkında daha fazla bilgi alabileceğiniz siteler:

Ve işte size şablon hazırlarken yardımcı olabilecek 15 CSS tekniğinin de sonuna geldik. CSS tasarımcılar için mükemmel bir araçtır zira kodumuzla daha yaratıcı olabilmemizi ve kendi tekniklerimizi oluşturabilmemize olanak sağlar. Sizin de sık kullandığınız CSS teknikleri var mı? Listeye eklemek istediğiniz teknikler neler olabilir? Yorumlarınızla paylaşın.

Kaynak: ThemeForest

CSS Hileleri ve İpuçları İle İlgili Yazdığım Diğer Yazılar

Bu yazı lateralus 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