css deneylerim - üçgen

çok güzel css deneyleri ile karşılaştım bu gün. Biraz biraz denemelere başladım ben de.
Herkes gibi css ve üçgen meselesine uzaktan giriş yaptım:


benim üçgen modelim şöyle oldu:
(css ile sadece dik kenar üçgen çizmek için bir prototiptir. yükseklik, taban uzunluğu, konum ve renk değiştirilebilir.)
css:

<style type="text/css" media="screen">
  .ust {
  position:absolute; 
  left:150px; top:100px;/* konumlandır */   }

  .ust div {
    border-left-color: transparent;
    border-style: solid;
  }
  .ic{
  border-width: 0 0 /* taban: */ 300px /* yükseklik : */ 200px;
  border-bottom-color: #955;
  }
</style>

html:

<div class="ust">
<div class="ic"></div>
</div>

sonuç:

biraz oynayınca şuna benzer çıktılar da elde edilebilir.

konuyu irdelemek için:
http://www.tantek.com/ (css ve geometrik şekiller ile ilgili ilk incelediğim site)
http://www.tantek.com/CSS/Examples/polygons.html (yöntemler harika)

css link / @import ve performasn meselesi

derlerki @import kullanmayın, <link> kullanarak css sayfası yükleyin.
performasn açısındanmış.
şöyle açıklamış
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

artık php, css ve js optimizesi olmazsa olmaz

Compress PHP, CSS, JavaScript(JS) & Optimize website performance.

css3 dışlamamak gerek...

yalınlık, fakat basitlik değil -1

bu bir yazı serisi olacak.

alt: yalın navigasyon istemiyoruz

Evet sitelerin bilhassa teperlinde çeşitli kategori ya da içeriğie yönlendirici ana bağlantılar vardır. navigasyon kısmı...
bu bağlantıların yalın halleriyle bırkıldığı siteler bazı durumlarda beni biraz soğutmuştur.
esasen temel üşengeçlik şu olsa gerek;
tepeye konacak (genelde bir "li" tagı içinde sırlanmış) menü elemanlarına şu stilin uygulanması:

#navigation{
height:2.2em;
line-height:2.2em;
width:758px;
margin:0 1px;
background:#578bb8;
color:#ffffff;
}

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ffffff;
white-space:nowrap;
}

#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}

böylesi daha iyi olurdu. hem daha belirgin hem abartı değil. tabi duruma göre değişir. sadece yalınlığı tercih eden webmaster kişilerine ufacık bi öneri olarak yeni nesil css mantığı üzerinde (aslında yeni değil) biraz çalışmaları yada zaten biliyorlarsa sevmeleri. Bilhassa yoğun program yazan kişiler bu konuya özen göstermeli sunacakları program ne kadar iyi olursa olsun karşıdaki insan şeysi sunum anında tasarımsal gözlemlerini ağırlıklı olarak tutuar.