Twitter arkaplanları Link
Yaprak görselli logolar Link
Google adres senkronizer Link
Photoshop dokunuşları Link
Monthly Archives: January 2009
Tekrarlanan Kolonlarda Margin ve Padding Taşmasından Kurtulmak
CSS ile kolonlar (column) oluÅŸturmak zor olmayan bir ÅŸey. Ancak sütunlarınız dinamik bir ÅŸekilde oluÅŸuyorsa ve CMS ‘niz kodlarla oynamanıza pek izin vermiyorsa aÅŸağıdaki resimdeki gibi taÅŸmalar söz konusu olabilir.
Normal şartlarda (koda elle müdahele edebileceğiniz basit bir yapıya sahipseniz) son sütuna özel stil tanımlayıp sorundan kurtulabilirsiniz.
Peki dinamik bir yapıda çalışıyorsanız bu sorunun nasıl üstesinden geleceksiniz?
Çözüm
Sırasız listeyi(unordered list) sarmalayarak (wrapping) taşan marginleri saklamak!
Demoyu incelemek için tıklayın
HTML
Sırasız listeyi genişliği belirlenmiş bir başka div içine yerleştiriyoruz. İşin sırrı overflow:hidden; kullanarak sağdan oluşan taşmayı saklamakta.
<div class="container"> <ul class="col3"> <li> <h2>Column 1</h2> </li> <li> <h2>Column 2</h2> </li> <li> <h2>Column 3</h2> </li> </ul> </div>
CSS
Şimdi de sütunumuzun genişliğini padding ve marginleri de işin içine katarak hersaplayalım.
ÖrneÄŸin 970 px’lik bir geniÅŸliÄŸe üç kolon yerleÅŸtirmek istiyorsunuz. Hesabımızı şöyle yapıyoruz:
(En büyük genişlik+Sağ margin) / Kolın sayısı -(Sağ ve sol paddingler+ Sağ margin) = Kolon genişliği
(970px + 10px) / 3 – (40px +10px) = 276px
.container {
margin: 0 auto;
width: 970px;
overflow: hidden;
}
ul.col3 {
width: 980px;
margin: 20px 0;
padding: 0;
list-style: none;
float: left;
}
ul.col3 li {
float: left;
background: #fff;
width: 276px;
padding: 10px 20px;
margin: 5px 10px 5px 0;
}
Sonuç
Bu çözüm taşmaları önleyecek metot dışı bir hile aslına bakarsanız. Bu durumda :first-child ve :last-child pseudo-classlarını kullanmak daha doğru olabilirdi. Ancak büyük tarayıcılar bu özellikleri desteklemediği için bu çözüm geçici bir kurtarıcı olabilir.
NOT: Bu yazıyı Soh Tanaka sitesinden Türkçe’ye çevirdim.
Günün Derlemeleri / 7 Ocak 2009
Starbucks’tan Özel Tasarımlar
Starbucks Türkiye’deki 5. yılında , Türk tasarımcıların yaratıcılığıyla 28 yeni kupaya kavuÅŸtu.
Benim favorim zarif görüntüsü, kahvenin çabuk soÄŸumasını engelleyecek anatomisiyle ve ince aÄŸzıyla Oya Akman‘ın Basic’i.
maybedesign’ın küratörlüğünde projede yer alan tasarımcılar ise şöyle: Bora Akçay, Yonca Akçay, Oya Akman, Hatice ArmaÄŸan, Murat ArmaÄŸan, Yılmaz Aysan, Murad BabadaÄŸ, Ali Bakova, Ahmet BaÅŸar, Alper Böler, Birsen Canbaz, Ela Cindoruk, Guillaume Credoz, Beste Miray DoÄŸan, Zeynep FadıllıoÄŸlu, Hakan Gencol, Işık Görgün, Emre Güntürkün, Gamze Güven, Gaye Kalavlı, Zeynep Köksal, Betsy Levi, Koray Özgen, Günnur Özsoy, Nazan Pak, Derin Sarıyer, Adnan Serbest, Kunter ÅžekercioÄŸlu, Taner ÅžekercioÄŸlu, BoÄŸaç ÅžimÅŸir, Sadi Tekin, Emine Nursel Boztepe Turan, Ömer Ãœnal, Yılmaz Zenger.
Kaynak: Dexigner
Günün Derlemeleri / 6 Ocak 2009
Güzel jQuery menüsü olan 8 web sitesi Link
Dijital sanat Link
jQuery uyarı pencereleri Link Demo
Modern CSS tasarımlarda Altın Oran Link
CSS3 ile kutularınıza yuvarlak köşeler yapın Link
CSS araçları , hackleri, çarpraz tarayıcı sorunları Link
Gerçekçi Photoshop tutorialları Link
Ossi Pirkonen ile röportaj Link
En sevimli karakter yarışmasının kazananları Link
50 Adobe Illustrator video tutorial Link
Gün ışığı efekti kullanılan 45 site
That Indie Dude 
Luis Alarcon
Arcade Amusements
Jared Campbell
Historic Tennessee
Phizz – Web Design Belfast Northern Ireland, Flash, Print, Multimedia
No MILK Today – Webdesign Milky Blog
kindle : A Northern New England Bioneers Conference
ShiftSpace – An open source layer above any webpage
THE RGBS Homepage – London electro four piece
Rawkes: A web design studio on a mission
Edgepoint Church – Awesomely Different
Ciclismo Urbano
IL FRUTTETO – Camping, Ristorante, Villaggio
ActionHead Studios Ltd. – Website Design, SEO, Flash Development
The Horizontal Way – an horizontal showcase for horizontal scrolling websites.
Darklight
Papiercrayon : le blog d’une femme pour les femmes !
Travel Guides, Luxury Travel Destinations & Hotels
Old Cartoons
Refresh OKC
Valentina Olini Portfolio Online
Alyson Stoner Official Blog
Web Design Beach Bar – WebDesignBeach.com
Restoration Covenant Church
WP Glamour – Free themes and resources
PixelResort.com » Home of Designer & Iconist Michael Flarup
NOWG.net: Software, Technology, Tutorials & Blogging about Life
SamurArt
MMA & Muay Thai training in Thailand
The home page of Lady Omega : : Design, Art, Music
Sydney Web design, Web 2.0, Technology, Graphic Design, Sydney Web Design blog Cheb 2.0
A cidade dos marineiros
Crazy Cow
The Lomographic Fonk
TopTut.com – Top Tutorials: Bloggers and Designers tips, WordPress themes, Free downloads
The Harbaughs :: Amanda & Josh
CarbonGraffiti – Email Design, Marketing, Web Design Services and weblog
Blog : Musica e impegno sociale
Evan Hanson
ITjobr.net – besplatni oglasnik IT poslova za programere, web dizajnere, administratore
The Shaun
Datejs – A JavaScript Date Library » About
DeDestruct – Providing Web Design & Web Development Resources – A Multi-Author Web Journal
Online portfolio of web designer Joemon Mathews
Puneet Sakhuja – Web Designer Dubai
Kaynak: Mabucplus
Günün Derlemeleri / 2 Ocak 2009
Web tasarım ilüstrasyon Link
Abduzeedo’nun 2008′de yayınladığı en iyi baÅŸlıklar Link
Orijinal tasarımlı RSS ikonları Link
Urban tasarım tutorialları Link
HTML5′in yeni yapısal etiketleri Link
Modern ve yaratıcı kitap rafları Link
Son zamanlarda gördüğüm en yaratıcı ajans sitesi Link
Tek tuşluk flash müzik çalar Link
Favicon oluşturgacı Link
sFIR lite Link
Mootols dönüşümlü resim galerisi Link