http://www.bildirgec.org/ tr-tr 40 bildirgec.org - etiketler: css reset mglass <div class="imajsol"><img src='http://www.bildirgec.org/imaj/mglass/logo2.gif' alt="css popup image wiever" border="0"><br>css popup image wiever</div>Tasarımcıların en can sıkıcı sorunu ie ,firefox ,safari ve ie farklı versiyonları için tasarım farklılıklarıdır bunun en önemli nedeni ie6 gibi eski browserların kullanımının devam etmesi uyumluluk sorunları hakkında bir çok makale var mesela <a href="http://meyerweb.com/eric/tools/css/reset/">reset dosyası</a> kullanmak, farklı tarayıcıların desteklediği kodlardan kaçınmak, <a href="http://www.fatihhayrioglu.com/css-de-kodumuzu-ieden-gizleme/">ie 6 dan css kodlarımızı gizlemek</a> ve bana da en mantıklı gelen <!-- if [gt ie 6 ]--> bu css'i kullan <-- if [enif] --> önce kullanıcının tarayıcı özelliklerinin öğrenip ona göre <a href="http://daron.yondem.com/tr/CommentView.aspx?guid=c6faca2a-77b1-4a32-b0d8-7bec236f2c97">farklı css dosyası dahil etmek</a>... bu tarz sorunlardan kurtulduktan sonra uygulayabileceğimiz css örnekleriyle dolu bir kaynaktan söz etmek istiyorum işte : <br><a href="http://">Dynamic drive CSS kütüphanesi </a> bu kaynakta CSS , jquery ile ilgili bir çok örnek uygulama ve kaynak kodu mevcut örneğin: <br><a href="http://www.dynamicdrive.com/style/csslibrary/item/stylish-submit-buttons/">CSS ile submit buton tasarımı</a><div class="imajsol"><img src='http://www.bildirgec.org/imaj/mglass/formsubmit.gif' alt="css submit form " border="0"><br>css submit form </div><br><a href="http://www.dynamicdrive.com/style/csslibrary/item/arrow-comment-box/">Div ve yorum kutuları</a><div class="imajsol"><img src='http://www.bildirgec.org/imaj/mglass/commentbox.gif' alt="css comment box" border="0"><br>css comment box</div><br><a href="http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/">CSS popup menu resim galeri</a><br><div class="imajsol"><img src='http://www.bildirgec.org/imaj/mglass/popimage.gif' alt="css popup image wiever" border="0"><br>css popup image wiever</div><br>daha bir çok örnek uygulama kütüphaneleri mevcut artık herkes css'ci olacak :) CSS Kütüphanesine <a href="http://www.dynamicdrive.com/style/csslibrary/">buradan</a> ulaşabilirsiniz ...<p><strong>ilgili yazılar</strong><ul><li><a href="http://www.bildirgec.org/yazi/cevrimici-css-araclari-listesi">Çevrimiçi CSS Araçları Listesi</a> (5)</li><li><a href="http://www.bildirgec.org/yazi/css-ogreten-uygulamali-kaynaklar">css öğreten uygulamalı kaynaklar</a> (9)</li></ul></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/mglass">mglass</a> tarafından <a href=" http://www.bildirgec.org/yazi/dynamic-drive-css-kutuphanesi ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Sun, 02 Aug 2009 18:15:00 GMT 83261@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/dynamic-drive-css-kutuphanesi css css reset css kaynakları css layouts css library mglass mbardak css örnekleri css kaynak css message box css katman css ie css tarayıcı sorunları css ie6 sorunu css browser css browser sorunu css kütüphanesi css makale css çözümleri css sorunları tasarım faklılıkları css uygulamalar css image css backgorund pinkfloyd <p>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.</p> <p>İşte tam da bu noktada <a href="http://www.backtoessentials.com/css/the-ultimate-list-of-online-css-tools/">Back to Essentials</a> 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.</p> <p><strong>Yazıtipleri</strong></p> <p><strong><a href="http://www.typetester.org/">Typetester</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/59-01.jpg' alt="\"\"" border="0"><br></div> <p>Ekranda farklı yazıtiplerini karşılaştırabilmenize yarayan bir uygulama.</p> <p><strong><a href="http://riddle.pl/emcalc/">Em Calculator</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/59-02.jpg' alt="\"\"" border="0"><br></div> <p>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.</p> <p><!-- buradan kes --></p> <p><strong><a href="http://csstypeset.com/">CSS Type Set</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/59-03.jpg' alt="\"\"" border="0"><br></div> <p>CSS Type Set sayesinde tasarımcılar ve geliştiriciler, sitelerinde kullanacakları metin bloklarının çeşitli CSS değerleri kullanıldığında nasıl görüneceğini eş zamanlı olarak görüp en doğru tercihi yapmalarına yardımcı oluyor.</p> <p><strong><a href="http://www.fonttester.com/">Font Tester</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/59-04.jpg' alt="\"\"" border="0"><br></div> <p>Font Tester bir diğer ücretsiz çevrimiçi yazıtipi karşılaştırma aracı. Çeşitli CSS yazıtipi stilleri atanmış farklı yazıtiplerini yan yana karşılaştırmanıza olanak sağlıyor.</p> <p><strong><a href="http://pxtoem.com/">PXtoEM Conversion</strong></a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/59-05.jpg' alt="\"\"" border="0"><br></div> <p>Pixel değerlerini EM'e dönüştürebileceğiniz bir diğer kullanışlı araç. BODY etiketine atadığınız yazıtipi boyutunu pixel olarak girin ve site size farklı em değerlerini içeren tabloyu versin. Gerçekten kullanışlı.</p> <p><strong><a href="http://csstxt.com/">CSSTXT</a></strong></p> <p>Metinlerinize stil atayabileceğiniz bir başka uygulama.</p> <p><strong>CSS Anahat Oluşturucuları</strong></p> <p><strong><a href="http://developer.yahoo.com/yui/grids/builder/">YUI - CSS Grid Builder</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/59-06.jpg' alt="\"\"" border="0"><br></div> <p>CSS Izgara Oluşturucusunun basit web tabanlı arayüzü sayesinde YUI'nin CSS dosyalarına bağlı dilediğiniz sayıda anahattı kolayca oluşturabilirsiniz.</p> <p><strong><a href="http://builder.yaml.de/">YAML Builder</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/59-07.jpg' alt="\"\"" border="0"><br></div> <p>YAML tabanlı CSS anahatları oluşturabileceğiniz bir görsel anahat oluşturucusu.</p> <p><strong><a href="http://istylr.com/">iStylr</a></strong></p> <p>Çevrimiçi CSS Şablon Oluşturucusu.</p> <p><strong><a href="http://grid.mindplay.dk/">Grid Designer</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/59-08.jpg' alt="\"\"" border="0"><br></div> <p>Izgaralar ve Tipografiler oluşturabileceğiniz bir araç.</p> <p><strong><a href="http://csscreator.com/tools/layout">CSS Oluşturucusu</a></strong></p> <p>Bu oluşturucusu sayesinde esnek ya da sabi genişliğe sahip yüzen sütunlu anahatlar oluşturabilirsiniz. Site 3 adede kadar sütun, başlık ve altlık içeren anahatları destekliyor. Değerler pixel, em ya da yüzde olarak girilebilir.</p> <p><strong><a href="http://drawter.com/">Drawable Markup Language</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/59-09.jpg' alt="\"\"" border="0"><br></div> <p>Web sitenizin kodunu neredeyse çizebilmenize olanak sağlayan bir uygulama.</p> <p><strong><a href="http://cssmate.com/csseditor.htm">CSSMate</a></strong></p> <p>İnteraktif çevrimiçi CSS düzenleyicisi CSSMate sayesinde CSS stilleri oluşturabilirsiniz.</p> <p><strong><a href="http://www.qrone.org/cssdesigner.html">QrONE CSS Designer</a></strong></p> <p>CSS Stil düzenleyicisi.</p> <p><strong><a href="http://lab.xms.pl/css-generator/">CSS Frame Generator</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/59-10.jpg' alt="\"\"" border="0"><br></div> <p>XHTML altyapınız üzerinde CSS çerçeveleri oluşturabileceğiniz basit bir araç.</p> <p><strong><a href="http://lab.xms.pl/markup-generator/">XHTML/CSS Markup Generator</a></strong></p> <p>XHTML/CSS kodlama hızınızı ilerletmeye yardımcı olacak bir uygulama.</p> <p><strong><a href="http://skycsstool.sourceforge.net/">Sky CSS Tool</a></strong></p> <p>Sky CSS neredeyse hiç kod yazmadan CSS sınıfları oluşturabilmenizi sağlıyor.</p> <p><strong><a href="http://csscreator.com/version1/index.php">CSS Creator - CSS Generator</a></strong></p> <p>CSS Creator, web sayfanız için bir stil seçebilmenizi sağlıyor.</p> <p><strong><a href="http://www.gwhite.us/downloads/css_grid_calc.html">CSS Grid Calculator</a></strong></p> <p>CSS Izgara Hesaplayıcısı'nı kullanarak sayfa anahattınızı çabucak görselleştirebilir ve çeşitli yollar kullanarak ızgaralar çizebilirsiniz.</p> <p><strong><a href="http://www.ahfb2000.com/cssgenerator.php">CSS Generator</a></strong></p> <p>Bu araç basit bir stil şablonu oluşturabilmenizi sağlıyor.</p> <p><strong><a href="http://www.pagecolumn.com/">Dynamic 3 Column Layout Generator</a></strong></p> <p>3 sütunlu anahatlar oluşturabilmenizi sağlayacak kullanışlı bir araç.</p> <p><strong><a href="http://www.constructyourcss.com/">Construct Your CSS</a></strong></p> <p>WYSIWYG anahat düzenleyicisi. Semantic ve tablo kullanmadan.</p> <p><strong><a href="http://kematzy.com/blueprint-generator/">Blueprint Grid CSS Generator</a></strong></p> <p>Bu araç, Blueprint'in grid.css, compressed.css ve grid.png dosyalarının özelleştirilebilir sürümlerini oluşturabilmenizi sağlıyor.</p> <p><strong>CSS Çatıları</strong></p> <p><strong><a href="http://www.blueprintcss.org/">Blueprint</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/59-11.jpg' alt="\"\"" border="0"><br></div> <p>Blueprint bir CSS çatısı olup CSS geliştirirken harcadığınız zamanı azaltmayı hedefliyor.</p> <p><strong><a href="http://www.yaml.de/en/home.html">Yet Another Multicolumn Layout</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/59-12.jpg' alt="\"\"" border="0"><br></div> <p>Yet Another Multicolumn Layout (YAML), bir diğer (X)HTML / CSS çatısı olup modern ve özelleştirilebilir yüzen anahatlar oluşturabilmenizi sağlıyor. Yapısı, programlamasında son derece değişken ve son kullanıcılar için tümüyle erişilebilir.</p> <p><strong><a href="http://code.google.com/p/hartija/">Hartija - CSS Print Framework</a></strong></p> <p>Web yazdırması için kullanılabilecek evrensel CSS çatısı.</p> <p><strong><a href="http://elements.projectdesigns.org/index.html">Elements</a></strong></p> <p>Tasarımcıların daha hızlı CSS yazabilmeleri ve daha verimli olabilmeleri için geliştirilmiş.</p> <p><strong><a href="http://960.gs/">960 Grid System</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/59-13.jpg' alt="\"\"" border="0"><br></div> <p>960 Izgara Sistemi web geliştirmesi sırasında harcayacağınız zamanı, 960 pixellik genişliğe dayalı sık kullanılan ölçüler kullanarak kısaltmayı hedefliyor.</p> <p><strong><a href="http://code.google.com/p/logicss/">Logic CSS Framework</a></strong></p> <p>Logic CSS çatısı bir dizi CSS dosyası ve PHP aracından oluşmuş, web standartları ile uyumlu xHTML anahatları oluştururken geçirdiğiniz zamanı kısaltmayı hedefleyen bir uygulama.</p> <p><strong><a href="http://code.google.com/p/sencss/">SenCSs</a></strong></p> <p>SenCSs sayesinde anahat dışındaki her şey için standart CSS dosyasını kullanabilirsiniz.</p> <p><strong><a href="http://devkick.com/lab/tripoli/">Tripoli</a></strong></p> <p>Tripoli, HTML işleme için geliştirilmiş bir CSS standardıdır. Tarayıcı standartlarını sıfırlayıp yeniden inşa ederek, web projeleriniz için çapraz tarayıcı uyumlu bir temel üzerinde web projelerinizi inşa edebilmenizi sağlar.</p> <p><strong><a href="http://bluetrip.org/">BlueTrip CSS Çatısı</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/59-14.jpg' alt="\"\"" border="0"><br></div> <p>BlueTrip web sitesi inşa edebilmek için bir dizi stil ve yöntem sunarak, işin zaman harcatan kısmını geçip projenize odaklanabilmenizi sağlıyor.</p> <p><strong><a href="http://developer.yahoo.com/yui/grids/">Grids CSS</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/59-15.jpg' alt="\"\"" border="0"><br></div> <p>Yahoo! tarafından geliştirilen ve dört ön tanımlı sayfa genişliği, altı ön tanımlı şablon ve dört sütuna kadar alt-bölümleri içeren anahatları geliştirebilmenize olanak sağlayan bir CSS çatısı. Oldukça kapsamlı ve genişletilebilir.</p> <p><strong>Biçimleyiciler, İyileştiriciler ve Sıkıştırıcılar</strong></p> <p><strong><a href="http://www.codebeautifier.com/">Code Beautifier</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/59-16.jpg' alt="\"\"" border="0"><br></div> <p>Çevrimiçi CSS biçimleyicisi ve düzenleyicisi.</p> <p><strong><a href="http://www.cleancss.com/">Clean CSS</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/59-17.jpg' alt="\"\"" border="0"><br></div> <p>CSS'nizi farklı sıkıştırma ayarları kullanarak optimize edebilmenizi ve biçimlendirebilmenizi sağlıyor. Bu araç sayesinde okunması daha kolay CSS kodlarına ulaşabilirsiniz.</p> <p><strong><a href="http://isnoop.net/tools/css.php">CSS SuperScrub</a></strong></p> <p>Bu araç CSS'nin karmaşıklığını gereksiz içeriği silerek, önemsiz kodları kaldırarak ve geri kalan element isimlerini zeki bir şekilde gruplayarak azaltmayı hedefliyor.</p> <p><strong><a href="http://www.cssoptimiser.com/">Online CSS Optimizer</a></strong></p> <p>Çevrimiçi CSS İyileştiricisi sayesinde CSS dosyalarınızın dosya boyutunu azaltabilirsiniz.</p> <p><strong><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Drive Gallery - CSS Compressor</a></strong></p> <p>İhtiyacınıza göre değişen 3 farklı sıkıştırma ayarından birini seçerek CSS dosyalarınızı sıkıştırabilirsiniz.</p> <p><strong><a href="http://mabblog.com/cssoptimizer/compress.html">Online CSS Optimizer</a></strong></p> <p>Bir başka çevrimiçi CSS iyileştiricisi, CSS kodunuzun dosya boyutunu azaltmayı hedefliyor.</p> <p><strong><a href="http://iceyboard.no-ip.org/projects/css_compressor">Robson - CSS Sıkıştırıcısı</a></strong></p> <p>Bu CSS sıkıştırıcısı stil şablonlarına önemli değişiklikler uyguladığından ve henüz geliştirme aşamasında olduğundan, bazı CSS dosyalarında verimli çalışmayabilir.</p> <p><strong><a href="http://flumpcakes.co.uk/css/optimiser/">FlumpCakes - Çevrimiçi CSS İyileştiricisi</a></strong></p> <p>Bu araca yükleyeceğiniz CSS dosyası işleniyor ve gereksiz tüm kodlar kaldırılarak daha temiz bir koda ulaşmanız sağlanıyor.</p> <p><strong><a href="http://www.lonniebest.com/FormatCSS/">Format CSS Online</a></strong></p> <p>CSS'nizi otomatik olarak biçimlendirerek onu daha kolay okunur ve düzenlenebilir hale getirin.</p> <p><strong><a href="http://www.prettyprinter.de/">PrettyPrinter</a></strong></p> <p>Çevrimiçi kod güzelleştiricisi.</p> <p><strong><a href="http://tools.arantius.com/tabifier">Tabifier</a></strong></p> <p>Tabifier sayesinde bilgisayar kodunuzu daha okunaklı hale getirebilirsiniz.</p> <p><strong>Doğrulama</strong></p> <p><strong><a href="http://jigsaw.w3.org/css-validator/">W3C CSS Doğrulama Servisi</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/59-18.jpg' alt="\"\"" border="0"><br></div> <p>W3C CSS Doğrulama Servisi, web tasarımcılarının ve web geliştiricilerinin CSS dosyalarını kontrol edebilmelerini sağlıyor.</p> <p><strong><a href="http://juicystudio.com/services/csstest.php">CSS Analyser</a></strong></p> <p>Bu servis CSS dosyalarınızın doğruluğunu W3C'nin doğrulama servisi üzerinden kontrol edip, bunun yanısıra kontrast testi ve boyut testi gibi bazı farklı testleri de uyguluyor.</p> <p><strong><a href="http://services.immike.net/css-checker/">CSS Redundancy Checker</a></strong></p> <p>HTML dosyalarınızda kullanılmayan CSS seçicilerini bulmak için kullanabileceğiniz bir araç.</p> <p><strong>CSS Formları</strong></p> <p><strong><a href="http://www.jotform.com/">JotForm</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/59-19.jpg' alt="\"\"" border="0"><br></div> <p>İlk WYSIWYG Form Oluşturucusu. Tarayıcınızı kullanarak web formları oluşturun ve yayımlayın.</p> <p><strong><a href="http://wufoo.com/">Wufoo</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/59-20.jpg' alt="\"\"" border="0"><br></div> <p>Wufoo, web üzerinden bilgi toplamanızı kolaylaştırıyor.</p> <p><strong><a href="http://formsmarts.com/">FormSmarts</a></strong></p> <p>FormSmarts üzerinden formlar oluşturup onları yayımlayarak ziyaretçilerinizden çeşitli alanlarda bilgi toplayabilirsiniz.</p> <p><strong><a href="http://www.formassembly.com/">FormAssembly</a></strong></p> <p>Web Formları Oluşturun ve sorularan verilen yanıtları toplayın.</p> <p><strong>Navigasyon</strong></p> <p><strong><a href="http://www.cssmenubuilder.com/home">CSS Menu Builder</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/59-21.jpg' alt="\"\"" border="0"><br></div> <p>Web standartları ile uyumlu XHTML / CSS menüleri oluşturun.</p> <p><strong><a href="http://www.cssmenumaker.com/index.php">CSS Menu Generator</a></strong></p> <p>CSS Menü Oluşturucusu sayesinde ortalama bir web yöneticisi, çapraz tarayıcı uyumlu web site menüleri oluşturabilir.</p> <p><strong><a href="http://tabcreatr.com/">TabCreatr</a></strong></p> <p>Ücretsiz CSS Menü Oluşturucusu.</p> <p><strong>CSS Sıfırlama</strong></p> <p><strong><a href="http://meyerweb.com/eric/tools/css/reset/">Reset CSS</a></strong></p> <p>Sıfırlama stil şablonlarının hedefi, farklı tarayıcılar arasındaki tutarsızlıkları gidermektir. Bunlar arasında öntanımlı satır yükseklikleri, marjlar ve başlıkların yazıtipi boyutları gibi elementler yer alır.</p> <p><strong><a href="http://developer.yahoo.com/yui/reset/">Yahoo! UI Kütüphanesi: Reset CSS</a></strong></p> <p>Yahoo!'nun sunduğu bu CSS sıfırlaması da farklı HTML elementleri arasındaki tutarsız CSS stillerimini sıfırlayarak daha tutarlı web siteleri inşa edebilmenizi sağlıyor.</p> <p><strong><a href="http://www.crucialwebhost.com/blog/master-stylesheet-the-most-useful-css-technique/">Master Stylesheet: En Kullanışlı CSS Tekniği</a></strong></p> <p>Temel bir stil şablonu.</p> <p><strong>Boş CSS Anahatları</strong></p> <p><strong><a href="http://layouts.ironmyers.com/">168 Adet Izgara ve CSS Anahat Kolleksiyonu</a></strong></p> <p>Bu CSS anahatları tüm A sınıfı tarayıcılar için desteği içeriyor. Bunun anlamı tüm bu örneklerin Internet Explorer 6, Internet Explorer 7, Firefox, Opera, Safari ve diğerlerinde aynı şekilde görünecek olması.</p> <p><strong><a href="http://www.code-sucks.com/css%20layouts/faux-css-layouts/">42 Adet Sahte Sütunlu CSS Anahatları</a></strong></p> <p><strong><a href="http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/">53 Adet Sabit Genişlikli CSS Anahatları</a></strong></p> <p><strong><a href="http://layout.constantology.com/">___layouts</a></strong></p> <p>___layouts dosyası dilerseniz tam yakınlaştırma desteğine sahip ya da sabit genişliğe sahip beş adet ön tanımlı şablonu içeriyor.</p> <p><strong><a href="http://www.strictlycss.com/articles/article/40/the-only-css-layout-you-need">The Only CSS Layout You Need</a></strong></p> <p>Tamamı aynı HTML dosyasını kullanarak oluşturulmuş 10 farklı anahattı ve örnek sayfalarını içeren bir anahat.</p> <p><strong><a href="http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html">Little Boxes</a></strong></p> <p>Tarayıcı bazlı CSS sorunları için hileler.</p> <p><strong>Diğer Araçlar</strong></p> <p><strong><a href="http://psd2cssonline.com/">PSD 2 CSS Online</a></strong></p> <p>Saniyeler içerisinde Photoshop tasarımlarınızdan dinamik web sayfaları oluşturun.</p> <p><strong><a href="http://www.conditional-css.com/">Conditional CSS</a></strong></p> <p>Bu araç sayesinde belirli tarayıcıları hedefleyen CSS kodları yazabilirsiniz.</p> <p><strong><a href="http://iterationprojects.com/evolve/">CSS Evolve</a></strong></p> <p>Bu araç sayesinde bir web sitesinin rengi, şeması, yazıtipleri, sınırları gibi elementleri üzerinde oynayabilirsiniz.</p> <p><strong><a href="http://www.csstextwrap.com/">CSS Text Wrapper</a></strong></p> <p>CSS Text Wrapper sayesinde bir HTML metnininin düz köşeleri olmayan bir görseli sarmalamasını sağlayabilirsiniz.</p> <p><strong><a href="http://www.theboxoffice.be/">The Box Office</a></strong></p> <p>Yukarıdaki araçla aşağı yukarı aynı işlemi yapan bir başka uygulama.</p> <p><i>Eğer sizin de bu listede yer almayan ancak faydalı olduğunu düşündüğünüz bir CSS aracı varsa yorumlarınızda belirtmeyi ihmal etmeyin</i>.</p> <ul> <li><strong>Kaynak</strong>: <a href="http://www.backtoessentials.com/css/the-ultimate-list-of-online-css-tools/">Back to Essentials</a></li> </ul> <p><strong>CSS İle İlgili Yazdığım Diğer Yazılar</strong></p> <ul> <li><a href="http://www.bildirgec.org/yazi/onlarsiz-yapamayacaginiz-20-tipografi-uygulamasi">Onlarsız Yapamayacağınız 20 Tipografi Uygulaması</a></li> <li><a href="http://www.bildirgec.org/yazi/ucretsiz-ve-yuksek-kaliteli-100">Ücretsiz ve Yüksek Kaliteli 100 XHTML/CSS Şablonu</a></li> <li><a href="http://www.bildirgec.org/yazi/capraz-tarayici-uyumlulugu-icin-altin">Çapraz Tarayıcı Uyumluluğu İçin Altın Değerinde İpuçları</a></li> <li><a href="http://www.bildirgec.org/yazi/960-css-catisina-yakindan-bakis">960.gs CSS Çatısına Yakından Bakış</a></li> <li><a href="http://www.bildirgec.org/yazi/css-de-uzman-olmanizi-saglayacak">CSS'de Uzman Olmanızı Sağlayacak 20 CSS Dersi</a></li> <li><a href="http://www.bildirgec.org/yazi/web-tasarimcilari-icin-12-arac">Web Tasarımcıları İçin 12 Araç ve Site</a></li> <li><a href="http://www.bildirgec.org/yazi/woork-ten-ucretsiz-el-kitabi">Woork'ten Ücretsiz El Kitabı</a></li> <li><a href="http://www.bildirgec.org/yazi/daha-hizli-sablon-olusturabilmek-icin">Daha Hızlı Şablon Oluşturabilmek İçin Kullanılabilecek 8 CSS Çatısı</a></li> <li><a href="http://www.bildirgec.org/yazi/ogrenilmesi-gereken-15-css-hilesi">Öğrenilmesi Gereken 15 CSS Hilesi</a></li> <li><a href="http://www.bildirgec.org/yazi/web-tasarimcilari-icin-kullanisli-12">Web Tasarımcıları İçin Kullanışlı 12 CSS Framework'ü, Şablonu ve Kod Sitesi</a></li> <li><a href="http://www.bildirgec.org/yazi/web-tasarimcilari-icin-web-uzerindeki">Web Tasarımcıları İçin Web Üzerindeki 6 Kullanışlı Araç</a></li> <li><a href="http://www.bildirgec.org/yazi/10-kullanisli-web-uygulamasi-arayuzu">10 Kullanışlı Web Uygulaması Arayüzü Tekniği</a></li> <li><a href="http://www.bildirgec.org/yazi/her-web-tasarimcisinin-ogrenmesi-gereken">Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği</a></li> <li><a href="http://www.bildirgec.org/yazi/modern-css-de-altin-oran">Modern CSS'de Altın Oran</a></li> <li><a href="http://www.bildirgec.org/yazi/sadece-css-ile-olusturulmus-animasyonlu">Sadece CSS İle Oluşturulmuş Animasyonlu İlerleme Çubuğu</a></li> <li><a href="http://www.bildirgec.org/yazi/pixelleri-emlere-kolayca-donusturun">Pixelleri Emlere Kolayca Dönüştürün</a></li> <li><a href="http://www.bildirgec.org/yazi/web-tasariminda-altin-oran">Web Tasarımında Altın Oran</a></li> <li><a href="http://www.bildirgec.org/yazi/blueprint-css-framework-unu-kullanmak">Blueprint CSS Framework'ünü Kullanmak</a></li> <li><a href="http://www.bildirgec.org/yazi/sencss-layout-disindaki-hersey-icin">SenCSs: Layout Dışındaki Herşey İçin CSS Framework'ü</a></li> </ul> <p><strong><a href="http://www.bildirgec.org/rss/uye/pinkfloyd/yazi.xml">Yazılarımı RSS İstemcisi Üzerinden Takip Etmek İçin Buraya Tıklayın</a></strong></p><p><strong>ilgili yazılar</strong><ul><li><a href="http://www.bildirgec.org/yazi/web-tasarimcilari-icin-kullanisli-12">Web Tasarımcıları İçin Kullanışlı 12 CSS Framework'ü, Şablonu ve Kod Sitesi</a> (5)</li><li><a href="http://www.bildirgec.org/yazi/css-de-uzman-olmanizi-saglayacak">css'de uzman olmanızı sağlayacak 20 css dersi</a> (15)</li><li><a href="http://www.bildirgec.org/yazi/css-de-yardima-ihtiyaciniz-oldugunda">CSS'de Yardıma İhtiyacınız Olduğunda Kullanabileceğiniz 10 Kaynak</a> (7)</li><li><a href="http://www.bildirgec.org/yazi/her-web-tasarimcisinin-ogrenmesi-gereken">Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği</a> (34)</li><li><a href="http://www.bildirgec.org/yazi/101-adet-css-kaynagi">101 Adet CSS Kaynağı</a> (10)</li></ul></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/pinkfloyd">pinkfloyd</a> tarafından <a href=" http://www.bildirgec.org/yazi/cevrimici-css-araclari-listesi ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Tue, 24 Feb 2009 19:38:00 GMT 79853@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/cevrimici-css-araclari-listesi css css özellikleri css araçları css çevirici css replace css reset css based css tekniği css kaynakları css menu css tasarım css uygulama css menü css optimiser css optimizer css design css uygulamaları css dökümanları css edit css layouts css designs css referans css library css text css düzenleme css generator css kod css örnek css teknikleri css ile menü css viewer css oluştur css kodları css örnekleri css tema css temalar css yazı css kaynak css tasarımı css siteleri css siteler css menu builder css frameworks css hacks css hack css kodlar css frame pinkfloyd <div class="imajsol"><img src='http://www.bildirgec.org/imaj/pinkfloyd/14-00.jpg' alt="\"\"" border="0"><br></div>"Eğer düzenli olarak web siteleri oluşturan ve geliştiren kişilerden biriyseniz, o zaman şablon (template) oluşturma, kullanışlı kodları arşivleme ve bunun gibi diğer şeyler hakkında düşünmeye başlamalısınız. Özellikle bu gibi şeyleri geliştirme işlemi süresini kısaltmak için yapmalısınız, bu sayede her yeni bir proje başlangıcında bu şablon üzerinde gerekli değişiklikleri yaparak aynı şeyleri tekrar tekrar yazmak zorunda kalmazsınız. Ancak bu tip kod parçacıklarını ya da başkaları tarafından hazırlanmış eserleri projenizde kullanmaya başlamadan önce mutlaka ama mutlaka indirdiğiniz ürünün lisans sözleşmelerini okuyun... Pek çok geliştirici ve tasarımcı, Internet üzerinden ücretsiz olarak dağıttıkları içeriği çoğunlukla bireysel kullanımlar için ücretsiz, kurumsal kullanımlar için ücretli olarak yayımlarlar. <p>Yazımın devamında kendimce en iyilerin en iyilerini derlediğim ve <strong>web tasarımcıları için gerçekten kullanışlı 12 css framework'ünü, şablonunu ve kod sitesini</strong> bulacaksınız.</p> <p><strong>1. <a href="http://csstidy.sourceforge.net/">CSSTidy</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/14-01.jpg' alt="\"\"" border="0"><br></div> <p>"CSSTidy açık kaynaklı bir CSS bölümleyicisi ve optimize edicisidir. Komut satırı üzerinden kontrol edilebilen ve Windows, Linux ve Mac için ayrı ayrı sürümleri bulunan bu uygulamanın ayrıca bir PHP betiği de bulunuyor. Gerek masaüstü yazılımı gerekse de PHP betiği aşağı yukarı aynı özelliklere sahip.<br><br>Pek çok diğer CSS bölümleyicisinin aksine herhangi bir kurallı ifadenin kullanılmamış olması, tam CSS2 desteği ve yüksek kararlılığı ile CSSTidy, benzerlerinden ayrılıyor."</p> <p>Bu bilgiyi kendi siteleri üzerinden çevirdim, zira her şeyi benim açıklayabileceğimden çok daha iyi özetlemiş.</p> <p>Bazı insanlar derhal şu soruyu sorabilirler: Neden CSS kodumu optimize etmeliyim? Sadece kodunuzun daha temiz olmasının yanısıra ilgili kodları yüklediğiniz sayfaların daha hızlı açılması gibi nedenler hem ziyaretçilerinizi hem de sizi memnun edeceğinden, kodunuzu optimize etmemeniz için herhangi bir sebep bulunmamaktadır.</p> <ul> <li><a href="http://csstidy.sourceforge.net/download.php">Masaüstü Yazılımı</a></li> <li><a href="http://floele.flyspray.org/csstidy//css_optimiser.php">Çevrimiçi Sürümü</a></li> </ul> <p><!-- buradan kes --></p> <p><strong>2. <a href="http://cleancss.com/">Clean CSS</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/14-02.jpg' alt="\"\"" border="0"><br></div> <p>Bu da CSS Tidy ile benzer işi yapmasına rağmen daha güzel görünüyor. Benim iyi tasarımlara olan ilgim ağır bastığı için ben bu aracı tercih ediyorum. Ancak seçim sizin! Kendi favorinizi seçin, ve dilerseniz nedenleri ile birlikte yorumlarınızı yazın.</p> <p><strong>3. <a href="http://www.blueprintcss.org/">BluePrint CSS</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/14-03-01.jpg' alt="\"\"" border="0"><br></div> <p>Daha önce BluePrint CSS Framework'ü hakkında yazdığım detaylı makaleyi eğer hala okumadıysanız hemen şimdi bir <a href="http://www.bildirgec.org/yazi/blueprint-css-framework-unu-kullanmak">göz atmanızı</a> şiddetle öneririm. BluePrint bir <strong>CSS Framework</strong>'ü olup CSS geliştirmek için harcadığınız zamanı kısaltmayı hedeflemektedir. BluePrint CSS Framework'ü, kullanımı kolay ızgara sistemi, işlevsel tipografisi ve hatta yazıcı çıktısı için ayrı bir stil şablonu ile projelerinizi üzerine inşa etmeniz için mükemmel bir temel sunar."</p> <p>Çok kullanışlı şablon dosyaları sayesinde aynı şeyi tekrar tekrar kodlamanın önüne geçerek, zamanınızı tasarıma ve projenizin işlevselliğine odaklamanız, BluePrint CSS Framework'ü sayesinde artık mümkün.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/14-03-02.jpg' alt="\"\"" border="0"><br></div> <p>Eğer siz de popülerliği gittikçe artan bu Framework hakkında ayrıntılı bilgi sahibi olmak ve nasıl kullanılacağını öğrenmek istiyorsanız, o zaman <a href="http://www.bildirgec.org/yazi/blueprint-css-framework-unu-kullanmak">BluePrint CSS Framework'ü Nasıl Kullanılır</a> başlıklı yazımı mutlaka okuyun.</p> <p><strong>4. <a href="http://www.code-sucks.com/">Code-Sucks</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/14-04-01.jpg' alt="\"\"" border="0"><br></div> <p>Pek çok farklı CSS anahattı (CSS layout), kod parçacıkları (CSS, JavaScript, PHP) ve web site şablonlarını (template) içeren bu site özellikle web geliştirme aşaması sırasında oldukça kullanışlı hale geliyor.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/14-04-02.jpg' alt="\"\"" border="0"><br></div> <p><strong>5. <a href="http://snipplr.com/">Snipplr</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/14-05.jpg' alt="\"\"" border="0"><br></div> <p>Snipplr özellikle pek çok kod parçacığını (JavaScript, HTML, PHP, CSS, Ruby) depolamak ve organize etmek için çok kullanışlı bir araç. Özellikle bu kod parçacıkları, sizin de tahmin edeceğiniz üzere web geliştirme aşaması sırasında oldukça kullanışlı hale geliyor. Ayrıca site üzerinden dilediğiniz kod parçacıklarını da paylaşmak mümkün olduğundan arkadaşlarınızla paylaşmak istediğiniz kod parçacıklarını site üzerinde depolayabiliyorsunuz. Sitenin "popüler kod parçacıkları" bölümü herkes tarafından en çok kullanılan kod parçacıklarını listeliyor. Gerçekten muhteşem. Son olarak eğer TextMate kullanıyorsanız bu kod parçacıklarının TextMate ile çalıştığını da hatırlatalım.</p> <p><strong>6. <a href="http://css.maxdesign.com.au/">MaxDesign</a></strong></p> <p>Bu siteyi belki de biliyorsunuzdur, sanırım bu siteden daha önce bahsetmiştim, ancak durum öyle olsa bile bu site tekrar tekrar bahsedilebilecek kadar güzel ve gerçekten kullanışlı bir site.</p> <p>Site üzerinde listamatic1 adı verilen ve tek bir listeyi farklı şekillerden nasıl stilleyebileceğinizi gösteren bir uygulamanın yanısıra içiçe geçmiş listelere yönelik stilleme örnekleri de listamatic2 adı altında toplanmış. Özellikle CSS tabanlı listeler, yaslanmış CSS elementleri ve CSS seçicilerini kullanmak isteyenler için birebir!</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/14-06.jpg' alt="\"\"" border="0"><br></div> <p><strong>7. <a href="http://meyerweb.com/eric/tools/css/reset/">MeyerWeb CSS Reset</a></strong></p> <p>Eric Meyer'in CSS Sıfırlaması çok popüler. Tarayıcınızın öntanımlı stilleme elementlerini sıfırlamak ve ardından kendi elementlerinizi üzerine inşa etmek için birebir olan bu CSS sıfırlama tekniği gerçekten pek çok tarayıcı kaynaklı sorunu gidermenizi kolaylaştırıyor.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/14-07.jpg' alt="\"\"" border="0"><br></div> <p><strong>8. <a href="http://developer.yahoo.com/yui/examples/">YUI Library</a></strong></p> <p>"Her bir YUI kütüphane bileşeni, 300'ün üzerinde örneği de içeriyor ve siz bu sayede ilgili bileşenin projelerinize nasıl entegre edilebileceğini anlıyorsunuz. Bu örnekler YUI'yi öğrenebilmeniz için bir başlangıç noktası özelliğini taşıyor ve sunulan kod parçacıkları kendi programlamanızı üzerine inşa edebilmenizi kolaylaştırıyor. Dilerseniz çeşitli etkileşim öğelerinin web tarayıcısı üzerinden YUI aracılığı ile nasıl etkinleştirildiğini de örnek kodlara bakarak görebilirsiniz."</p> <p>Başlangıç aşamasında çok kullanışlı şablon dosyalarının yanısıra neredeyse her web tasarımcısını tatmin edecek güzel bir kolleksiyona da sahip olacaksınız.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/14-08.jpg' alt="\"\"" border="0"><br></div> <p><strong>9. <a href="http://960.gs/">960 Grid System</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/14-09.jpg' alt="\"\"" border="0"><br></div> <p>Bu ızgara sistemi gerçekten oldukça popüler hale geliyor. Geliştiricileri sık olarak kullanılan ölçülerden biri olan 960px genişliğinde web sayfaları hazırlayıp onu 12lik ve 16lık ızgaralar halinde bölümlendirerek içeriğinizi yerleştirebilmenizi sağlıyor. Tasarımcılar sitelerin harmonisini bozmamak ve kullanılırlığı arttırmak için ızgara sistemlerini kullanırlar. 960 Izgara Sistemi'ni indirdiğinizde bir dizi şablon ve taslağa da kavuşacaksınız. Bu örnekler özellikle doğru eller tarafından işlendiğinde harikalar yaratabiliyor.</p> <ul> <li><a href="http://960.gs/files/960_download.zip">İndir</a></li> <li><a href="http://www.1stwebdesigner.com/wp-content/uploads/2009/01/demo.html">Örnek</a></li> </ul> <p><strong>10. <a href="http://sencss.kilianvalkhof.com/">SenCSS - Sensible Standards CSS Framework</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/14-10.jpg' alt="\"\"" border="0"><br></div> <p>Bu framework, Eric Meyer'in sıfırlama sistemini kullanıyor, ancak bunun dışında temel stilleme, yeniden sıfırlamaya gerek bırakmayacak şekilde optimize edilmiş kod ve çok daha fazlasını sunuyor. Kendisini <a href="http://www.bildirgec.org/yazi/sencss-layout-disindaki-hersey-icin">layout dışındaki her şey için CSS framework'ü</a> olarak tanıtmış olan ve site anahatları standart dışı olduğu için ya da herhangi bir sebeple ızgara sistemlerini kullanmak istemeyenlerin isteklerine cevap verecek nitelikte.</p> <p><strong>11. <a href="http://www.spiffycorners.com/">Yuvarlatılmış CSS Köşeler</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/14-11.jpg' alt="\"\"" border="0"><br></div> <p>Eminim bugüne kadar yarısı bildirgec üzerinde olmak üzere pek çok platformda CSS ile nasıl yuvarlatılmış köşeler hazırlanabileceğine dair pek çok rehber okumuşsunuzdur. Bu çevrimiçi araç sayesinde yuvarlatılmış köşeleri kolayca oluşturabilecek ve ihtiyacınız olan kodu derhal alabileceksiniz.</p> <p><strong>12. <a href="http://www.contentwithstyle.co.uk/content/a-css-framework">Content With Style</a></strong></p> <p>Yeni web sitelerini kolayca geliştirip tasarımınız üzerine odaklanabileceğiniz güzel bir framework kolleksiyonu daha.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/14-12.jpg' alt="\"\"" border="0"><br></div> <p>Umarım bu siteleri hem yeteneklerinizi geliştirmek hem de projelerinizin geliştirme sürecini kısaltmak adına düzenli olarak kullanırsınız. Eminim yukarıdakilerin dışında daha pek çok site bulunuyor. Eğer sizin de tavsiye ettiğiniz siteler var ise, yorumlarınızla paylaşabilirsiniz.</p> <ul> <li><strong>Kaynak:</strong> <a href="http://www.1stwebdesigner.com/resources/12-really-handy-css-framework-template-and-snippet-sites-for-smart-web-designer/">1st Web Designer</a></li> </ul> <strong>CSS İle İlgili Daha Önce Yazdığım Yazılar</strong> <ul> <li><a href="http://www.bildirgec.org/yazi/web-tasariminda-bosluklari-verimli-olarak">web tasarımında boşlukları verimli olarak kullanmak</a></li> <li><a href="http://www.bildirgec.org/yazi/her-web-tasarimcisinin-ogrenmesi-gereken">her web tasarımcısının öğrenmesi gereken 9 önemli css yeteneği</a></li> <li><a href="http://www.bildirgec.org/yazi/modern-css-de-altin-oran"> modern css'de altın oran</a></li> <li><a href="http://www.bildirgec.org/yazi/sadece-css-ile-olusturulmus-animasyonlu"> Sadece CSS İle Oluşturulmuş Animasyonlu İlerleme Çubuğu (Progress Bar)</a></li> <li><a href="http://www.bildirgec.org/yazi/web-tasariminda-altin-oran">web tasarımında altın oran</a></li> <li><a href="http://www.bildirgec.org/yazi/blueprint-css-framework-unu-kullanmak">blueprint css framework'ünü kullanmak</a></li> <li><a href="http://www.bildirgec.org/yazi/jquery-siz-mootools-suz-basit">jQuery'siz, mootools'suz Basit Sekmeli İçerik Oluşturalım</a></li> <li><a href="http://www.bildirgec.org/yazi/sencss-layout-disindaki-hersey-icin">SenCSS: Layout Dışındaki Herşey İçin CSS Framework'ü</a></li> </ul><p><strong>ilgili yazılar</strong><ul><li><a href="http://www.bildirgec.org/yazi/cevrimici-css-araclari-listesi">Çevrimiçi CSS Araçları Listesi</a> (5)</li><li><a href="http://www.bildirgec.org/yazi/daha-hizli-sablon-olusturabilmek-icin">Daha Hızlı Şablon Oluşturabilmek İçin Kullanılabilecek 9 CSS çatısı</a> (2)</li><li><a href="http://www.bildirgec.org/yazi/960-css-catisina-yakindan-bakis">960 css çatısına yakından bakış</a> (4)</li><li><a href="http://www.bildirgec.org/yazi/her-web-tasarimcisinin-ogrenmesi-gereken">Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği</a> (34)</li><li><a href="http://www.bildirgec.org/yazi/en-iyi-css-framework-ler">En iyi CSS Framework'ler</a> (3)</li></ul></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/pinkfloyd">pinkfloyd</a> tarafından <a href=" http://www.bildirgec.org/yazi/web-tasarimcilari-icin-kullanisli-12 ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Fri, 23 Jan 2009 09:33:00 GMT 79140@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/web-tasarimcilari-icin-kullanisli-12 css yui css reset css sıfırlama css kaynakları css template css tasarım css yuvarlak kutu snippet blueprint css tasarım teknolojisi css teknikleri css kodları css tema css temalar css siteleri css siteler css frameworks cleancss cleancss.com css sitesi css tasarımları blueprint css sencss css framework css çatıları css şablonu css şablonları css rounded corners 960.gs 960 grid system snipplr csstidy eburhan <div class="imajorta"><img src='http://www.bildirgec.org/imaj/eburhan/quick-restart.png' alt="\"\"" border="0"><br></div> <p><a href="http://www.bildirgec.org/etiket/css">css</a> konusuyla ilgiliyseniz muhtemelen css reset <em>(sıfırlama)</em> tekniğini duymuşsunuzdur. Daha önce <a href="http://www.bildirgec.org/yazi/css-sifirlama-dosyasi">css sıfırlama dosyası</a> yazısında da bahsettiğim bu teknik, web sitenizin <a href="http://en.wikipedia.org/wiki/Cross-browser">cross browser</a> uyumluluğu açısından çok yararlı bir tekniktir.</p> <p>Fakat internette bu konuda araştırma yapınca farklı <a href="http://www.bildirgec.org/etiket/css-reset">css reset</a> teknikleriyle karşılaşabiliyorsunuz. İşte <a href="http://help-developer.com/index.php/2008/08/6-popular-css-reset-techniques/"><strong>tam bu sayfada</strong></a> bunların en popülerleri bir araya toplanmış ve kısa kısa açıklaması yapılmış. incelemenizi tevsiye ederim.</p><p><strong>ilgili yazılar</strong><ul><li><a href="http://www.bildirgec.org/yazi/css-sifirlama-dosyasi">CSS sıfırlama dosyası</a> (4)</li></ul></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/eburhan">eburhan</a> tarafından <a href=" http://www.bildirgec.org/yazi/6-populer-css-reset-teknigi ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Sun, 03 Aug 2008 08:25:00 GMT 73217@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/6-populer-css-reset-teknigi css web popüler tarayıcı teknik css reset css sıfırlama sıfırlama boşluk sorunu cross browser cross broser eburhan <div class="imajsol"><img src='http://www.bildirgec.org/imaj/eburhan/reset.png' alt="\"\"" border="0"><br>Herşeyi sıfırlayın !</div><a href="http://tr.wikipedia.org/wiki/CSS">CSS</a> ile tasarladığım sayfanın farklı tarayıcılarda aynı sonucu vermesini sağlamak için, en başta bütün elemanları <strong>sıfırlarım</strong>. <a href="http://www.bildirgec.org/ara/css">CSS</a> dosyasının en başına yazdığım <strong>* { margin:0; padding:0 }</strong> kodu ile özellikle Header (h1, h2, h3, ...) elemanlarındaki <strong>boşluk sorunu</strong> çözülmüş olur. Bu yöntemi <a href="http://leftjustified.net/journal/2004/10/19/global-ws-reset/">buradaki</a> sayfadan öğrenmiştim. <p>Meğer bu herşeye çare değilmiş :) Biraz daha ayrıntılı bir kod gerekiyormuş. <a href="http://www.yahoo.com/">Yahoo</a>'nun <a href="http://developer.yahoo.com/">Developer (Geliştici)</a> sayfasında bulduğum sıfırlama dosyası beni muradıma erdirdi :)</p> <p>Sıfırlama sayfasına <a href="http://developer.yahoo.com/yui/reset/">buradan</a> ulaşabilirsiniz. Bu sayfa sayesinde farklı tarayıcılarda yaşanan birçok sorunu, daha işin en başından çözmüş oluyorsunuz.</p><p><strong>ilgili yazılar</strong><ul><li><a href="http://www.bildirgec.org/yazi/6-populer-css-reset-teknigi">6 popüler Css Reset tekniği</a> (4)</li></ul></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/eburhan">eburhan</a> tarafından <a href=" http://www.bildirgec.org/yazi/css-sifirlama-dosyasi ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Sat, 16 Dec 2006 20:31:00 GMT 32516@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/css-sifirlama-dosyasi yahoo css web tarayıcı css reset css sıfırlama sıfırlama boşluk sorunu yahoo developer