http://www.bildirgec.org/ tr-tr 40 bildirgec.org - nrldesign - beğendikleri nrldesign <p>Bu yazı giriş ve orta seviyedeki CSS öğrencilerine hitab etmektedir. Eğer CSS'yi sıfırdan öğrenmek istiyorsanız, o zaman muhtemelen pek çok teknikle, hile ile ve ders ile karşılaşmışsınızdır. Bu yazıda, her web tasarımcısının bilmesi gereken pek çok temel CSS yeteneklerine dair kendi yaklaşımımı yansıtmaya çalıştım. Aşağıdaki makaleleri gerçekten seviyorum ve bu sebeple sizlerle paylaşmaya çalıştım. Umarım beğenirsiniz.</p> <strong>1- CSS Anahatları Oluşturmak</strong> <ul> <li><a href="http://acomment.net/creating-css-layouts-the-best-tutorials-on-converting-psd-to-xhtml/76">CSS Anahatları Oluşturmak: PSD'yi XHTML'ye dönüştürmek için en iyi dersler</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/04-01-01.gif' alt="\"\"" border="0"><br></div></li> </ul> <ul> <li><a href="http://www.noupe.com/css/css-layouts-40-tutorials-tips-demos-and-best-practices.html">CSS Anahatları: 40+ Ders, İpucu, Demo ve en iyi yöntemler</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/04-01-02.gif' alt="\"\"" border="0"><br></div></li> </ul> <p><strong>2- Stilleme ve Listeler Kullanma</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/04-02.png' alt="\"\"" border="0"><br></div></p> <ul> <li><a href="http://css.maxdesign.com.au/listutorial/">MaxDesign'dan CSS Liste Dersleri</a></li> <li><a href="http://www.alistapart.com/articles/taminglists">CSS Design: Listeleri evcilleştirmek</a></li> <li><a href="http://www.webdesignerwall.com/tutorials/style-your-ordered-list/">Sıralı Listenizi Stilleyin</a></li> <li><a href="http://www.guistuff.com/css/css_lists1.html">Üç Bölümlük CSS liste dersleri</a> [<a href="http://www.guistuff.com/css/css_lists1.html">1</a>][<a href="http://www.guistuff.com/css/css_lists2.html">2</a>][<a href="http://www.guistuff.com/css/css_lists3.html">3</a>]</li> <li><a href="http://konstruktors.com/blog/design-suggetions/125-how-to-create-beautiful-and-elegant-html-lists-using-css/">CSS Kullanılarak Nasıl Güzel ve Kullanışlı HTML Listeleri Oluşturulur?</a></li> <li><a href="http://odyniec.net/articles/turning-lists-into-trees/">Listeleri Ağaçlara Döndürmek</a></li> <li><a href="http://www.macworld.com/2005/12/secrets/januarycreate/index.php">Özelleştirilmiş Madde İmleri İçin CSS İpuçları</a></li> </ul> <p><strong>3- Kutu Modeli ve Pozisyonlamayı Anlamak</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/04-03.png' alt="\"\"" border="0"><br></div></p> <ul> <li><a href="http://www.barelyfitz.com/screencast/html-training/css/positioning/">10 adımda CSS ile pozisyonlamayı öğrenin</a></li> <li><a href="http://www.brainjar.com/css/positioning/">Kutu modeli ve CSS ile pozisyonlama</a></li> <li><a href="http://www.sitepoint.com/article/properties-glance-guide">CSS ile pozisyonlama değerleri ve bir bakışta rehberi</a></li> <li><a href="http://redmelon.net/tstme/box_model/">Temel CSS kutu modeli demosu</a></li> </ul> <p><strong>4- Daha iyi CSS Tipografisi</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/04-04.png' alt="\"\"" border="0"><br></div></p> <ul> <li><a href="http://www.3point7designs.com/blog/2006/09/20/advanced-typography-techniques-using-css/">CSS kullanarak gelilmiş tipografi</a></li> <li><a href="http://www.3point7designs.com/blog/2008/06/02/10-examples-of-beautiful-css-typography-and-how-they-did-it/">10 adet güzel görünümlü CSS tipografi örneği ve bunu nasıl yaptıkları</a></li> <li><a href="http://websitetips.com/css/typography/">CSS yazıtipleri, CSS tipografisi</a></li> </ul> <p><strong>5- Formları Stillemek</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/04-05.png' alt="\"\"" border="0"><br></div></p> <ul> <li><a href="http://www.alistapart.com/articles/prettyaccessibleforms">Daha güzel ve erişilebilir formlar</a></li> <li><a href="http://www.sitepoint.com/article/style-web-forms-css">CSS ile web formlarını stillemek</a></li> <li><a href="http://www.sitepoint.com/article/fancy-form-design-css">CSS kullanarak şık görünümlü form tasarımı</a></li> <li><a href="http://www.noupe.com/css/form-elements-40-cssjs-styling-and-functionality-techniques.html">Form Elementleri: 40'ın üzerinde CSS ve JS stilleme ve özellik teknikleri</a></li> </ul> <p><strong>6- CSS Çatılarını (Frameworklerini) Kullanmak</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/04-06.png' alt="\"\"" border="0"><br></div></p> <ul> <li><a href="http://speckyboy.com/2008/03/28/top-12-css-frameworks-and-how-to-understand-them/">En çok kullanılan 12 CSS frameworkü ve onları nasıl anlayacağınız</a>.</li> <li><a href="http://nettuts.com/html-css-techniques/which-css-grid-framework-should-you-use-for-web-design/">Web tasarımı için hangi CSS ızgara frameworkünü kullanmalı?</a></li> <li><a href="http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/"></a>CSS Frameworkleri + CSS Sıfırlama: Sıfırdan tasarlama.</li> </ul> <p><strong>7- Optimize Etme ve En İyi deneyimler</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/04-07.png' alt="\"\"" border="0"><br></div></p> <ul> <li><a href="http://woork.blogspot.com/2008/01/optimize-your-css-files-to-improve-code.html">Kod okunurluğunu arttırmak için CSS dosyalarını optimize etmek</a></li> <li><a href="http://woork.blogspot.com/2008/03/write-well-structured-css-file-without.html">Kafayı yemeden iyi yapılanmış CSS dosyaları yazmak</a></li> <li><a href="http://www.smashingmagazine.com/2008/08/18/7-principles-of-clean-and-optimized-css-code/">Temiz ve Optimize Edilmiş CSS Kodu Yazabilmenin 7 İlkesi</a></li> <li><a href="http://www.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/">CSS Stil rehberleri ile kod okunurluğunu arttırmak</a></li> <li><a href="http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/">CSS Özgüllüğü: Bilmeniz Gerekenler</a></li> <li><a href="http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/">Daha İyi CSS Kodlayabilmek için 70 Uzman Fikri</a></li> <li><a href="http://www.communitymx.com/content/article.cfm?cid=FAF76&print=true">CSS: İyi Kodlama Alışkanlıklarını Edinmek</a></li> <li><a href="http://www.evotech.net/blog/2007/04/css-best-practices/">CSS En İyi Deneyimleri</a></li> </ul> <p><strong>8- CSS Hileleri ve İpuçları</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/04-08.png' alt="\"\"" border="0"><br></div></p> <ul> <li><a href="http://www.noupe.com/better-design/7-css-hacks-you-cannt-live-without.html">Kullanmamız Gereken 7 CSS Hilesi</a></li> <li><a href="http://stylizedweb.com/2008/02/14/10-best-css-hacks/">10 En İyi CSS hilesi</a></li> <li><a href="http://nettuts.com/html-css-techniques/solving-5-common-css-headaches/">5 Bilinen CSS Baş ağrısını gidermek</a></li> <li><a href="http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html">CSS Kullanarak her şeyi tamir etmek: 20'nin üzerinde bilinen sorun ve çözümleri</a></li> <li><a href="http://stylizedweb.com/2008/03/12/most-used-css-tricks/">En çok kullanılan CSS ipuçları</a></li> <li><a href="http://www.askthecssguy.com/2008/03/one_pixel_notched_corners_as_u.html">Google Analytics tarafından kullanılan 1px kertmeli köşeler</a></li> </ul> <p><strong>9- CSS Düğmeleri, Kutuları ve Yuvarlatılmış Köşeler</strong><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/04-09.png' alt="\"\"" border="0"><br></div></p> <ul> <li><a href="http://www.sitepoint.com/article/css-round-corners-boxes-curves">CSS ve yuvarlatılmış köşeler: Yuvarlak köşeli kutular oluşturun</a></li> <li><a href="http://www.cssjuice.com/25-rounded-corners-techniques-with-css/">CSS ile 25 Yuvarlatılmış Köşe Tekniği</a></li> <li><a href="http://www.deswign.com/2008/07/01/list-with-rounded-corners/">Yuvarlak köşeli, otomatik genişliğe sahip ve fare imleci üzerine gelindiğinde efekt beliren listeler nasıl oluşturulur?</a></li> <li><a href="http://particletree.com/features/rediscovering-the-button-element/">Düğme elementini yeniden keşfetmek</a></li> <li><a href="http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html">CSS ile seksi düğmeler nasıl yapılır?</a></li> <li><a href="http://woork.blogspot.com/2008/03/css-message-box-collection.html">CSS mesaj kutusu kolleksiyonu</a></li> <li><a href="http://monc.se/kitchen/59/scalable-css-buttons-using-png-and-background-colors">PNG ve Arkaplan Rengi kullanılarak ölçeklendirilebilir CSS düğmeleri</a></li> <li><a href="http://www.nublue.co.uk/blog/css-hover-button/">Seksi CSS Hover düğmesi</a></li> <li><a href="http://woork.blogspot.com/2008/06/beautiful-css-buttons-with-icon-set.html">Simge seti ile CSS düğmeleri</a>.</li> </ul> <p><strong>Kaynak: <a href="http://acomment.net/9-top-css-essential-skills-that-every-web-designer-should-learn/299">acomment</a></strong>.</p> <strong>CSS İle İlgili Yazdığım Diğer Yazılar</strong> <ul> <li><a href="http://www.bildirgec.org/yazi/modern-css-de-altin-oran">CSS'de Altın Oran</a></li> <li><a href="http://www.bildirgec.org/yazi/sadece-css-ile-olusturulmus-animasyonlu">Sadece CSS ile oluşturulmuş animasyonlu ilerleme çabuğ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-tasarimcilari-icin-10-kullanilirlik">web tasarımcıları için 10 kullanılırlık ipucu</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 iç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 için css framework'ü</a></li> </ul><p>Bu yazı <a href="http://www.bildirgec.org/uye/nrldesign">nrldesign</a> tarafından <a href=" http://www.bildirgec.org/yazi/her-web-tasarimcisinin-ogrenmesi-gereken ">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, 18 Jul 2009 08:49:00 GMT 192352@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/her-web-tasarimcisinin-ogrenmesi-gereken nrldesign <p>Son dönemin üstün özellikli cep telefonlarını tasarımlarınızda kullanabilmek için onların yüksek çözünürlüklü fotoğraflarını çekmeniz ya da <a href="http://images.google.com/images?q=mobile+phone+&btnG=G%C3%B6rsellerde+Ara&imgsz=huge&um=1&hl=tr&sa=2">aramanız </a>gerekmiyor. tam anlamıyla işin ehli tasarımcılar için aşağıdaki 10 mobil telefon tasarımı dersleri, tasarımın gerçekten bazen fotoğraftan öteye geçtiğini açıkça <a href="http://www.youthedesigner.com/2008/09/05/10-masterful-mobile-phone-tutorials/">gösteriyor</a> .</p> <p>Daha önce<a href="http://www.bildirgec.org/yazi/iphone-yapiyoruz-photoshop-illustrator"> iphone yapıyoruz</a> bildirisinde paylaşılan derslere bu kez HTC Touch Diamond ve Blackberry de katılmış.</p> <ol> <li><a href="http://psdtuts.com/designing-tutorials/create-a-realistic-blackberry-style-mobile-phone-from-scratch/">gerçekçi bir Blackberry tasarım dersi</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/AntiHumanIST/mobile-phone-tutorial-11.jpg' alt="\"\"" border="0"><br></div></li> <li><a href="http://psdtuts.com/drawing/create-a-mobile-phone-styled-like-the-htc-touch-diamond/">HTC Touch Diamond tasarlamak isteyenlere</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/AntiHumanIST/mobile-phone-tutorial-21.jpg' alt="\"\"" border="0"><br></div><!-- buradan kes --></li> <li><a href="http://www.youthedesigner.com/wp-content/uploads/2008/09/mobile-phone-tutorial-31.jpg">kolajlarınızda kullanabileceğiniz bir sony ericsson modeli</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/AntiHumanIST/mobile-phone-tutorial-31.jpg' alt="\"\"" border="0"><br></div></li> <li><a href="http://www.madpotato.de/data/tutorials/int_04_08_CreateASexySmartPhone.zip">Gerçek bir smartphone tasarlamak isteyenlere</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/AntiHumanIST/mobile-phone-tutorial-4.jpg' alt="\"\"" border="0"><br></div></li> <li><a href="http://www.xenicore.com/index.php?option=com_content&task=view&id=14&Itemid=33">Apple'in şu meşhur aleti, iphone severlere</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/AntiHumanIST/mobile-phone-tutorial-5.jpg' alt="\"\"" border="0"><br></div></li> <li><a href="http://abduzeedo.com/tutorial-creating-iphone-interface-fireworks">bir diğer iphone arayüzü dersi </a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/AntiHumanIST/mobile-phone-tutorial-6.jpg' alt="\"\"" border="0"><br></div></li> <li><a href="http://vectortuts.com/designing/create-an-iphone-style-vector-phone-illustration/">iphone'u bir de vektörel görelim</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/AntiHumanIST/mobile-phone-tutorial-7.jpg' alt="\"\"" border="0"><br></div></li> <li><a href="http://vectortuts.com/illustration/create-a-sidekick-lx-styled-vector-illustration/">farklı tasarımda bir mobil telefon</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/AntiHumanIST/mobile-phone-tutorial-8.jpg' alt="\"\"" border="0"><br></div></li> <li><a href="http://www.tutcast.com/photoshop/iphone">iphone'u bir de photoshop'ta deneyin</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/AntiHumanIST/mobile-phone-tutorial-9.jpg' alt="\"\"" border="0"><br></div></li> <li><a href="http://www.tutzor.com/index.php/2008/06/sleek-phone-advertisement-flyer/">güzel bir reklam için güzel bir model</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/AntiHumanIST/mobile-phone-tutorial-10.jpg' alt="\"\"" border="0"><br></div></li> </ol><p>Bu yazı <a href="http://www.bildirgec.org/uye/nrldesign">nrldesign</a> tarafından <a href=" http://www.bildirgec.org/yazi/tasarim-gurularina-10-mobil-telefon ">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> Thu, 27 Nov 2008 18:25:00 GMT 185776@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/tasarim-gurularina-10-mobil-telefon